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/scripts/deploy.sh b/.github/scripts/deploy.sh deleted file mode 100755 index 05e06b0bc3..0000000000 --- a/.github/scripts/deploy.sh +++ /dev/null @@ -1,28 +0,0 @@ -#!/bin/bash -set -exu -# e: Exit immediately if a command exits with a non-zero status -# x: Print commands and their arguments as they are executed -# u: Treat unset variables as an error when substituting - -# NOTE: you probably need to add 'w3cbot' to the list of authorized users to push to your repository -git config --global user.email 87540780+w3cgruntbot@users.noreply.github.com -git config --global user.name w3cgruntbot -git config --global user.password $GITHUB_TOKEN - -REPO_URL="https://w3cbot:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git" - -cd ${LOCAL_DIR} - -git remote set-url origin "${REPO_URL}" - -if [[ -z $(git status --porcelain) ]]; then - echo "No changes to the output on this push; exiting." - exit 0 -fi - -git add -A . -git commit -m ":robot: Deploy to GitHub Pages: $GITHUB_SHA from branch $GITHUB_REF" - -git push $REPO_URL $BRANCH - -echo done \ No newline at end of file diff --git a/.github/workflows/11ty-publish.yaml b/.github/workflows/11ty-publish.yaml new file mode 100644 index 0000000000..fd2ec74e6b --- /dev/null +++ b/.github/workflows/11ty-publish.yaml @@ -0,0 +1,45 @@ +name: Push to gh-pages branch + +# 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/.github/workflows/manual-publish.yml b/.github/workflows/manual-publish.yml deleted file mode 100644 index f5eadf897c..0000000000 --- a/.github/workflows/manual-publish.yml +++ /dev/null @@ -1,44 +0,0 @@ -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 to - runs-on: ubuntu-20.04 - env: - GH_REF: github.com/w3c/wcag.git - steps: - - name: Checkout the repository - uses: actions/checkout@v2 - - name: Setup Java - # see https://github.com/actions/setup-java#supported-distributions - # note that this also deploys ant - uses: actions/setup-java@v2 - with: - distribution: 'adopt' - java-version: '11' - - name: before_install - run: | - tar -xzvf lib/apache-ant-1.10.6-bin.tar.gz - export PATH=`pwd`/apache-ant-1.10.6/bin:$PATH - - name: script - run: | - 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/main/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/main/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/main/conformance-challenges/index.html -o output/conformance-challenges/index.html -f --retry 3 - ant deploy - - name: deploy - run: .github/scripts/deploy.sh - env: - BRANCH: gh-pages - LOCAL_DIR: output - GITHUB_TOKEN: ${{ secrets.W3CGRUNTBOT_TOKEN }} - diff --git a/.gitignore b/.gitignore index 26d41dc54a..598250a1d5 100644 --- a/.gitignore +++ b/.gitignore @@ -221,6 +221,12 @@ pip-log.txt build.properties +####### +## Node +####### + +node_modules/ + ############# ## Output ############# @@ -238,3 +244,4 @@ build.properties /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/.pr-preview.json b/.pr-preview.json deleted file mode 100644 index bf7627ccb3..0000000000 --- a/.pr-preview.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "src_file": "guidelines/index.html", - "type": "respec" -} 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/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) { + 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(//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 = {}; + 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(`

${exampleText}

`); + } + }); + } else if (isUnderstanding) { + // Add numbers to figcaptions + $("figcaption").each((i, el) => { + const $el = $(el); + if (!$el.find("p").length) $el.wrapInner("

"); + $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(`
`) + .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(`
`); + } + + $("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("

"); + + 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) => { + 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) => + 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( + `
${term.name}
` + + `
${term.definition}
` + ); + } + + // 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(`
+

Note

+
${$el.html()}
+
`); + }); + // Handle p variant after div (the reverse would double-process) + $("p.note").each((_, el) => { + const $el = $(el); + $el.replaceWith(`
+

Note

+

${$el.html()}

+
`); + }); + + // Add header to example sections in Key Terms (aside) and Conformance (div) + $("aside.example, div.example").each((_, el) => { + const $el = $(el); + $el.prepend(`

Example

`); + }); + + // 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(`New in WCAG ${scope.versionDecimal}: `); + } + // 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()); + $("") + .attr("href", `#${el.attribs.id}`) + .text(normalizeTocLabel($(el).find(sectionH2Selector).text())) + .appendTo($tocList) + .wrap("
  • "); + $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 ` +- 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/ + * (Functionally equivalent to "guidelines-versions" target in build.xml) + */ +export async function getGuidelinesVersions() { + const paths = await glob("*/*.html", { cwd: "understanding" }); + const versions: Record = { "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 = {}; + 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) => { + // 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 = {}; + 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; + +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 = {}; + + $("dfn").each((_, el) => { + const $el = $(el); + const term: Term = { + // Note: All applicable 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; + /** 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 = {}; + 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, 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, + 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 + ); + + // Check directory data files (we don't have direct access to 11ty's data cascade here) + const technologyData: Partial> = {}; + 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(/]*>([\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> +) => + Object.values(techniques) + .flat() + .reduce( + (map, technique) => { + map[technique.id] = technique; + return map; + }, + {} as Record + ); 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 { + 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 = {}; + + // 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 da9fd8326b..6bee8669d4 100644 --- a/README.md +++ b/README.md @@ -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//*.html - files for each success criterion -* guidelines/terms//*.html - files for each definition -* understanding//*.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 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 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 -
    {Term}
    +
    {Term}
    {Definition}
    ``` -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 `` 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 `web page` on the page, a link in the form of `web page` 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 `web page`. Multiple alternate names for the term can be separated with pipe characters, with no leading or trailing space, e.g., `web page`. +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 `` 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 `web page` on the page, a link in the form of `web page` 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 `web page`. Multiple alternate names for the term can be separated with pipe characters, with no leading or trailing space, e.g., `web page`. ## 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//*.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 `` 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 `
    ` element and labeled with a `
    ` positioned at the bottom of the figure. `
    ` elements must have an `id` attribute. Small inline images may be loaded with a `` 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> 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.2 is ready for translation. To translate WCAG 2.2, 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.2". -* 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. +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 & 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&rec=1" style="border:0;" alt="" /></p> +</noscript> +{% # End Matomo Code %} diff --git a/build.xml b/build.xml index 6b4d414ddb..826a539a19 100644 --- a/build.xml +++ b/build.xml @@ -172,247 +172,6 @@ </xslt> </target> - <target name="techniques" depends="techniques-list, techniques-association, techniques-index, techniques-about"> - <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"/> - <param name="documentset" expression="Techniques"/> - </xslt> - <copy file="css/base.css" todir="output/techniques/"/> - <copy file="css/a11y-light.css" tofile="output/techniques/a11y-light.css"/> - <copy file="script/highlight.min.js" todir="output/techniques/"/> - <copy file="techniques/techniques.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="Process 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/process-index.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"/> - <param name="documentset" expression="Techniques"/> - <param name="navigation.current" expression="all"/> - </xslt> - </target> - - <target name="techniques-about" description="Process the techniques about file"> - <makeurl file="${basedir}/techniques/" property="base.techniques"/> - <mkdir dir="${basedir}/output/techniques/"/> - <xslt in="${inputdir.techniques}/about.html" out="${inputdir.techniques}/about-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}/about-flat.html" out="${basedir}/output/techniques/about.html" style="xslt/process-index.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"/> - <param name="documentset" expression="Techniques"/> - <param name="navigation.current" expression="about"/> - </xslt> - <copy file="css/base.css" todir="output/techniques/"/> - </target> - - <!-- Understanding --> - <target name="understanding" depends="guidelines-xml, guidelines-versions, techniques-list, understanding-index, understanding-about" 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"> - <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"/> - <param name="documentset" expression="Understanding"/> - </xslt> - <copy file="understanding/understanding.css" todir="output/understanding/"/> - <copy file="guidelines/relative-luminance.html" 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"> - <classpath path="${classpath.saxon}"/> - <factory name="${xslt.factory}"/> - </xslt> - </target> - - <target name="understanding-index" depends="understanding-toc" description="Process the understanding index file"> - <makeurl file="${basedir}/understanding/" property="base.understanding"/> - <mkdir dir="${basedir}/output/understanding/"/> - <xslt in="${inputdir.understanding}/index.html" out="${inputdir.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/process-index.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"/> - <param name="documentset" expression="Understanding"/> - <param name="navigation.current" expression="all"/> - </xslt> - </target> - - <target name="understanding-about" description="Process the understanding about file"> - <makeurl file="${basedir}/understanding/" property="base.understanding"/> - <mkdir dir="${basedir}/output/understanding/"/> - <xslt in="${inputdir.understanding}/about.html" out="${inputdir.understanding}/about-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}/about-flat.html" out="${basedir}/output/understanding/about.html" style="xslt/process-index.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"/> - <param name="documentset" expression="Understanding"/> - <param name="navigation.current" expression="about"/> - </xslt> - <copy file="css/base.css" todir="output/understanding/"/> - </target> - - <!-- Requirements --> - <target name="requirements" depends="init"> - <mkdir dir="output/requirements/${guidelines.version}"/> - <exec executable="curl"> - <arg value=""https://labs.w3.org/spec-generator/?type=respec&url=https://raw.githack.com/w3c/wcag/master/requirements/${guidelines.version}/index.html""/> - <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=""https://labs.w3.org/spec-generator/?type=respec&url=https://raw.githack.com/w3c/wcag/master/conformance-challenges/index.html""/> - <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"/> - <delete includeemptydirs="true" failonerror="false"> - <fileset dir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}"> - <type type="file"/> - <include name="Understanding/**"/> - <include name="Techniques/**"/> - <include name="working-examples/**"/> - <exclude name="**/CVS/*"/> - </fileset> - </delete> - <copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/" failonerror="false"> - <fileset dir="output/"/> - <globmapper from="*index.html" to="*Overview.html"/> - </copy> - <copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/" failonerror="false"> - <fileset dir="output" excludes="index.html **/index.html"/> - </copy> - <copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/working-examples/" failonerror="false"> - <fileset dir="working-examples/"/> - <globmapper from="*index.html" to="*Overview.html"/> - </copy> - <copy todir="${w3ccvs.location}/WWW/WAI/WCAG${guidelines.version}/working-examples/" failonerror="false"> - <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"> @@ -445,10 +204,7 @@ </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/css/base.css b/css/base.css index ad98031fc0..25a82c2c1f 100644 --- a/css/base.css +++ b/css/base.css @@ -3,11 +3,15 @@ main { } .nav-container { - background-image: linear-gradient(#d0e1f1 0, #d0e1f1 50px, #fff 50px); +} + +.nav { + overflow: inherit; } .nav__item a { display: inline-block; + white-space: inherit; } .nav__item a svg { @@ -151,6 +155,34 @@ dt div { 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; @@ -162,6 +194,9 @@ 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; @@ -282,13 +317,13 @@ align-items: center; .nav .standalone-resource-pager a, .nav .standalone-resource-pager span { margin-left: 0; -margin-right: 1.5em; +margin-right: 0; } .pager-icon { vertical-align: middle; padding: 0 0.15em 0.15em 0.15em; -width: 1.65em; +width: 1em; height: 2em; fill: #005A6A; /* when these are used as actual SVGs */ } @@ -393,4 +428,46 @@ margin-right:.8em; } #brief dl { margin-left: 2em; -} \ No newline at end of file +} + +@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..abec817370 --- /dev/null +++ b/eleventy.config.ts @@ -0,0 +1,326 @@ +import axios from "axios"; +import compact from "lodash-es/compact"; +import { mkdirp } from "mkdirp"; +import { rimraf } from "rimraf"; + +import { copyFile, writeFile } from "fs/promises"; +import { join } from "path"; + +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( + join(dir.input, "css", "base.css"), + join(dir.output, "understanding", "base.css") + ); + + // Output guidelines/index.html and dependencies for PR runs (not for GH Pages or W3C site) + const sha = process.env.COMMIT_REF; // Read environment variable exposed by Netlify + if (sha && !process.env.WCAG_MODE) { + await mkdirp(join(dir.output, "guidelines")); + await copyFile( + join(dir.input, "guidelines", "guidelines.css"), + join(dir.output, "guidelines", "guidelines.css") + ); + await copyFile( + join(dir.input, "guidelines", "relative-luminance.html"), + join(dir.output, "guidelines", "relative-luminance.html") + ); + + const url = `https://raw.githack.com/${GH_ORG}/${GH_REPO}/${sha}/guidelines/index.html?isPreview=true`; + const { data: processedGuidelines } = await axios.get( + `https://labs.w3.org/spec-generator/?type=respec&url=${encodeURIComponent(url)}`, + { responseType: "text" } + ); + await writeFile(`${dir.output}/guidelines/index.html`, processedGuidelines); + } + }); + + 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/index.html b/guidelines/index.html index 3aea909900..fc11872059 100644 --- a/guidelines/index.html +++ b/guidelines/index.html @@ -13,28 +13,28 @@ </head> <body> <section id="abstract"> - <p>Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.</p> + <p>Web Content Accessibility Guidelines (WCAG) 2.2 covers a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make web content more usable to users in general.</p> <p>WCAG 2.2 success criteria are written as testable statements that are not technology-specific. Guidance about satisfying the success criteria in specific technologies, as well as general information about interpreting the success criteria, is provided in separate documents. See <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) Overview</a> for an introduction and links to WCAG technical and educational material.</p> - <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> + <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>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 + 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.1%20public%20comment">public-agwg-comments@w3.org</a> (<a href="https://lists.w3.org/Archives/Public/public-agwg-comments/">comment archive</a>).</p> + 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 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> + <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> <p>Significant challenges were encountered in defining additional criteria to address cognitive, language, and learning disabilities, including a short timeline for development as well as challenges in reaching consensus on testability, implementability, and international considerations of proposals. Work will carry on in this area in future versions of WCAG. We encourage authors to refer to our supplemental guidance on <a href="https://www.w3.org/WAI/standards-guidelines/wcag/#supplement">improving inclusion for people with disabilities, including learning and cognitive disabilities, people with low-vision, and more</a>.</p> - <p>Web accessibility depends not only on accessible content but also on accessible Web browsers and other user agents. Authoring tools also have an important role in Web accessibility. For an overview of how these components of Web development and interaction work together, see:</p> + <p>Web accessibility depends not only on accessible content but also on accessible web browsers and other user agents. Authoring tools also have an important role in web accessibility. For an overview of how these components of web development and interaction work together, see:</p> <ul> <li><strong><a href="https://www.w3.org/WAI/fundamentals/components/">Essential Components of Web Accessibility</a></strong></li> <li><strong><a href="https://www.w3.org/WAI/standards-guidelines/uaag/">User Agent Accessibility Guidelines (UAAG) Overview</a></strong></li> @@ -44,10 +44,10 @@ <h3>Background on WCAG 2</h3> </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> + <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/WCAG22/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> @@ -60,14 +60,14 @@ <h3>WCAG 2 Layers of Guidance</h3> </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, <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> + <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 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/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> + <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/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> @@ -80,7 +80,7 @@ <h3>WCAG 2.2 Supporting Documents</h3> </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> + <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 websites, and accessibility policies are listed in <a href="https://www.w3.org/WAI/Resources/Overview">WAI Resources</a>.</p> </section> <section id="requirements-for-wcag-2-2"> <h3>Requirements for WCAG 2.2</h3> @@ -336,7 +336,7 @@ <h3>Readable</h3> <section class="guideline" id="predictable"> <h3>Predictable</h3> - <p>Make Web pages appear and operate in predictable ways.</p> + <p>Make web pages appear and operate in predictable ways.</p> <section data-include="sc/20/on-focus.html" data-include-replace="true"></section> @@ -408,35 +408,35 @@ <h2>Interpreting Normative Requirements</h2> <section id="conformance-reqs"> <h2>Conformance Requirements</h2> - <p>In order for a Web page to conform to WCAG 2.2, all of the following conformance requirements must be satisfied:</p> + <p>In order for a web page to conform to WCAG 2.2, all of the following conformance requirements must be satisfied:</p> <!-- This section is quoted in Understanding Conformance. If updated, the update needs to be copied there. --> <section id="cc1"> <h3>Conformance Level</h3> <p>One of the following levels of conformance is met in full.</p> <ul> - <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 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> + <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 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> + <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> </section> <!-- This section is quoted in Understanding Conformance. If updated, the update needs to be copied there. --> <section id="cc2"> <h3>Full pages</h3> - <p><a>Conformance</a> (and conformance level) is for full <a>Web page(s)</a> only, and cannot be achieved if part of a Web page is excluded.</p> + <p><a>Conformance</a> (and conformance level) is for full <a>web page(s)</a> only, and cannot be achieved if part of a web page is excluded.</p> <p class="note">For the purpose of determining conformance, alternatives to part of a page's content are considered part of the page when the alternatives can be obtained directly from the page, e.g., a long description or an alternative presentation of a video.</p> - <p class="note">Authors of Web pages that cannot conform due to content outside of the author's control may consider a <a href="#conformance-partial">Statement of Partial Conformance</a>.</p> - <p class="note">A full page includes each variation of the page that is automatically presented by the page for various screen sizes (e.g. variations in a responsive Web page). Each of these variations needs to conform (or needs to have a conforming alternate version) in order for the entire page to conform.</p> + <p class="note">Authors of web pages that cannot conform due to content outside of the author's control may consider a <a href="#conformance-partial">Statement of Partial Conformance</a>.</p> + <p class="note">A full page includes each variation of the page that is automatically presented by the page for various screen sizes (e.g. variations in a responsive web page). Each of these variations needs to conform (or needs to have a conforming alternate version) in order for the entire page to conform.</p> </section> <!-- This section is quoted in Understanding Conformance. If updated, the update needs to be copied there. --> <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>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> <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> @@ -451,7 +451,7 @@ <h3>Only Accessibility-Supported Ways of Using Technologies</h3> <!-- This section is quoted in Understanding Conformance. If updated, the update needs to be copied there. --> <section id="cc5"> <h3>Non-Interference</h3> - <p>If <a> technologies </a> are used in a way that is not <a>accessibility supported</a>, or if they are used in a non-conforming way, then they do not block the ability of users to access the rest of the page. In addition, the <a>Web page</a> as a whole continues to meet the conformance requirements under each of the following conditions:</p> + <p>If <a> technologies </a> are used in a way that is not <a>accessibility supported</a>, or if they are used in a non-conforming way, then they do not block the ability of users to access the rest of the page. In addition, the <a>web page</a> as a whole continues to meet the conformance requirements under each of the following conditions:</p> <ol> <li>when any technology that is not <a>relied upon</a> is turned on in a user agent,</li> <li>when any technology that is not relied upon is turned off in a user agent, and</li> @@ -473,7 +473,7 @@ <h3>Non-Interference</h3> <section id="conformance-claims"> <h2>Conformance Claims (Optional) </h2> - <p>Conformance is defined only for <a>Web pages</a>. However, a conformance claim may be made to cover one page, a series of pages, or multiple related Web pages.</p> + <p>Conformance is defined only for <a>web pages</a>. However, a conformance claim may be made to cover one page, a series of pages, or multiple related web pages.</p> <section id="conformance-required"> <h3>Required Components of a Conformance Claim</h3> @@ -483,12 +483,12 @@ <h3>Required Components of a Conformance Claim</h3> <li><strong>Guidelines title, version and URI </strong> "Web Content Accessibility Guidelines 2.2 at <a href="https://www.w3.org/TR/WCAG22/">https://www.w3.org/TR/WCAG22/</a>"</li> <li><strong>Conformance level</strong> satisfied: (Level A, AA or AAA)</li> <li> - <p><strong>A concise description of the Web pages</strong>, such as a list of URIs for which the claim is made, including whether subdomains are included in the claim.</p> - <p class="note">The Web pages may be described by list or by an expression that describes all of the URIs included in the claim.</p> - <p class="note">Web-based products that do not have a URI prior to installation on the customer's Web site may have a statement that the product would conform when installed.</p> + <p><strong>A concise description of the web pages</strong>, such as a list of URIs for which the claim is made, including whether subdomains are included in the claim.</p> + <p class="note">The web pages may be described by list or by an expression that describes all of the URIs included in the claim.</p> + <p class="note">Web-based products that do not have a URI prior to installation on the customer's website may have a statement that the product would conform when installed.</p> </li> <li>A list of the <strong> - <a>Web content technologies</a> + <a>web content technologies</a> <a>relied upon</a></strong>.</li> </ol> <p class="note">If a conformance logo is used, it would constitute a claim and must be accompanied by the required components of a conformance claim listed above.</p> @@ -539,8 +539,8 @@ <h2>Statement of Partial Conformance - Language</h2> <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> + <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 website 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> @@ -550,8 +550,8 @@ <h2>Privacy Considerations</h2> <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> + <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 website 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> @@ -622,8 +622,6 @@ <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> @@ -783,24 +781,30 @@ <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>This section shows substantive changes incorporated into WCAG 2.2 since WCAG 2.1, as well as changes made to 2.2 since its original publication on 05 October 2023. <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/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 <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>2020-07-19: Added <q>Findable Help</q> (later renamed to <a href="#consistent-help">Consistent Help</a>), <q>Pointer Target Spacing</q> (later renamed <a href="#target-size-minimum">Target Size (Minimum)</a>), and <a href="#redundant-entry">Redundant Entry</a>.</li> + <li>2020-08-04: Added <q>Focus Appearance (Minimum)</q> (later renamed to <a href="#focus-appearance">Focus Appearance</a>).</li> + <li>2021-09-21: Added <q>Accessible Authentication (No Exception)</q> (later renamed <a href="#accessible-authentication-enhanced">Accessible Authentication (Enhanced))</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> + <li>2024-11-15: Republished WCAG 2.2, incorporating the following errata: + <ul> + <li>modified the definitions of <a>single pointer</a>, <a>used in an unusual or restricted way</a>, <a>motion animation</a>, and <a>programmatically determined</a></li> + <li>modified the formatting of definitions for <a>changes of context</a>, <a>general flash and red flash thresholds</a>, <a>cognitive function test</a>, and <a>structure</a></li> + <li>removed the defunct <q>encloses</q> definition</li> + <li>corrected typo in <a href="#input-purposes">input purposes</a> list</li> + <li>modified the formatting of Target Size (Minimum) and Accessible Authentication (Minimum)</li> + <li>modified the visual presentation for content identified as New</li> + <li>modified the language covering devices in the <a href="#abstract">Abstract</a></li> + <li>made editorial changes to improve consistent use of definitions in the success criteria</li> + <li>made editorial changes to improve consistent use of the terms <q>success criteria/criterion</q>, <q>web</q>, <q>website</q>, and <q>web page</q></li> + </ul> + </li> </ul> </section> <section class="appendix informative section" id="acknowledgements"> diff --git a/guidelines/input-purposes.html b/guidelines/input-purposes.html index b83e94c842..08deb47eaa 100644 --- a/guidelines/input-purposes.html +++ b/guidelines/input-purposes.html @@ -29,7 +29,7 @@ <h2>Input Purposes for User Interface Components</h2> <li><strong>address-level1</strong> - The broadest administrative level in the address, i.e., the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town</li> <li><strong>country</strong> - Country code</li> <li><strong>country-name</strong> - Country name</li> - <li><strong>postal-code</strong> - Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang="fr">dissement</i>, if relevant, to the <strong>address-level2</strong> field)</li> + <li><strong>postal-code</strong> - Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the <i lang="fr">arrondissement</i>, if relevant, to the <strong>address-level2</strong> field)</li> <li><strong>cc-name</strong> - Full name as given on the payment instrument</li> <li><strong>cc-given-name</strong> - Given name as given on the payment instrument (in some Western cultures, also known as the <i>first name</i>)</li> <li><strong>cc-additional-name</strong> - Additional names given on the payment instrument (in some Western cultures, also known as <i>middle names</i>, forenames other than the first name)</li> @@ -48,7 +48,7 @@ <h2>Input Purposes for User Interface Components</h2> <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, <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>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> <li><strong>tel-country-code</strong> - Country code component of the telephone number</li> diff --git a/guidelines/relative-luminance.html b/guidelines/relative-luminance.html index ed65eb01df..e7b8cbc55d 100644 --- a/guidelines/relative-luminance.html +++ b/guidelines/relative-luminance.html @@ -340,7 +340,7 @@ <h1>MathML version of the relative luminance definition</h1> </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 + <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> diff --git a/guidelines/sc/20/audio-control.html b/guidelines/sc/20/audio-control.html index aaccda2077..d9888df920 100644 --- a/guidelines/sc/20/audio-control.html +++ b/guidelines/sc/20/audio-control.html @@ -4,12 +4,12 @@ <h4>Audio Control</h4> <p class="conformance-level">A</p> - <p>If any audio on a Web page plays automatically for more than 3 seconds, either a <a>mechanism</a> is available to pause or stop the audio, or a mechanism is available to control audio + <p>If any audio on a web page plays automatically for more than 3 seconds, either a <a>mechanism</a> is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level. </p> <p class="note">Since any content that does not meet this success criterion can interfere with a user's - ability to use the whole page, all content on the Web page (whether or not it is used + ability to use the whole page, all content on the web page (whether or not it is used to meet other success criteria) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p> diff --git a/guidelines/sc/20/bypass-blocks.html b/guidelines/sc/20/bypass-blocks.html index 5e33982b78..0f4ce7ca78 100644 --- a/guidelines/sc/20/bypass-blocks.html +++ b/guidelines/sc/20/bypass-blocks.html @@ -4,7 +4,7 @@ <h4>Bypass Blocks</h4> <p class="conformance-level">A</p> - <p>A <a>mechanism</a> is available to bypass blocks of content that are repeated on multiple <a>Web pages</a>. + <p>A <a>mechanism</a> is available to bypass blocks of content that are repeated on multiple <a>web pages</a>. </p> </section> diff --git a/guidelines/sc/20/consistent-identification.html b/guidelines/sc/20/consistent-identification.html index 789b8d23f6..6b04f77b20 100644 --- a/guidelines/sc/20/consistent-identification.html +++ b/guidelines/sc/20/consistent-identification.html @@ -4,7 +4,7 @@ <h4>Consistent Identification</h4> <p class="conformance-level">AA</p> - <p>Components that have the <a>same functionality</a> within a <a>set of Web pages</a> are identified consistently. + <p>Components that have the <a>same functionality</a> within a <a>set of web pages</a> are identified consistently. </p> </section> diff --git a/guidelines/sc/20/consistent-navigation.html b/guidelines/sc/20/consistent-navigation.html index a1df5d4e8a..041cfd7ad9 100644 --- a/guidelines/sc/20/consistent-navigation.html +++ b/guidelines/sc/20/consistent-navigation.html @@ -4,7 +4,7 @@ <h4>Consistent Navigation</h4> <p class="conformance-level">AA</p> - <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>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> diff --git a/guidelines/sc/20/error-prevention-all.html b/guidelines/sc/20/error-prevention-all.html index 8fb05bb90e..2b45e63503 100644 --- a/guidelines/sc/20/error-prevention-all.html +++ b/guidelines/sc/20/error-prevention-all.html @@ -4,7 +4,7 @@ <h4>Error Prevention (All)</h4> <p class="conformance-level">AAA</p> - <p>For <a>Web pages</a> that require the user to submit information, at least one of the following is true: + <p>For <a>web pages</a> that require the user to submit information, at least one of the following is true: </p> <dl> diff --git a/guidelines/sc/20/error-prevention-legal-financial-data.html b/guidelines/sc/20/error-prevention-legal-financial-data.html index 0059cff558..ab41f3cc56 100644 --- a/guidelines/sc/20/error-prevention-legal-financial-data.html +++ b/guidelines/sc/20/error-prevention-legal-financial-data.html @@ -4,7 +4,7 @@ <h4>Error Prevention (Legal, Financial, Data)</h4> <p class="conformance-level">AA</p> - <p>For <a>Web pages</a> that cause <a>legal commitments</a> or financial transactions for the user to occur, that modify or delete <a>user-controllable</a> data in data storage systems, or that submit user test responses, at least one of + <p>For <a>web pages</a> that cause <a>legal commitments</a> or financial transactions for the user to occur, that modify or delete <a>user-controllable</a> data in data storage systems, or that submit user test responses, at least one of the following is true: </p> diff --git a/guidelines/sc/20/focus-order.html b/guidelines/sc/20/focus-order.html index 5c36ef43f5..67c724e207 100644 --- a/guidelines/sc/20/focus-order.html +++ b/guidelines/sc/20/focus-order.html @@ -4,7 +4,7 @@ <h4>Focus Order</h4> <p class="conformance-level">A</p> - <p>If a <a>Web page</a> can be <a>navigated sequentially</a> and the navigation sequences affect meaning or operation, focusable components receive + <p>If a <a>web page</a> can be <a>navigated sequentially</a> and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. </p> diff --git a/guidelines/sc/20/language-of-page.html b/guidelines/sc/20/language-of-page.html index c921129756..bae8a9ee88 100644 --- a/guidelines/sc/20/language-of-page.html +++ b/guidelines/sc/20/language-of-page.html @@ -4,7 +4,7 @@ <h4>Language of Page</h4> <p class="conformance-level">A</p> - <p>The default <a>human language</a> of each <a>Web page</a> can be <a>programmatically determined</a>. + <p>The default <a>human language</a> of each <a>web page</a> can be <a>programmatically determined</a>. </p> </section> diff --git a/guidelines/sc/20/location.html b/guidelines/sc/20/location.html index c7cb164b4f..cb72028db4 100644 --- a/guidelines/sc/20/location.html +++ b/guidelines/sc/20/location.html @@ -4,7 +4,7 @@ <h4>Location</h4> <p class="conformance-level">AAA</p> - <p>Information about the user's location within a <a>set of Web pages</a> is available. + <p>Information about the user's location within a <a>set of web pages</a> is available. </p> </section> diff --git a/guidelines/sc/20/multiple-ways.html b/guidelines/sc/20/multiple-ways.html index 0b66078a99..f320500072 100644 --- a/guidelines/sc/20/multiple-ways.html +++ b/guidelines/sc/20/multiple-ways.html @@ -4,7 +4,7 @@ <h4>Multiple Ways</h4> <p class="conformance-level">AA</p> - <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>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> diff --git a/guidelines/sc/20/name-role-value.html b/guidelines/sc/20/name-role-value.html index b3ce49a363..d28ac0b22a 100644 --- a/guidelines/sc/20/name-role-value.html +++ b/guidelines/sc/20/name-role-value.html @@ -8,7 +8,7 @@ <h4>Name, Role, Value</h4> the <a>name</a> and <a>role</a> can be <a>programmatically determined</a>; states, properties, and values that can be set by the user can be <a>programmatically set</a>; and notification of changes to these items is available to <a>user agents</a>, including <a>assistive technologies</a>. </p> - <p class="note">This success criterion is primarily for Web authors who develop or script their own + <p class="note">This success criterion is primarily for web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification. </p> diff --git a/guidelines/sc/20/no-keyboard-trap.html b/guidelines/sc/20/no-keyboard-trap.html index 89d917165d..c8865dd0db 100644 --- a/guidelines/sc/20/no-keyboard-trap.html +++ b/guidelines/sc/20/no-keyboard-trap.html @@ -10,7 +10,7 @@ <h4>No Keyboard Trap</h4> </p> <p class="note">Since any content that does not meet this success criterion can interfere with a user's - ability to use the whole page, all content on the Web page (whether it is used to + ability to use the whole page, all content on the web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p> diff --git a/guidelines/sc/20/pause-stop-hide.html b/guidelines/sc/20/pause-stop-hide.html index ab71a6bf3b..e8eaf3f32a 100644 --- a/guidelines/sc/20/pause-stop-hide.html +++ b/guidelines/sc/20/pause-stop-hide.html @@ -39,7 +39,7 @@ <h4>Pause, Stop, Hide</h4> </p> <p class="note">Since any content that does not meet this success criterion can interfere with a user's - ability to use the whole page, all content on the Web page (whether it is used to + ability to use the whole page, all content on the web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p> diff --git a/guidelines/sc/20/three-flashes-or-below-threshold.html b/guidelines/sc/20/three-flashes-or-below-threshold.html index 13b874c11e..cb031f7072 100644 --- a/guidelines/sc/20/three-flashes-or-below-threshold.html +++ b/guidelines/sc/20/three-flashes-or-below-threshold.html @@ -9,7 +9,7 @@ <h4>Three Flashes or Below Threshold</h4> </p> <p class="note">Since any content that does not meet this success criterion can interfere with a user's - ability to use the whole page, all content on the Web page (whether it is used to + ability to use the whole page, all content on the web page (whether it is used to meet other success criteria or not) must meet this success criterion. See <a href="#cc5">Conformance Requirement 5: Non-Interference</a>. </p> diff --git a/guidelines/sc/21/pointer-cancellation.html b/guidelines/sc/21/pointer-cancellation.html index 1da1d25679..c04412851a 100644 --- a/guidelines/sc/21/pointer-cancellation.html +++ b/guidelines/sc/21/pointer-cancellation.html @@ -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 037ea8378e..69749992de 100644 --- a/guidelines/sc/21/pointer-gestures.html +++ b/guidelines/sc/21/pointer-gestures.html @@ -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/22/accessible-authentication-minimum.html b/guidelines/sc/22/accessible-authentication-minimum.html index 150b65fef0..29a46b406d 100644 --- a/guidelines/sc/22/accessible-authentication-minimum.html +++ b/guidelines/sc/22/accessible-authentication-minimum.html @@ -14,15 +14,15 @@ <h4>Accessible Authentication (Minimum)</h4> <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> + <dd>The cognitive function test is to identify <a>non-text content</a> the user provided to the website.</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> + <ul> <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> + </ul> </div> </section> diff --git a/guidelines/sc/22/consistent-help.html b/guidelines/sc/22/consistent-help.html index 62c9292b09..bdb9b91a02 100644 --- a/guidelines/sc/22/consistent-help.html +++ b/guidelines/sc/22/consistent-help.html @@ -5,7 +5,7 @@ <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> + <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> @@ -15,7 +15,7 @@ <h4>Consistent Help</h4> </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> + <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 index d4b8817c68..0543f9e901 100644 --- a/guidelines/sc/22/dragging-movements.html +++ b/guidelines/sc/22/dragging-movements.html @@ -6,6 +6,6 @@ <h4>Dragging Movements</h4> <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> + <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/focus-appearance.html b/guidelines/sc/22/focus-appearance.html index fce58ddde2..2fc2d22ab7 100644 --- a/guidelines/sc/22/focus-appearance.html +++ b/guidelines/sc/22/focus-appearance.html @@ -20,6 +20,6 @@ <h4>Focus Appearance</h4> <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> + <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-minimum.html b/guidelines/sc/22/focus-not-obscured-minimum.html index 4d0ef3bce2..0ac886b9eb 100644 --- a/guidelines/sc/22/focus-not-obscured-minimum.html +++ b/guidelines/sc/22/focus-not-obscured-minimum.html @@ -7,7 +7,7 @@ <h4>Focus Not Obscured (Minimum)</h4> <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">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> diff --git a/guidelines/terms/20/accessibility-supported.html b/guidelines/terms/20/accessibility-supported.html index e863db98c9..3d53e4c99a 100644 --- a/guidelines/terms/20/accessibility-supported.html +++ b/guidelines/terms/20/accessibility-supported.html @@ -3,8 +3,8 @@ <p>supported by users' <a>assistive technologies</a> as well as the accessibility features in browsers and other <a>user agents</a></p> - <p>To qualify as an accessibility-supported use of a Web content technology (or feature - of a technology), both 1 and 2 must be satisfied for a Web content technology (or + <p>To qualify as an accessibility-supported use of a web content technology (or feature + of a technology), both 1 and 2 must be satisfied for a web content technology (or feature): </p> @@ -12,7 +12,7 @@ <li> - <p><strong>The way that the <a>Web content technology</a> is used must be supported by users' assistive technology (AT). </strong> This means that the way that the technology is used has been tested for interoperability + <p><strong>The way that the <a>web content technology</a> is used must be supported by users' assistive technology (AT). </strong> This means that the way that the technology is used has been tested for interoperability with users' assistive technology in the <a>human language(s)</a> of the content, </p> @@ -22,7 +22,7 @@ <li> - <p><strong>The Web content technology must have accessibility-supported user agents that are + <p><strong>The web content technology must have accessibility-supported user agents that are available to users. </strong> This means that at least one of the following four statements is true: </p> @@ -79,7 +79,7 @@ </ol> <p class="note">The Accessibility Guidelines 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 + technologies there must be for a particular use of a web technology in order for it to be classified as accessibility supported. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#support-level">Level of Assistive Technology Support Needed for "Accessibility Support"</a>.) </p> @@ -87,21 +87,21 @@ 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 + <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 technology or all uses of the technology are supported. Most technologies, including HTML, lack support for at least one feature or use. Pages conform to WCAG only if the uses of the technology that are accessibility supported can be relied upon to meet WCAG requirements. </p> - <p class="note">When citing Web content technologies that have multiple versions, the version(s) supported + <p class="note">When citing web content technologies that have multiple versions, the version(s) supported should be specified. </p> <p class="note">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. (See <a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#documented-lists">Understanding Accessibility-Supported Web Technology Uses</a>.) Authors, companies, technology vendors, or others may document accessibility-supported - ways of using Web content technologies. However, all ways of using technologies in + ways of using web content technologies. However, all ways of using technologies in the documentation would need to meet the definition of accessibility-supported Web content technologies above. </p> diff --git a/guidelines/terms/20/ambiguous-to-users-in-general.html b/guidelines/terms/20/ambiguous-to-users-in-general.html index 5260803b07..71e67d8b93 100644 --- a/guidelines/terms/20/ambiguous-to-users-in-general.html +++ b/guidelines/terms/20/ambiguous-to-users-in-general.html @@ -1,7 +1,7 @@ <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 + <p>the purpose cannot be determined from the link and all information of the web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it) </p> diff --git a/guidelines/terms/20/assistive-technology.html b/guidelines/terms/20/assistive-technology.html index 4a918854c8..0a9d4c306b 100644 --- a/guidelines/terms/20/assistive-technology.html +++ b/guidelines/terms/20/assistive-technology.html @@ -23,7 +23,7 @@ target narrowly defined populations of users with specific disabilities. The assistance provided by an assistive technology is more specific and appropriate to the needs of its target users. The mainstream user agent may provide important functionality - to assistive technologies like retrieving Web content from program objects or parsing + to assistive technologies like retrieving web content from program objects or parsing markup into identifiable bundles. </p> diff --git a/guidelines/terms/20/changes-of-context.html b/guidelines/terms/20/changes-of-context.html index b57e76b901..f9f20e9e3f 100644 --- a/guidelines/terms/20/changes-of-context.html +++ b/guidelines/terms/20/changes-of-context.html @@ -7,7 +7,7 @@ <p>Changes in context include changes of:</p> - <ol> + <ul> <li><a>user agent</a>; </li> @@ -17,10 +17,10 @@ <li>focus;</li> - <li><a>content</a> that changes the meaning of the <a>Web page</a> + <li><a>content</a> that changes the meaning of the <a>web page</a> </li> - </ol> + </ul> <p class="note">A change of content is not always a change of context. Changes in content, such as an expanding outline, dynamic menu, or a tab control do not necessarily change the diff --git a/guidelines/terms/20/conforming-alternate-version.html b/guidelines/terms/20/conforming-alternate-version.html index 77faa0f4f3..dd597a83fe 100644 --- a/guidelines/terms/20/conforming-alternate-version.html +++ b/guidelines/terms/20/conforming-alternate-version.html @@ -52,7 +52,7 @@ </p> <p class="note">The conforming alternative version does not need to reside within the scope of conformance, - or even on the same Web site, as long as it is as freely available as the non-conforming + or even on the same website, as long as it is as freely available as the non-conforming version. </p> diff --git a/guidelines/terms/20/content.html b/guidelines/terms/20/content.html index cce2c2c612..eb3681640c 100644 --- a/guidelines/terms/20/content.html +++ b/guidelines/terms/20/content.html @@ -1,4 +1,4 @@ -<dt><dfn id="dfn-content">content</dfn> (Web content) +<dt><dfn id="dfn-content">content</dfn> (web content) </dt> <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 19048801f6..be6ed61a9e 100644 --- a/guidelines/terms/20/general-flash-and-red-flash-thresholds.html +++ b/guidelines/terms/20/general-flash-and-red-flash-thresholds.html @@ -4,7 +4,7 @@ <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: </p> - <ol> + <ul> <li>there are no more than three <strong>general flashes</strong> and / or no more than three <strong>red flashes</strong> within any one-second period; or </li> @@ -14,7 +14,7 @@ degree visual field on the screen) at typical viewing distance </li> - </ol> + </ul> <p>where:</p> @@ -35,7 +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). 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 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 diff --git a/guidelines/terms/20/input-error.html b/guidelines/terms/20/input-error.html index 1febee2c75..7d93a33ab2 100644 --- a/guidelines/terms/20/input-error.html +++ b/guidelines/terms/20/input-error.html @@ -8,7 +8,7 @@ <ol> - <li>Information that is required by the <a>Web page</a> but omitted by the user + <li>Information that is required by the <a>web page</a> but omitted by the user </li> <li>Information that is provided by the user but that falls outside the required data diff --git a/guidelines/terms/20/label.html b/guidelines/terms/20/label.html index b8624b4ae2..67b3eb0970 100644 --- a/guidelines/terms/20/label.html +++ b/guidelines/terms/20/label.html @@ -1,7 +1,7 @@ <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> + <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> <p class="note">A label is presented to all users whereas the <a>name</a> may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same. diff --git a/guidelines/terms/20/name.html b/guidelines/terms/20/name.html index 9530872de2..c51273a1fe 100644 --- a/guidelines/terms/20/name.html +++ b/guidelines/terms/20/name.html @@ -1,7 +1,7 @@ <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> + <p>text by which software can identify a component within web content to the user</p> <p class="note">The name may be hidden and only exposed by assistive technology, whereas a <a>label</a> is presented to all users. In many (but not all) cases, the label and the name are the same. diff --git a/guidelines/terms/20/process.html b/guidelines/terms/20/process.html index 9cafc80647..db40088cd4 100644 --- a/guidelines/terms/20/process.html +++ b/guidelines/terms/20/process.html @@ -3,7 +3,7 @@ <p>series of user actions where each action is required in order to complete an activity</p> - <aside class="example"><p>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></aside> diff --git a/guidelines/terms/20/relative-luminance.html b/guidelines/terms/20/relative-luminance.html index a3dd3c369e..a071088136 100644 --- a/guidelines/terms/20/relative-luminance.html +++ b/guidelines/terms/20/relative-luminance.html @@ -43,7 +43,7 @@ <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 + <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/WAI/WCAG22/Understanding/contrast-minimum">Understanding Success Criterion 1.4.3</a>. </p> diff --git a/guidelines/terms/20/same-functionality.html b/guidelines/terms/20/same-functionality.html index a88c26f451..0ebc5e59f6 100644 --- a/guidelines/terms/20/same-functionality.html +++ b/guidelines/terms/20/same-functionality.html @@ -3,8 +3,8 @@ <p>same result when used</p> - <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 + <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 website related to the term submitted. In this case, they would have the same functionality but would not be labeled consistently. </p></aside> diff --git a/guidelines/terms/20/set-of-web-pages.html b/guidelines/terms/20/set-of-web-pages.html index bf154da489..3b46403091 100644 --- a/guidelines/terms/20/set-of-web-pages.html +++ b/guidelines/terms/20/set-of-web-pages.html @@ -1,8 +1,8 @@ -<dt><dfn id="dfn-set-of-web-pages">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>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="note">Different language versions would be considered different sets of Web pages.</p> + <p class="note">Different language versions would be considered different sets of web pages.</p> </dd> diff --git a/guidelines/terms/20/structure.html b/guidelines/terms/20/structure.html index 3001e18196..bf13b6ad07 100644 --- a/guidelines/terms/20/structure.html +++ b/guidelines/terms/20/structure.html @@ -1,14 +1,14 @@ <dt><dfn id="dfn-structure">structure</dfn></dt> <dd> - <ol> + <ul> - <li>The way the parts of a <a>Web page</a> are organized in relation to each other; and + <li>The way the parts of a <a>web page</a> are organized in relation to each other; and </li> - <li>The way a collection of <a>Web pages</a> is organized + <li>The way a collection of <a>web pages</a> is organized </li> - </ol> + </ul> </dd> diff --git a/guidelines/terms/20/supplemental-content.html b/guidelines/terms/20/supplemental-content.html index 25cd2d5478..47b585666d 100644 --- a/guidelines/terms/20/supplemental-content.html +++ b/guidelines/terms/20/supplemental-content.html @@ -4,7 +4,7 @@ <p>additional <a>content</a> that illustrates or clarifies the primary content </p> - <aside class="example"><p>An audio version of a <a>Web page</a>. + <aside class="example"><p>An audio version of a <a>web page</a>. </p></aside> <aside class="example"><p>An illustration of a complex <a>process</a>. diff --git a/guidelines/terms/20/technology.html b/guidelines/terms/20/technology.html index 08c0a2aa16..5a32eaf78f 100644 --- a/guidelines/terms/20/technology.html +++ b/guidelines/terms/20/technology.html @@ -1,20 +1,20 @@ -<dt><dfn id="dfn-technologies" 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> <p><a>mechanism</a> for encoding instructions to be rendered, played or executed by <a>user agents</a></p> - <p class="note">As used in these guidelines "Web Technology" and the word "technology" (when used - alone) both refer to Web Content Technologies. + <p class="note">As used in these guidelines "web technology" and the word "technology" (when used + alone) both refer to web content technologies. </p> <p class="note">Web content technologies may include markup languages, data formats, or programming languages that authors may use alone or in combination to create end-user experiences - that range from static Web pages to synchronized media presentations to dynamic Web + that range from static web pages to synchronized media presentations to dynamic Web applications. </p> - <aside class="example"><p>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></aside> diff --git a/guidelines/terms/20/user-agent.html b/guidelines/terms/20/user-agent.html index 0f05961d96..7d9b7e2328 100644 --- a/guidelines/terms/20/user-agent.html +++ b/guidelines/terms/20/user-agent.html @@ -1,9 +1,9 @@ <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>any software that retrieves and presents web content for users</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. + <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/web-page.html b/guidelines/terms/20/web-page.html index bdbf6b5a07..b15bbc58c8 100644 --- a/guidelines/terms/20/web-page.html +++ b/guidelines/terms/20/web-page.html @@ -1,4 +1,4 @@ -<dt><dfn id="dfn-web-page-s" 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 @@ -9,12 +9,12 @@ </p> <p class="note">For the purposes of conformance with these guidelines, a resource must be "non-embedded" - within the scope of conformance to be considered a Web page. + within the scope of conformance to be considered a web page. </p> - <aside class="example"><p>A Web resource including all embedded images and media.</p></aside> + <aside class="example"><p>A web resource including all embedded images and media.</p></aside> - <aside class="example"><p>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. @@ -28,8 +28,8 @@ 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. + floating alongside. This might be a single-page website or just one page within a + website. </p></aside> </dd> diff --git a/guidelines/terms/21/set-of-web-pages.html b/guidelines/terms/21/set-of-web-pages.html index f435a86c58..c79b7cbb15 100644 --- a/guidelines/terms/21/set-of-web-pages.html +++ b/guidelines/terms/21/set-of-web-pages.html @@ -6,11 +6,11 @@ <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 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> + <p class="note">Different language versions would be considered different sets of web pages.</p> </dd> diff --git a/guidelines/terms/21/single-pointer.html b/guidelines/terms/21/single-pointer.html index 7f0001968a..bc1a6cf1f3 100644 --- a/guidelines/terms/21/single-pointer.html +++ b/guidelines/terms/21/single-pointer.html @@ -1,6 +1,6 @@ <dt><dfn id="dfn-single-pointer">single pointer</dfn></dt> <dd> - <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> + <p>an input modality 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">Single pointer interactions include clicks, double clicks, taps, dragging motions, and single-finger swipe gestures. In contrast, 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/22/cognitive-function-test.html b/guidelines/terms/22/cognitive-function-test.html index 99d9ea0866..e2674ea400 100644 --- a/guidelines/terms/22/cognitive-function-test.html +++ b/guidelines/terms/22/cognitive-function-test.html @@ -3,7 +3,7 @@ <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 Web sites;</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 websites;</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/encloses.html b/guidelines/terms/22/encloses.html deleted file mode 100644 index b601c7661c..0000000000 --- a/guidelines/terms/22/encloses.html +++ /dev/null @@ -1,7 +0,0 @@ -<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/wcag.json b/guidelines/wcag.json index d396c17bed..62e9866614 100644 --- a/guidelines/wcag.json +++ b/guidelines/wcag.json @@ -442,7 +442,7 @@ "TECH:G144" , "title": - "Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality" + "Ensuring that the web page contains another CAPTCHA serving the same purpose using a different modality" } ]} @@ -1423,7 +1423,7 @@ "TECH:G157" , "title": - "Incorporating a live audio captioning service into a Web page" + "Incorporating a live audio captioning service into a web page" } ]}, @@ -2384,7 +2384,7 @@ "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.", + "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": [ @@ -2402,7 +2402,7 @@ "TECH:G170" , "title": - "Providing a control near the beginning of the Web page that turns off sounds that play automatically" + "Providing a control near the beginning of the web page that turns off sounds that play automatically" } , { @@ -2672,7 +2672,7 @@ "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" + "Providing controls on the web page that allow users to incrementally change the size of all text on the page up to 200 percent" } , { @@ -4012,7 +4012,7 @@ "TECH:G186" , "title": - "Using a control in the Web page that stops moving, blinking, or auto-updating content" + "Using a control in the web page that stops moving, blinking, or auto-updating content" } , { @@ -4399,7 +4399,7 @@ "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.", + "title": "A mechanism is available to bypass blocks of content that are repeated on multiple web pages.", "techniques": [ {"sufficient": [ @@ -4547,7 +4547,7 @@ "TECH:G88" , "title": - "Providing descriptive titles for Web pages" + "Providing descriptive titles for web pages" , "using": [ @@ -4579,7 +4579,7 @@ "TECH:G127" , "title": - "Identifying a Web page's relationship to a larger collection of Web pages" + "Identifying a web page's relationship to a larger collection of web pages" } ]}, @@ -4590,7 +4590,7 @@ "TECH:F25" , "title": - "Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents" + "Failure of Success Criterion 2.4.2 due to the title of a web page not identifying the contents" } ]}] @@ -4602,7 +4602,7 @@ "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.", + "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": [ @@ -4649,7 +4649,7 @@ "TECH:future-focus-order-1" , "title": - "Changing a Web page dynamically using one of the following techniques:" + "Changing a web page dynamically using one of the following techniques:" , "using": [ @@ -4755,7 +4755,7 @@ "TECH:G189" , "title": - "Providing a control near the beginning of the Web page that changes the link text" + "Providing a control near the beginning of the web page that changes the link text" } , { @@ -4765,14 +4765,6 @@ "title": "Using scripts to change the link text" } - , - { - "id": - "TECH:FLASH7" - , - "title": - "" - } ] @@ -4918,14 +4910,6 @@ , { "id": - "TECH:FLASH5" - , - "title": - "" - } - , - { - "id": "TECH:H80" , "title": @@ -4960,7 +4944,7 @@ "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.", + "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": [ @@ -4979,7 +4963,7 @@ "TECH:G125" , "title": - "Providing links to navigate to related Web pages" + "Providing links to navigate to related web pages" } , { @@ -5011,7 +4995,7 @@ "TECH:G126" , "title": - "Providing a list of links to all other Web pages" + "Providing a list of links to all other web pages" } , { @@ -5177,7 +5161,7 @@ "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.", + "title": "Information about the user's location within a set of web pages is available.", "techniques": [ {"sufficient": [ @@ -5211,7 +5195,7 @@ "TECH:G127" , "title": - "Identifying a Web page's relationship to a larger collection of Web pages" + "Identifying a web page's relationship to a larger collection of web pages" , "using": [ @@ -5309,7 +5293,7 @@ "TECH:G189" , "title": - "Providing a control near the beginning of the Web page that changes the link text" + "Providing a control near the beginning of the web page that changes the link text" } , { @@ -5319,14 +5303,6 @@ "title": "Using scripts to change the link text" } - , - { - "id": - "TECH:FLASH7" - , - "title": - "" - } ] @@ -5395,14 +5371,6 @@ , { "id": - "TECH:FLASH5" - , - "title": - "" - } - , - { - "id": "TECH:H33" , "title": @@ -6068,7 +6036,7 @@ "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.", + "title": "The default human language of each web page can be programmatically determined.", "techniques": [ {"sufficient": [ @@ -6163,7 +6131,7 @@ {"situations": [ - {"title": "Situation A: If the word or phrase has a unique meaning within the Web page:", + {"title": "Situation A: If the word or phrase has a unique meaning within the web page:", "techniques": [ { @@ -6272,7 +6240,7 @@ } ]}, - {"title": "Situation B: If the word or phrase means different things within the same Web page:", + {"title": "Situation B: If the word or phrase means different things within the same web page:", "techniques": [ { @@ -6355,7 +6323,7 @@ {"situations": [ - {"title": "Situation A: If the abbreviation has only one meaning within the Web page:", + {"title": "Situation A: If the abbreviation has only one meaning within the web page:", "techniques": [ { @@ -6457,7 +6425,7 @@ } ]}, - {"title": "Situation B: If the abbreviation means different things within the same Web page:", + {"title": "Situation B: If the abbreviation means different things within the same web page:", "techniques": [ { @@ -6637,7 +6605,7 @@ "num": "3.2", "versions": ["2.0", "2.1", "2.2"], "handle": "Predictable", - "title": "Make Web pages appear and operate in predictable ways.", + "title": "Make web pages appear and operate in predictable ways.", "successcriteria": [ { @@ -6796,7 +6764,7 @@ "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.", + "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": [ @@ -6848,7 +6816,7 @@ "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.", + "title": "Components that have the same functionality within a set of web pages are identified consistently.", "techniques": [ {"sufficient": [ @@ -6876,7 +6844,7 @@ "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" + "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" } ]}] @@ -6895,7 +6863,7 @@ {"situations": [ - {"title": "Situation A: If the Web page allows automatic updates:", + {"title": "Situation A: If the web page allows automatic updates:", "techniques": [ { @@ -6940,7 +6908,7 @@ } ]}, - {"title": "Situation C: If the Web page uses pop-up windows:", + {"title": "Situation C: If the web page uses pop-up windows:", "techniques": [ { @@ -7066,7 +7034,7 @@ "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:", + "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": [ @@ -7523,7 +7491,7 @@ "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:", + "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", @@ -7605,7 +7573,7 @@ } ]}, - {"title": "Situation C: If the Web page includes a testing application:", + {"title": "Situation C: If the web page includes a testing application:", "techniques": [ { @@ -7673,7 +7641,7 @@ "TECH:G71" , "title": - "Providing a help link on every Web page" + "Providing a help link on every web page" } , { @@ -7681,7 +7649,7 @@ "TECH:G193" , "title": - "Providing help by an assistant in the Web page" + "Providing help by an assistant in the web page" } , { @@ -7746,7 +7714,7 @@ "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:", + "title": "For web pages that require the user to submit information, at least one of the following is true:", "details": [{ "type": "ulist", @@ -7841,7 +7809,7 @@ }, { "handle": "Personal Content", - "text": "The cognitive function test is to identify non-text content the user provided to the Web site." + "text": "The cognitive function test is to identify non-text content the user provided to the website." } ] }], @@ -8027,7 +7995,7 @@ "TECH:G134" , "title": - "Validating Web pages" + "Validating web pages" } , { @@ -8051,7 +8019,7 @@ "TECH:future-parsing-1" , "title": - "Ensuring that Web pages can be parsed by using one of the following techniques:" + "Ensuring that web pages can be parsed by using one of the following techniques:" , "using": [ @@ -8070,7 +8038,7 @@ "TECH:H93" , "title": - "Ensuring that id attributes are unique on a Web page" + "Ensuring that id attributes are unique on a web page" } , { @@ -8088,7 +8056,7 @@ "TECH:H75" , "title": - "Ensuring that Web pages are well-formed" + "Ensuring that web pages are well-formed" } ] @@ -8501,7 +8469,7 @@ "TECH:G193" , "title": - "Providing help by an assistant in the Web page" + "Providing help by an assistant in the web page" } ]} diff --git a/index.html b/index.html new file mode 100644 index 0000000000..56183d90c5 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ +---js +// Same condition used for copying guidelines assets in eleventy.config.ts +const includeGuidelines = process.env.COMMIT_REF && !process.env.WCAG_MODE; +const repoUrl = process.env.REPOSITORY_URL; +const prNumber = process.env.REVIEW_ID; +--- +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"/> + <title>Web Content Accessibility Guidelines {{ versionDecimal }} + + +

    Web Content Accessibility Guidelines {{ versionDecimal }}

    + {% if repoUrl and prNumber -%} +

    + Note: This is a preview for + PR #{{ prNumber }}. +

    + {%- endif %} + + + 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..156a3283e7 --- /dev/null +++ b/package.json @@ -0,0 +1,34 @@ +{ + "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", + "axios": "^1.7.7", + "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 c395c48193..8875456838 100644 --- a/requirements/22/index.html +++ b/requirements/22/index.html @@ -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/techniques/aria/ARIA18.html b/techniques/aria/ARIA18.html index 9e65062c34..0cec95c903 100644 --- a/techniques/aria/ARIA18.html +++ b/techniques/aria/ARIA18.html @@ -41,7 +41,7 @@

    Alert dialog

    Expected Results

      -
    • Checks 2, 3, 5 and 6 are true. For Success Criterion 3.3.3, Check 7 is also true.
      • +
    • Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.

    Resources

    diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html index b26a3f3024..13b5c45310 100644 --- a/techniques/aria/ARIA22.html +++ b/techniques/aria/ARIA22.html @@ -18,7 +18,7 @@

    When to Use

    Description

    - This technique uses the status 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 role="status" to the element that contains the status message. The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has a default aria-atomic value of true, so that updates to the container marked with a role of status 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 WAI-ARIA status (role) for more details.

    + This technique uses the status 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 role="status" to the element that contains the status message. The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has a default aria-atomic value of true, so that updates to the container marked with a role of status 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 WAI-ARIA status (role) for more details.

    @@ -45,7 +45,7 @@

    Updating the shopping cart status

    Tests

    Procedure

    -

    For each status message:

    +

    For each status message:

    1. Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs.
    2. Check that when the status message is triggered, it is inside the container.
      3. diff --git a/techniques/aria/ARIA24.html b/techniques/aria/ARIA24.html index 31f242ef06..381f71161a 100644 --- a/techniques/aria/ARIA24.html +++ b/techniques/aria/ARIA24.html @@ -15,11 +15,6 @@

      Metadata

      advisory

    -
    -

    When to Use

    -

    This technique is applicable to Markup languages that support ARIA.

    -
    -

    Description

    diff --git a/techniques/aria/ARIA5.html b/techniques/aria/ARIA5.html index d79b673cde..706d9249f4 100644 --- a/techniques/aria/ARIA5.html +++ b/techniques/aria/ARIA5.html @@ -85,9 +85,6 @@

    A slider

  • Accessible Rich Internet Applications (WAI-ARIA), Supported States and Properties
    • -
  • - HTML to Platform Accessibility APIs Implementation Guide: HTML Element to Accessibility API Role Mapping Matrix -
  • WAI-ARIA Authoring Practices Guide
    • diff --git a/techniques/aria/ARIA6.html b/techniques/aria/ARIA6.html index 929da3a2b4..ffe7362e3b 100644 --- a/techniques/aria/ARIA6.html +++ b/techniques/aria/ARIA6.html @@ -2,12 +2,12 @@

    Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

    Description

    The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

    -

    Authors should be aware that aria-label may be disregarded by assistive technologies in situations where aria-labelledby is used for the same object. For more information on the naming hierarchy please consult the ARIA specification and the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.

    +

    Authors should be aware that aria-label may be disregarded by assistive technologies in situations where aria-labelledby is used for the same object. For more information on the naming hierarchy please consult the accessible name and description computation section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.

    Examples

    Distinguishing navigation landmarks

    -

    The following example shows how aria-label 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.

    +

    The following example shows how aria-label 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.

    <div role="navigation" aria-label="Primary">
   <ul>
     <li>...a list of links here ...</li>
@@ -64,7 +64,7 @@ 
    Providing a label for Math

    Description

    The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label 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 aria-labelledby attribute should be used instead of aria-label. 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 aria-label value will show in the list of links instead of the actual link text.

    -

    Per the Accessible Name and Description Computation and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label 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 aria-label with the text used within the link. This will allow consistent communication between users.

    +

    Per the Accessible Name and Description Computation and the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0, the aria-label 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 aria-label with the text used within the link. This will allow consistent communication between users.

    Examples

    Describing the purpose of a link in HTML using aria-label.

    diff --git a/techniques/aria/ARIA9.html b/techniques/aria/ARIA9.html index 1ee130cbcb..6bcae65398 100644 --- a/techniques/aria/ARIA9.html +++ b/techniques/aria/ARIA9.html @@ -7,14 +7,14 @@

    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 id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.

    Another application of aria-labelledby 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 aria-labelledby 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.

    -

    The ARIA accessible name and description calculation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby 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 ids in aria-labelledby.

    +

    The Accessible Name and Description Computation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby 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 ids in aria-labelledby.

    Examples

    A time-out input field with concatenated name

    A text input allows users to extend the default time before a time-out occurs.

    -

    The string "Extend time-out to" is contained in a native label 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 aria-labelledby, per the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide.

    +

    The string "Extend time-out to" is contained in a native label 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 aria-labelledby, per the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0.

    The aria-labelledby attribute on the text input references three elements: (1) the span 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 span. These elements should be concatenated to provide the full name for the text input

    <div>
   <span id="timeout-label">
@@ -59,7 +59,7 @@ 
    A conference workshop booking table
    
 <table>
   <caption>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>
@@ -70,7 +70,7 @@ 
    A conference workshop booking table
    
     <th scope="col" id="pm2">2 to 5 PM</th>
   </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>
       <p>2 places left</p>
@@ -97,7 +97,7 @@ 
    A conference workshop booking table
    
     </td>
   </tr>
   <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>
diff --git a/techniques/client-side-script/SCR14.html b/techniques/client-side-script/SCR14.html
index 6cf03f00ba..b019823173 100644
--- a/techniques/client-side-script/SCR14.html
+++ b/techniques/client-side-script/SCR14.html
@@ -97,7 +97,7 @@ 
    The HTML
    
       
    
 				
    Expected Results
    
          
      
-            
    • For a Web page that supports non-emergency interruptions, checks 1 and 2 are true.
      • 
+            
    • For a Web page that supports non-emergency interruptions, checks #1 and #2 are true.
      •
    diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html index dc15b63f50..4e479cc70e 100644 --- a/techniques/client-side-script/SCR19.html +++ b/techniques/client-side-script/SCR19.html @@ -119,7 +119,7 @@ Accessible Forms using WCAG 2.0
  • - Change of context definition + Change of context definition
    • diff --git a/techniques/client-side-script/SCR35.html b/techniques/client-side-script/SCR35.html index 0b89ea6475..8448d01323 100644 --- a/techniques/client-side-script/SCR35.html +++ b/techniques/client-side-script/SCR35.html @@ -38,7 +38,7 @@

    Link that runs a script and has no fallback for non-scripted browsers

    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.html. The sostuff.html page 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.html after the script ran.

    +

    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.html. The dostuff.html page 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.html after the script ran.

    <script> 
   function doStuff() {  
diff --git a/techniques/client-side-script/SCR37.html b/techniques/client-side-script/SCR37.html
new file mode 100644
index 0000000000..e99c08cc66
--- /dev/null
+++ b/techniques/client-side-script/SCR37.html
@@ -0,0 +1,134 @@
+---
+obsoleteMessage: |
+  See H102: Creating modal dialogs with the HTML dialog element for a standards-based approach instead.
+obsoleteSince: 20
+---
+Creating Custom Dialogs in a Device Independent Way
    Creating Custom Dialogs in a Device Independent Way
    ID: SCR37
    Technology: client-side-script
    Type: Technique
    When to Use
    
+      
    HTML and XHTML used with script.
    
+   
    Description
    
+      
    Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS. 
    
+      
    To be accessible, these dialogs must follow a few simple rules. 
    
+      
      
+         
    1. Trigger the script that launches the dialog from the onclick event of a link or button.
      2. 
+         
    2. Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script. 
      3. 
+         
    3. Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.
      4. 
+      
    
+      
    It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it. 
    
+   
    Examples
    
+      
    
+         
    An options button that opens a dialog
    
+         
+            
    The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog. 
    
+            
    The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM. 
    
+            
    In this example, the Submit and Reset buttons inside the dialog simply hide the div. 
    
+         
+         
    ...
+<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>
+...
+
    
+         
+            
    The div, heading and form elements are styled with CSS to look like a dialog. 
    
+         
+         
    ...
+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; }
+...
+
    
+         
+            
    The script toggles the display of the popup div, showing it and hiding it. 
    
+         
+         
    ...
+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 ResetForm(elem) {
+  elem.parentNode.style.display='none'; 
+  return false;
+}
+...
+
    
+         
+      
    
+   
    Tests
    
+      
    Procedure
    
+         
      
+            
    1. Find all areas of the page that trigger dialogs that are not pop-up windows. 
      2. 
+            
    2. Check that the dialogs can be opened by tabbing to the area and hitting enter. 
      3. 
+            
    3. Check that, once opened, the dialog is next in the tab order. 
      4. 
+            
    4. Check that the dialogs are triggered from the click event of a button or a link. 
      5. 
+            
    5. Using a tool that allows you to inspect the DOM generated by script, check that the dialog is next in the DOM. 
      6. 
+         
    
+      
    
+      
    Expected Results
    
+         
      
+            
    • Checks #2, #3, #4 and #5 are true. 
      • 
+         
    
+      
    
+   
    Resources
    
+      
+         
+      
+   
    
diff --git a/techniques/client-side-script/SCR39.html b/techniques/client-side-script/SCR39.html
index 4bce0e2862..56f88e344e 100644
--- a/techniques/client-side-script/SCR39.html
+++ b/techniques/client-side-script/SCR39.html
@@ -29,7 +29,6 @@ 
    Description

    Examples

    -

    Content preview for links

    When hovering over or focusing on a link, a content preview for the link appears just above or below that link. diff --git a/techniques/css/C18.html b/techniques/css/C18.html index 4fd17d0875..6cb35c732f 100644 --- a/techniques/css/C18.html +++ b/techniques/css/C18.html @@ -53,10 +53,10 @@

    Tests

    Resources

    diff --git a/techniques/css/C21.html b/techniques/css/C21.html index 76c0d4e03a..65bef956ec 100644 --- a/techniques/css/C21.html +++ b/techniques/css/C21.html @@ -40,7 +40,7 @@

    Procedure

    Expected Results

      -
    • Test Procedure #2 is true.
      • +
    • Check #2 is true.
    diff --git a/techniques/css/C22.html b/techniques/css/C22.html index 1952287a56..2bc667de8b 100644 --- a/techniques/css/C22.html +++ b/techniques/css/C22.html @@ -314,6 +314,21 @@

    Resources

  • CSS2.1 Specification
    • +
  • + CSS Fonts Module Level 3 +
    • +
  • + CSS Color Module Level 4 +
    • +
  • + CSS Text Module Level 3 +
    • +
  • + CSS Backgrounds and Borders Module Level 3 +
    • +
  • + Selectors Level 3 +
  • Learning CSS
    • diff --git a/techniques/css/C27.html b/techniques/css/C27.html index ae4e4ef2b1..a3f1360977 100644 --- a/techniques/css/C27.html +++ b/techniques/css/C27.html @@ -21,7 +21,7 @@

    Description

    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.

    When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

    -

    The tabindex 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 tabindex 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 tabindex 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.

    +

    The tabindex 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 tabindex 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 tabindex 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.

    diff --git a/techniques/css/C28.html b/techniques/css/C28.html index 46a042490a..0969060eec 100644 --- a/techniques/css/C28.html +++ b/techniques/css/C28.html @@ -17,9 +17,13 @@

    When to Use

    Description

    -

    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.

    +

    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.

    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.

    -

    The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.

    +

    The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.

    + +
    +

    This technique uses em units, but using rem units instead would have the same effect.

    +

    Examples

    @@ -28,7 +32,7 @@

    em units for sizes for layout container co

    In this example, a div element, with id 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 id value of "nav_list". The text size for the navigation links and the width of the container are specified in em units.

    -
    #nav_menu { width: 20em; height: 100em }
+
    #nav_menu { width: 20em; height: 100em; }
 #nav_list { font-size: 100%; }

    diff --git a/techniques/css/C39.html b/techniques/css/C39.html index 84687a78e7..2c5577becf 100644 --- a/techniques/css/C39.html +++ b/techniques/css/C39.html @@ -17,7 +17,7 @@

    Metadata

    When to Use

    -

    +

    CSS which causes motion that is triggered by user interactions.

    diff --git a/techniques/css/C43.html b/techniques/css/C43.html index 398cf53059..ee3d14329f 100644 --- a/techniques/css/C43.html +++ b/techniques/css/C43.html @@ -167,12 +167,14 @@

    Procedure

    For each user interface component that can receive keyboard focus:

    1. Check that the user interface component is not entirely hidden when it receives keyboard focus.
      2. +
    2. Check that no part of the user interface component is hidden when it receives keyboard focus.

    Expected Results

      -
    • Check 1 is true.
      • +
    • Check #1 is true.
      • +
    • For Focus Not Obscured (Enhanced) (Level AAA), #2 is also true.
    diff --git a/techniques/css/C45.html b/techniques/css/C45.html index e69ab28c43..8c9fd37786 100644 --- a/techniques/css/C45.html +++ b/techniques/css/C45.html @@ -74,7 +74,7 @@

    Procedure

    Expected Results

      -
    • Check 2 is true.
      • +
    • Check #2 is true.
    diff --git a/techniques/failures/F1.html b/techniques/failures/F1.html index 74afdb3759..765be98867 100644 --- a/techniques/failures/F1.html +++ b/techniques/failures/F1.html @@ -6,7 +6,7 @@

    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 @@ -125,7 +125,7 @@

    Expected Results

      -
    • If step #2 is false, then this failure condition applies and the +
    • If check #2 is false, then this failure condition applies and the content fails this Success Criterion.
    diff --git a/techniques/failures/F102.html b/techniques/failures/F102.html index 311c8fb20f..b080c9a30e 100644 --- a/techniques/failures/F102.html +++ b/techniques/failures/F102.html @@ -8,7 +8,6 @@

    Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed

    Metadata

    -

    Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.

    diff --git a/techniques/failures/F103.html b/techniques/failures/F103.html index c519d2aa52..aabec5461e 100644 --- a/techniques/failures/F103.html +++ b/techniques/failures/F103.html @@ -29,7 +29,7 @@

    Description

  • the new content does not take focus (does not change context);
  • 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.
    • - Where updated content does not conform to the definition of status message, a failure of 4.1.3 has not taken place.

    + Where updated content does not conform to the definition of status messages, a failure of 4.1.3 has not taken place.

    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:

    • the HTML output element
      • diff --git a/techniques/failures/F105.html b/techniques/failures/F105.html index 6bbbb182ca..a43791e9ac 100644 --- a/techniques/failures/F105.html +++ b/techniques/failures/F105.html @@ -8,7 +8,6 @@

      Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative

      Metadata

      -

      Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.

      Applies to 2.5.1 Pointer Gestures

      Failure Technique

      @@ -55,14 +54,5 @@

      Related Techniques

    • Providing single point activation for a control slider
    - diff --git a/techniques/failures/F107.html b/techniques/failures/F107.html index 49f6123522..94c2938830 100644 --- a/techniques/failures/F107.html +++ b/techniques/failures/F107.html @@ -53,7 +53,7 @@

    Procedure

    Expected Results

      -
    • If checks 1 and 2 are true, then the failure condition applies, and the content fails the Success Criterion.
      • +
    • If checks #1 and #2 are true, then the failure condition applies, and the content fails the Success Criterion.
    diff --git a/techniques/failures/F109.html b/techniques/failures/F109.html index 55148c97dc..f5cf0f7383 100644 --- a/techniques/failures/F109.html +++ b/techniques/failures/F109.html @@ -23,7 +23,7 @@

    Description

    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.

    -

    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 cognitive function test. This applies irrespective of whether users are required to enter all characters in the string, or just a subset.

    +

    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 cognitive function test. This applies irrespective of whether users are required to enter all characters in the string, or just a subset.

    @@ -47,7 +47,7 @@

    Examples

    Expected Results

      -
    • If steps #1 and #2 are true, then this failure condition applies and content fails the Success Criterion.
      • +
    • If checks #1 and #2 are true, then this failure condition applies and content fails the Success Criterion.
    diff --git a/techniques/failures/F110.html b/techniques/failures/F110.html index 8ed761cb64..6327f0b4ae 100644 --- a/techniques/failures/F110.html +++ b/techniques/failures/F110.html @@ -25,11 +25,17 @@

    Examples

    Sticky footer

    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.

    +

    + Failure example of sticky footer that completely cover elements in focus as a user tabs down the page. +

    Sticky header

    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.

    -
    +

    + Failure example of sticky header that completely cover elements in focus as a user tabs up the page. +

    +

    Tests

    diff --git a/techniques/failures/F12.html b/techniques/failures/F12.html index b378a86408..6fed1e99e3 100644 --- a/techniques/failures/F12.html +++ b/techniques/failures/F12.html @@ -46,7 +46,7 @@

    Expected Results

      -
    • If step #3 is false, the site fails the Success Criterion.
      • +
    • If check #3 is false, the site fails the Success Criterion.

    Expected Results

      -
    • If step #1 is true, then this failure condition applies and +
    • If check #1 is true, then this failure condition applies and content fails the Success Criterion.
    diff --git a/techniques/failures/F14.html b/techniques/failures/F14.html index 0a2ea81dd5..36863c89b2 100644 --- a/techniques/failures/F14.html +++ b/techniques/failures/F14.html @@ -45,7 +45,7 @@

    Expected Results

      -
    • If step #2 is false, then this failure condition applies and the +
    • If check #2 is false, then this failure condition applies and the content fails this Success Criterion.
    diff --git a/techniques/failures/F15.html b/techniques/failures/F15.html index 8ff4f5362f..c9b3748484 100644 --- a/techniques/failures/F15.html +++ b/techniques/failures/F15.html @@ -39,7 +39,7 @@

    Failure of Success Criterion 4.1.2 due to implementing custom controls that

    Expected Results

      -
    • If step #1 is false, then this failure condition applies and the +
    • If check #1 is false, then this failure condition applies and the content fails this success criterion.
    diff --git a/techniques/failures/F19.html b/techniques/failures/F19.html index ad6f883254..4cde7a8bad 100644 --- a/techniques/failures/F19.html +++ b/techniques/failures/F19.html @@ -29,7 +29,7 @@

    Expected Results

      -
    1. If step #2 is false, the content fails the Success Criterion.
      2. +
    2. If check #2 is false, the content fails the Success Criterion.

    Expected Results

      -
    • If step #1 is true then the text alternative is not up to date with +
    • 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.
    diff --git a/techniques/failures/F22.html b/techniques/failures/F22.html index 9e09264f17..5e8d0cf538 100644 --- a/techniques/failures/F22.html +++ b/techniques/failures/F22.html @@ -56,9 +56,9 @@

    Expected Results

      -
    • If step #2 is true, the failure condition applies and the content +
    • If check #2 is true, the failure condition applies and the content fails the Success Criterion
      • -
    • If step #5 is true and step #6 is false, the failure condition applies and +
    • If check #5 is true and check #6 is false, the failure condition applies and the content fails the Success Criterion
    diff --git a/techniques/failures/F23.html b/techniques/failures/F23.html index abd0298177..450427644e 100644 --- a/techniques/failures/F23.html +++ b/techniques/failures/F23.html @@ -46,7 +46,7 @@

    Tests

    Expected Results

      -
    • If step #1 is not true then content fails Success Criterion 1.4.2
      • +
    • If check #1 is not true then content fails Success Criterion 1.4.2
    diff --git a/techniques/failures/F24.html b/techniques/failures/F24.html index 9b9a4d1b9b..a99be50a3a 100644 --- a/techniques/failures/F24.html +++ b/techniques/failures/F24.html @@ -90,7 +90,7 @@

    Specifying foreground color of link text with CSS

    Expected Results

    -

    If step #2 is true but step #3 is false, OR if step #3 is true but step #2 is false then this +

    If check #2 is true but step #3 is false, or if check #3 is true but step #2 is false then this failure condition applies and content fails these Success Criteria.

    \ No newline at end of file diff --git a/techniques/failures/F25.html b/techniques/failures/F25.html index f9d1ac7b92..555545977d 100644 --- a/techniques/failures/F25.html +++ b/techniques/failures/F25.html @@ -43,7 +43,7 @@

    Expected Results

      -
    • If step #1 is false, then this failure condition applies and the +
    • If check #1 is false, then this failure condition applies and the content fails this Success Criterion.
    diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html index 1e527532bc..6f2830c143 100644 --- a/techniques/failures/F3.html +++ b/techniques/failures/F3.html @@ -98,7 +98,7 @@

    Expected Results

      -
    • If step #2 and step #3 are both false, then this failure condition applies and the content fails this Success Criterion.
      • +
    • If checks #2 and #3 are both false, then this failure condition applies and the content fails this Success Criterion.

    Expected Results

      -
    • If step #1 is true then this failure condition applies and content +
    • If check #1 is true then this failure condition applies and content fails the Success Criterion.
    diff --git a/techniques/failures/F31.html b/techniques/failures/F31.html index 3fad2b7207..6437950910 100644 --- a/techniques/failures/F31.html +++ b/techniques/failures/F31.html @@ -42,7 +42,7 @@

    Expected Results

    -

    If step #2 is false then this failure condition applies and content fails +

    If check #2 is false then this failure condition applies and content fails the Success Criterion.

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F32.html b/techniques/failures/F32.html index 07fde374a0..5d0963cce6 100644 --- a/techniques/failures/F32.html +++ b/techniques/failures/F32.html @@ -74,7 +74,7 @@

    Using line break characters to format vertical text

    Expected Results

      -
    • If step #1 is true, then this failure condition applies and the +
    • If check #1 is true, then this failure condition applies and the content fails this Success Criterion.
    diff --git a/techniques/failures/F33.html b/techniques/failures/F33.html index 2d7cc05ea8..ce5ccdd64b 100644 --- a/techniques/failures/F33.html +++ b/techniques/failures/F33.html @@ -64,7 +64,7 @@

    Expected Results

      -
    • If step #2 is true, then this failure condition applies and the +
    • If check #2 is true, then this failure condition applies and the content fails these Success Criteria.
    diff --git a/techniques/failures/F34.html b/techniques/failures/F34.html index 0124c39629..99c9d327aa 100644 --- a/techniques/failures/F34.html +++ b/techniques/failures/F34.html @@ -67,7 +67,7 @@

    Expected Results

      -
    • If step #2 is true, then this failure condition applies and the +
    • If check #2 is true, then this failure condition applies and the content fails these Success Criteria.
    diff --git a/techniques/failures/F36.html b/techniques/failures/F36.html index 3b571df54c..32b12fcb6b 100644 --- a/techniques/failures/F36.html +++ b/techniques/failures/F36.html @@ -59,7 +59,7 @@

    Expected Results

      -
    • If step #3 is true, then this failure condition applies and content +
    • If check #3 is true, then this failure condition applies and content fails the Success Criterion.
    diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html index ba7a4f0f7d..3fe8f663e2 100644 --- a/techniques/failures/F37.html +++ b/techniques/failures/F37.html @@ -56,7 +56,7 @@

    Expected Results

    -

    If step #3 is false, then this failure condition applies and content +

    If check #3 is false, then this failure condition applies and content fails the Success Criterion.

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html index 83b999ee3d..be379d952f 100644 --- a/techniques/failures/F38.html +++ b/techniques/failures/F38.html @@ -22,7 +22,7 @@

    Expected Results

      -
    • If step #1 is true and if step #2 is true, this failure condition applies and content fails the Success Criterion.
      • +
    • If check #1 and #2 are true, this failure condition applies and content fails the Success Criterion.
    -

    Resources

    \ No newline at end of file +

    Resources

    diff --git a/techniques/failures/F39.html b/techniques/failures/F39.html index e6fafba61b..c7d94352ca 100644 --- a/techniques/failures/F39.html +++ b/techniques/failures/F39.html @@ -41,7 +41,7 @@

    Decorative images that have no alt attrib

    Expected Results

      -
    • If step #2 is false, this failure condition applies and the content +
    • If check #2 is false, this failure condition applies and the content fails the Success Criterion.
    diff --git a/techniques/failures/F4.html b/techniques/failures/F4.html index 5c7f925261..bd9979b812 100644 --- a/techniques/failures/F4.html +++ b/techniques/failures/F4.html @@ -38,7 +38,7 @@

    Procedure

    Expected Results

      -
    • If step #1 and step #2 are true, the content fails the success criterion.
      • +
    • If checks #1 and #2 are true, the content fails the success criterion.
    diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html index 50804d0779..10f4fa21bd 100644 --- a/techniques/failures/F44.html +++ b/techniques/failures/F44.html @@ -62,8 +62,9 @@

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F46.html b/techniques/failures/F46.html index 614c4a14ab..84515bf18b 100644 --- a/techniques/failures/F46.html +++ b/techniques/failures/F46.html @@ -18,7 +18,7 @@ scope attributes -

    Assistive technologies use the structure of an HTML or XHTML table to present data to +

    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 diff --git a/techniques/failures/F47.html b/techniques/failures/F47.html index e6f50b0be3..f65fd7e5a6 100644 --- a/techniques/failures/F47.html +++ b/techniques/failures/F47.html @@ -25,12 +25,9 @@

    - \ No newline at end of file + diff --git a/techniques/failures/F52.html b/techniques/failures/F52.html index da0007cf98..8ac67caca3 100644 --- a/techniques/failures/F52.html +++ b/techniques/failures/F52.html @@ -1,4 +1,4 @@ -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

    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: F52

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded

    Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded

    ID: F52

    Technology: failures

    Type: Failure

    When to Use

    Applies when scripting is used to open new windows.

    Description

    Some Web sites open a new window when a page is loaded, to advertise a @@ -32,7 +32,7 @@

    example commonly used to open new windows when pages are loaded

    Expected Results

      -
    • If step 2 and step 3 are true, then this failure condition applies and +
    • If check #2 and check #3 are true, then this failure condition applies and content fails the Success Criterion.
    @@ -41,4 +41,4 @@

    example commonly used to open new windows when pages are loaded

    Resources

    - \ No newline at end of file + diff --git a/techniques/failures/F58.html b/techniques/failures/F58.html index 090a84500d..3d78e73be5 100644 --- a/techniques/failures/F58.html +++ b/techniques/failures/F58.html @@ -30,8 +30,7 @@ response.setContentType("text/html"); PrintWriter out = response.getWriter(); response.setHeader("Refresh", "10; URL=TargetPage.html"); -out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" - \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); +out.println("<!DOCTYPE html>"); out.println("<html><head><title>Redirect</title></head><body>"); out.println("<p>This page will redirect you in 10 seconds.</p>"); out.println("</body></html>"); @@ -57,13 +56,7 @@ diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html index 517e362ffc..ae6d7dbd99 100644 --- a/techniques/failures/F59.html +++ b/techniques/failures/F59.html @@ -19,7 +19,7 @@ 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.

    -

    The W3C Candidate Recommendation "Accessible Rich Internet Applications (WAI-ARIA) 1.0" describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls.

    +

    Accessible Rich Internet Applications (WAI-ARIA) describes mechanisms to provide the necessary role and state information to create fully accessible user interface controls.

    Examples

    diff --git a/techniques/failures/F61.html b/techniques/failures/F61.html index 9de1b0738b..7be2de3247 100644 --- a/techniques/failures/F61.html +++ b/techniques/failures/F61.html @@ -3,7 +3,7 @@ automatic update that the user cannot disable from within the content

    ID: F61

    Technology: failures

    Type: Failure

    When to Use

    General

    Description

    -

    This document describes a failure that occurs when the content in the main viewport viewport is automatically updated, and there is no option for a user to disable this behavior.

    +

    This document describes a failure that occurs when the content in the main viewport is automatically updated, and there is no option for a user to disable this behavior.

    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.

    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.

    Examples

    @@ -38,7 +38,7 @@

    Expected Results

      -
    • If both checks 3 and 4 are true, then this failure condition applies and the content fails this Success Criterion
      • +
    • If checks #3 and #4 are true, then this failure condition applies and the content fails this Success Criterion

    Tests

    @@ -65,4 +65,4 @@

    Resources

    -
    \ No newline at end of file + diff --git a/techniques/failures/F65.html b/techniques/failures/F65.html index 4732d30257..1979795151 100644 --- a/techniques/failures/F65.html +++ b/techniques/failures/F65.html @@ -36,9 +36,6 @@

    Missing text alternative

    Resources

    Expected Results

      -
    • If step #1 is false, then this failure condition applies and the content fails this Success Criterion.
      • +
    • If check #1 is false, then this failure condition applies and the content fails this Success Criterion.
    - \ No newline at end of file + diff --git a/techniques/failures/F77.html b/techniques/failures/F77.html index d289c236b9..a40cc65e83 100644 --- a/techniques/failures/F77.html +++ b/techniques/failures/F77.html @@ -1,5 +1,10 @@ +--- +obsoleteMessage: | + This failure relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- Failure of Success Criterion 4.1.1 due to duplicate values of type ID

    Failure of Success Criterion 4.1.1 due to duplicate values of type ID

    ID: F77

    Technology: failures

    Type: Failure

    When to Use

    -

    HTML, and any XML-based markup languages including XHTML and SVG

    +

    HTML, and any XML-based markup languages including SVG

    Description

    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.

    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.

    @@ -26,15 +31,16 @@

    Expected Results

      -
    • If Step #1 is false, then this failure condition applies and the content fails the Success Criterion.
      • +
    • If check #1 is false, then this failure condition applies and the content fails the Success Criterion.

    Resources

    - \ No newline at end of file + diff --git a/techniques/failures/F80.html b/techniques/failures/F80.html index 27f90b4053..9758dedfa3 100644 --- a/techniques/failures/F80.html +++ b/techniques/failures/F80.html @@ -1,5 +1,5 @@ Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%

    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: F80

    Technology: failures

    Type: Failure

    When to Use

    -

    HTML, XHTML, and CSS

    +

    HTML and CSS

    Description

    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.

    Text-based form controls include input boxes (text and textarea) as well as buttons.

    diff --git a/techniques/failures/F81.html b/techniques/failures/F81.html index daa2a686f8..607ea7973d 100644 --- a/techniques/failures/F81.html +++ b/techniques/failures/F81.html @@ -19,7 +19,7 @@

    Expected Results

      -
    • If step #1 is false, then this failure condition applies and content fails the Success Criterion.
      • +
    • If check #1 is false, then this failure condition applies and content fails the Success Criterion.
    \ No newline at end of file diff --git a/techniques/failures/F84.html b/techniques/failures/F84.html index 227c83b3e6..5714427154 100644 --- a/techniques/failures/F84.html +++ b/techniques/failures/F84.html @@ -22,7 +22,7 @@

    Expected Results

      -
    • If step #2 is true AND #3 is false, then this failure condition applies and content fails the success criterion.
      • +
    • If check #2 is true AND #3 is false, then this failure condition applies and content fails the success criterion.
    diff --git a/techniques/failures/F87.html b/techniques/failures/F87.html new file mode 100644 index 0000000000..fd303d1d24 --- /dev/null +++ b/techniques/failures/F87.html @@ -0,0 +1,67 @@ +--- +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 +--- +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

    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: F87

    Technology: failures

    Type: Failure

    When to Use

    +

    All technologies that support CSS.

    +

    Description

    +

    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.

    +

    A common way to test this critieria is to disable CSS styles to view whether content added using pseudo-elements remains visible.

    + +

    Examples

    +
    + +

    In the following example, ::before and ::after are used to indicate speaker changes and to insert quotation marks in a screenplay.

    +

    The CSS contains:

    + +
    p.jim::before {	content: "Jim: " }
+p.mary::before { content: "Mary: " }
+q::before { content: open-quote }
+q::after  { content: close-quote }
    + +

    It is used in this excerpt:

    + +
    <p class="jim">
+  <q>Do you think he's going to make it?</q>
+</p>
+<p class="mary">
+  <q>It's not looking good.</q>
+</p>
    +
    +
    + +

    In this example, ::before is used to differentiate facts from opinions.

    +

    The CSS contains:

    + +
    p.fact::before { content: "Fact: "; font-weight: bold; }
+p.opinion::before { content: "Opinion: "; font-weight: bold; }
    + +

    It is used in this excerpt:

    + +
    <p class="fact">The defendant was at the scene of the crime when it occurred.</p>
+<p class="opinion">The defendant committed the crime.</p>
    +
    +

    Tests

    +

    Procedure

    +

    For each instance of content inserted through use of the ::before and ::after pseudo-elements and the content property:

    +
      +
    1. Check that non-decorative information presented by the generated content is available when styles are overridden.
      2. +
    +
    +

    Expected Results

    +
      +
    • If check #1 is false, then this failure condition applies and the content fails this Success Criterion.
      • +
    +
    +

    Resources

    + + + +
    + diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html index 9a7ef5330c..be0b80d375 100644 --- a/techniques/failures/F88.html +++ b/techniques/failures/F88.html @@ -35,7 +35,7 @@

    Expected Results

      -
    • If test procedure #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.
      • +
    • If check #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.

    Expected Results

      -
    • If step #3, step #4, or step #5 is true, then this failure condition applies and +
    • If check #3, step #4, or step #5 is true, then this failure condition applies and the content fails the Success Criterion.
    diff --git a/techniques/failures/F93.html b/techniques/failures/F93.html index 6781abaa1a..f229715b67 100644 --- a/techniques/failures/F93.html +++ b/techniques/failures/F93.html @@ -28,18 +28,15 @@

    An auto-playing audio track

    Expected Results

      -
    • If checks 1-5 are true, then this failure condition applies and the content fails the Success Criterion.
      • +
    • If checks #1-5 are true, then this failure condition applies and the content fails the Success Criterion.

    Resources

    diff --git a/techniques/failures/F94.html b/techniques/failures/F94.html index 3c47d95a74..f1692fab60 100644 --- a/techniques/failures/F94.html +++ b/techniques/failures/F94.html @@ -20,46 +20,42 @@

    Description

    The objective of this technique is to document the failure of text to re-scale when viewport units are used on text. As these units are relative to the viewport, it means they cannot be resized by zooming or adjusting text-size.

    There are various methods to increase and decrease the size of text and other content, but viewport units applied to text (generally via font-size 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.

    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 Success Criterion 1.4.4.

    - -

    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 Resize Text. On-page controls provided by the author are also a way of passing the resize text success criteria.

    +

    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 Resize Text. On-page controls provided by the author are also a way of passing the resize text success criteria.

    Examples

    Failure example 1

    The following CSS and HTML snippet uses VW units to size the text.

    - 
    /* CSS */
+
    /* CSS */
 .callout {
   font-size:1vw;
 }
 
 <p class="callout">Text that scales by viewport units</p>
    
-  
    Example page with an example of text sized in vh units.
    
+				
    Example page with an example of text sized in vh units.

    Tests

    Procedure

    -

    In a desktop browser with a resizable window:

      -
    1. Set zoom level to 100%.
      2. -
    2. Set window size to 1280 pixels wide.
    3. Visit the page to be tested.
    4. Use any of the following methods to resize text when available:
        -
      • the zoom feature of the browser
        • +
      • the zoom feature of the browser,
      • the text-sizing feature of the browser,
      • on-page controls for resizing text.
      5. -
    5. Check that the text resizes by one of the methods above, and can be resized to at least 200% of the default.
      6. +
    6. Check that the text resizes by one of the methods above, and can be resized up to 200% of the default.

    Expected Results

      -
    • If step #5 is false, then this failure condition applies and the content fails Success Criteria 1.4.4, Resize Text.
      • +
    • If the last step is false, then this failure condition applies and the content fails Success Criterion 1.4.4 Resize Text.
    diff --git a/techniques/failures/F97.html b/techniques/failures/F97.html index fbe266cbab..a4509cc518 100644 --- a/techniques/failures/F97.html +++ b/techniques/failures/F97.html @@ -14,7 +14,7 @@

    Metadata

    When to Use

    -

    All technologies that allow the viewing of content to be restricted to one orientation.

    +

    All technologies that allow the viewing of content to be restricted to one orientation.

    Description

    @@ -36,7 +36,7 @@

    Procedure

  • Open the content in landscape view. Check that the content is oriented for this view.
  • Open the content in portrait view. Check that the content is oriented for this view.
  • Check if portrait or landscape view is essential for the viewing and operation of the content.
    • -
  • 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.
    • +
  • 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.
    • diff --git a/techniques/failures/F99.html b/techniques/failures/F99.html index e717924ee3..6cc68da54e 100644 --- a/techniques/failures/F99.html +++ b/techniques/failures/F99.html @@ -55,7 +55,7 @@

    Procedure

    Expected Results

    -

    If step #4 is false then this failure condition applies and the content fails the Success Criterion.

    +

    If check #4 is false then this failure condition applies and the content fails the Success Criterion.

    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 @@ +Setting the name property for a non-text object

    Setting the name property for a non-text object

    ID: FLASH1

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.

    +

    When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name 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.

    +

    Examples

    +
    +

    Applying a textual alternative for a symbol (graphic, button or movieclip)

    + +

    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.

    +
      +
    1. For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: 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.
      2. +
    2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.
      3. +
    3. Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable.
      4. +
    4. Enter a meaningful text alternative in the 'name' field, properly describing the purpose of the symbol.
      5. +
    +
    + + +
    The Accessibility panel in the Flash authoring environment.
    + +
    + +
    +
    +

    Applying textual alternatives programmatically in ActionScript 2.0

    + +

    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.

    + + 
    // 'print_btn' is an instance placed on the movie's main timeline
+_root.print_btn._accProps = new Object();
+_root.print_btn._accProps.name = "Print";
    +
    +
    +

    Applying textual alternatives programmatically in ActionScript 3.0

    + +

    To manage an object's text equivalents programmatically using ActionScript 3, the AccessibilityProperties object and name property must be used. The code example below shows a simple example of how the name property is used to set an objects name in ActionScript.

    + + 
    // 'print_btn' is an instance placed on the movie's main timeline
+print_btn.accessibilityProperties = new AccessibilityProperties();
+print_btn.accessibilityProperties.name = "Print";
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Publish the SWF file
      2. +
    2. 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)
      3. +
    3. 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.
      4. +
    4. 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.
      5. +
    5. 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.
      6. +
    6. All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object
      7. +
    +
    +

    Expected Results

    +

    Check #6 is true.

    +
    +
    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 @@ +Indicating required form controls in Flash

    Indicating required form controls in Flash

    ID: FLASH10

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Adding the word "required" to the control's accessible name

    + +

    This example shows how to use the Accessibility panel to indicate a field as being 'required' to users:

    +
      +
    1. Visually, place asterisk character or some other indication adjacent to the form control's label.
      2. +
    2. Use the Accessibility panel to combine the word "required" with the control's label in the "Name" field.
      3. +
    +

    This approach is illustrated in the screenshot below:

    +
    + + +
    Using the Accessibility panel to indicate a form control as being required
    + +
    +

    This is demonstrated in the working example of Adding the word "required" to the control's accessible name. The source of Adding the word "required" to the control's accessible name is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For each required form control within a Flash movie, confirm that:

    +
      +
    • The required state is indicated visually
      • +
    • The required state is indicated textually using the 'Name' field in the Accessibility panel
      • +
    +
    +

    Expected Results

    +
      +
    • Each of the above is true
      • +
    +
    +
    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 @@ +Providing a longer text description of an object

    Providing a longer text description of an object

    ID: FLASH11

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Making a hidden description visible on request

    + +

    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:

    +
      +
    • The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.
      • +
    • The original image and button are temporarily hidden from assistive technology and the tab order.
      • +
    +

    The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org +

    +

    The results for this technique are shown in the working version of Making a hidden description visible on request. The source of Making a hidden description visible on request is available.

    + + 
    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();
+}
+
    +
    +

    Tests

    +

    Procedure

    +

    When a Flash movie contains images that require long descriptions, confirm that a longer description is made available through a separate button.

    +
    +

    Expected Results

    +
      +
    • The above is true
      • +
    +
    +
    \ 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 @@ +Providing client-side validation and adding error text via the accessible description

    Providing client-side validation and adding error text via the accessible description

    ID: FLASH12

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    + +

    Examples

    +
    +

    Validating a text field

    + +

    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 _accProps object is created for the textfield, and its description property is set the error message.

    +
    +

    Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.

    +
    +

    ActionScript 2.0 Code

    + + 
    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 > 0) {
+    //loop over encountered errors
+    for (var i = 0; i < 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 = "";
+}
    + +

    This approach is demonstrated in working version of Validating a text field. The source of Validating a text field is available.

    + + +
    +

    Tests

    +

    Procedure

    +

    When a Flash movie provides interactive forms that can be submitted, confirm that:

    +
      +
    1. The validation warnings are placed next to the control visually.
      2. +
    2. The validation warnings are added to the accessible name or description of each control.
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    \ 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 @@ +Using HTML language attributes to specify language in Flash content

    Using HTML language attributes to specify language in Flash content

    ID: FLASH13

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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 H57: Using language attributes on the html element.

    +

    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 within a single Flash object using this technique.

    +

    Examples

    +
    +

    Using the language of the page as whole in the embedded Flash

    + +

    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.

    + + 
    <?xml version="1.0" encoding="UTF-8"?>
+<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta content="text/html; charset=iso-8859-1"
+      http-equiv="Content-Type"/>
+    <title>Flash Languages Examples - French</title>
+    <script src="swfobject.js" type="text/javascript"/>
+    <script type="text/javascript">
+    swfobject.registerObject("myMovie", "9.0.115", "expressInstall.swf");
+</script>
+  </head>
+  <body>
+    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+      height="420" id="myMovie" width="780">
+      <param name="movie" value="myMovie.swf"/>
+      <!--[if !IE]>-->
+      <object data="languages.swf" height="420"
+        type="application/x-shockwave-flash" width="780">
+        <!--<![endif]-->
+        <!--[if !IE]>-->
+      </object>
+      <!--<![endif]-->
+    </object>
+  </body>
+</html>
+
    + +

    This is demonstrated in the working example of Using the language of the page as whole in the embedded Flash. The source of Using the language of the page as whole in the embedded Flash is available.

    + +
    +
    +

    Applying a language just to the embedded Flash

    + +

    This example defines the content of a Flash movie to be in the French language. The Flash movie is embedded using SWFObject's static publishing method. 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.

    + + 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+  height="420" id="myMovie" lang="fr" width="780" xml:lang="fr">
+  <param name="movie" value="myMovie.swf"/>
+  <!--[if !IE]>-->
+  <object data="languages.swf" height="420" lang="fr"
+    type="application/x-shockwave-flash" width="780" xml:lang="fr">
+    <!--<![endif]-->
+    <!--[if !IE]>-->
+  </object>
+  <!--<![endif]-->
+</object>
+
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Examine the html element and the object element of the HTML document containing the reference to the SWF.
      2. +
    2. 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
      3. +
    3. 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.
      4. +
    4. Check that no changes in human language occur within the Flash content
      5. +
    +
    +

    Expected Results

    +
      +
    • For Success Criterion 3.1.1: Checks 1-3 are all true.
      • +
    • For Success Criterion 3.1.2: Checks 1-4 are all true.
      • +
    +
    +

    Resources

    + + + +
    \ 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 @@ +Using redundant keyboard and mouse event handlers in Flash

    Using redundant keyboard and mouse event handlers in Flash

    ID: FLASH14

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Updating button text with multiple event handlers

    + +

    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.

    + + 
    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");
+}
    + +
    +

    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.

    +
    +

    This technique is illustrated in the working version of Updating button text with multiple event handlers. The source of Updating button text with multiple event handlers is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For all scripted event handlers in a Flash Movie,

    +
      +
    1. Confirm that event handlers are assigned for both mouse and keyboard events
      2. +
    +
    +

    Expected Results

    +
      +
    • The above is true
      • +
    +
    +
    \ 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 @@ +Using the tabIndex property to specify a logical reading order and a logical tab order in Flash

    Using the tabIndex property to specify a logical reading order and a logical tab order in Flash

    ID: FLASH15

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    The objective of this technique is to control the Flash Movie's reading order and tab order by assigning tabIndex values to its elements.

    +

    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.

    +

    Flash Player uses a default tab index order from left to right and top to bottom.

    +

    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.

    +

    You can create a custom tab-order index in the Accessibility panel for keyboard navigation for the following objects:

    +
      +
    • Dynamic text
      • +
    • Input text
      • +
    • Buttons
      • +
    • Movie clips, including compiled movie clips
      • +
    • Components
      • +
    • Screens
      • +
    +

    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.

    +

    To add a tabIndex value using the Accessibility panel, perform the following steps for every accessible object on the stage:

    +
      +
    1. Select the element by clicking on it.
      2. +
    2. 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.
      3. +
    3. To visualize the currently defined tab order, select View > Show Tab Order. Tab index numbers for individual objects appear in the upper-left corner of the object.
      4. +
    +
    +

    You can also use ActionScript code to create a tab-order index for keyboard navigation.

    +
    +

    These steps are illustrated in the screenshots below

    +
    + + +
    visualizing the tab order
    + +
    +
    + + +
    Setting a tab index value in the Accessibility panel
    + +
    +
    +

    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.

    +
    +

    Examples

    +
    +

    Using tabIndex to navigate a column structure

    + +

    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.

    +

    The results can be found in the working version of Using tabindex to navigate a column structure. The source of Using tabindex to navigate a column structure is available.

    + +
    +
    +

    Controlling tab order in a two-column layout

    + +

    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.

    +

    The results are shown in the working version of Controlling tab order in a two-column layout. The source of Controlling tab order in a two-column layout is available.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Use a screen reader to navigate through the Flash movie, one element at a time.
      2. +
    2. Check that the order in which the screen reader announces the content, matches the logical visual order.
      3. +
    3. When focus has been placed inside the Flash movie, press the Tab key repeatedly to traverse its contents by keyboard.
      4. +
    4. Verify that all interactive and focusable elements are reachable by keyboard, in a logical order.
      5. +
    +
    +

    Expected Results

    +
      +
    • Checks #2 and #4 are true.
      • +
    +
    +

    Resources

    + + + +
    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 @@ +Making actions keyboard accessible by using the click event on standard components

    Making actions keyboard accessible by using the click event on standard components

    ID: FLASH16

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Click event on a button

    + +

    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

    + + 
    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";
+}
    + +

    This approach is demonstrated in the working version of click event on a button. The source of click event on a button is available.

    + +
    +
    +

    Pending example

    + + + The wiki source for FLASH16 indicated there was an action to add a second example. + + +
    +

    Tests

    +

    Procedure

    +

    When a Flash Movie contains interactive controls, confirm that:

    +
      +
    1. Standard Flash components are used for the controls
      2. +
    2. The controls use the "click" event
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    \ 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 @@ +Providing keyboard access to a Flash object and avoiding a keyboard trap

    Providing keyboard access to a Flash object and avoiding a keyboard trap

    ID: FLASH17

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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:

    +
      +
    • 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).
      • +
    • The Flash content object itself is added to the document tab order as well, making it possible to tab into the content.
      • +
    • 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).
      • +
    +

    When the SWFFocus class is imported into a Flash project, the following will happen:

    +
      +
    • +

      A JavaScript <script> tag will be generated and added to the HTML document containing the Flash content. This JavaScript code will:

      +
        +
      • Set a tabIndex value of "0" on the <object> element of each Flash content found in the page. This causes the Flash objects to become part of the tab order.
        • +
      • 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.
        • +
      • 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.
        • +
      +
      • +
    • 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.
      • +
    +

    As indicated above, there are two ways in which this technique can be used:

    +
      +
    1. +

      Letting the SWFFocus class generate neighboring focusable elements in the HTML tab order for each Flash content (demonstrated in example 1 below)

      +

      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:

      +
      2. +
    2. +

      Explicitly identifying focusable HTML elements that come before and after the a Flash content in the HTML tab order (demonstrated in example 2 below)

      +

      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 <object> 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.

      +
      3. +
    +

    Examples

    +

    The two examples below are shown in the working example of Preventing a keyboard trap in Flash content. 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 source of Preventing a keyboard trap in Flash content is available. The source zip file contains the SWFFocus class.

    +
    +

    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.

    +
    +
    +

    Using automatically generated links

    + +

    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.

    +

    Loading the Flash Content

    +

    The Flash object in this example is added using SWFObject's dynamic publishing method, 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.

    +

    The sample code below shows how to load the content dynamically with SWFObject.

    +

    HTML and Javascript Code Sample for Example 1

    + + 
    <?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Keyboard Trap Fix Example</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <script src="swfobject_2_1.js" type="text/javascript"/>
+    <script type="text/javascript">
+      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);
+</script>
+  </head>
+  <body>
+    <p>The following Flash content automatically generates invisible
+      links before and after the flash content, allowing keyboard focus
+      to move out of the Flash content.</p>
+    <div id="flashSample1">
+      <a href="http://www.adobe.com/go/getflashplayer">
+        <img alt="Get Adobe Flash player"
+          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
+        />
+      </a>
+    </div>
+  </body>
+</html>
    + +

    Importing and Initializing the SWFFocus class in Flash

    +

    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.

    +

    When the SWFFocus class is added to the content's source path, it needs to be initialized with the following code:

    + + 
    import com.adobe.swffocus.SWFFocus;
+SWFFocus.init(stage);
    + +

    The code for the class itself can be found in the source files.

    + +
    +
    +

    Explicitly identifying existing focusable html element

    + +

    For a large part, this technique is the same as example 1 :

    +
      +
    • The dynamic loading approach by SWFObject is used to load the Flash content
      • +
    • The SWFFocus class needs to be added to the content's sourcepath and initialized in the Flash content
      • +
    +

    For more details about these steps, see example 1.

    +

    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:

    +
      +
    • 'swfPref-<previous ID>', where '<previous element>' should be the ID value of the previous element in the tab order.
      • +
    • 'swfNext-<next ID>', where '<next element>' should be the ID value of the next element in the tab order.
      • +
    +

    For example, the HTML code could look like this (notice the added class names on the object tag):

    + + 
    <a href="http://www.lipsum.com/" id="focus1">test 1</a>
+<object class="swfPrev-focus1 swfNext-focus2"
+  data="keyboard_trap_fix_as3.swf" tabindex="0"
+  type="application/x-shockwave-flash"/>
+<a href="http://www.lipsum.com/" id="focus2">test 2</a>
    + +

    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.

    +

    HTML and Javascript Code Sample for Example 2

    + + 
    <?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Keyboard Trap Fix Example </title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
+    <script src="swfobject_2_1.js" type="text/javascript"/>
+
+    <script type="text/javascript">
+      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);
+    </script>
+  </head>
+  <body>
+    <a href="http://www.lipsum.com/" id="focus1">lorem</a>
+    <p>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.</p>
+    <div id="flashSample2">
+      <a href="http://www.adobe.com/go/getflashplayer">
+        <img alt="Get Adobe Flash player"
+          src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
+        />
+      </a>
+    </div>
+    <a href="http://www.lipsum.com/">lorem</a>
+  </body>
+</html>
    + +

    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:

    + + 
    var o = document.getElementById("FlashSample1SWF");
+o.SWFsetFocusIds('prevId', 'nextId');
    + +

    From that point on the updated IDs will be used to move focus to when tabbing out of the Flash content.

    + +
    +

    Tests

    +

    Procedure

    +

    For a Flash content on a web page:

    +
      +
    1. If possible, confirm that the source of the Flash content imports and initializes the SWFFocus class
      2. +
    2. Press the tab key to move through tabbable items on the page
      3. +
    3. Confirm that it is possible to tab into the Flash content
      4. +
    4. Continue tabbing and confirm that it is possible to tab out of the flash content
      5. +
    +
    +

    Expected Results

    +
      +
    • Checks 3 and 4 are true
      • +
    +
    +

    Resources

    + + + +
    \ 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 @@ +Providing a control to turn off sounds that play automatically in Flash

    Providing a control to turn off sounds that play automatically in Flash

    ID: FLASH18

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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).

    +

    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.

    +

    Examples

    +
    +

    Providing a button in the Flash to stop sound

    + +

    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.

    + + 
    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";
+      }
+    }
+  }
+}
    + +

    This is demonstrated in the working example of Providing a button in the Flash to stop sound. The source of Providing a button in the Flash to stop sound is available.

    + +
    +
    +

    Providing a button in the HTML before the Flash object to stop sound

    + +

    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.

    +

    ActionScript 3.0 code for Example 2

    + + 
    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
+      }
+    }
+  }
+}
    + +

    HTML code for Example 2

    + + 
    <?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
+    <title>Flash Sound Toggle example</title>
+    <script src="swfobject.js" type="text/javascript"/>
+    <script type="text/javascript">
+    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;
+</script>
+
+  </head>
+  <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 id="soundToggle" type="button" value="Stop Sound"/>
+    <p id="flashPlaceHolder">Flash needs to be installed for this
+      example to work</p>
+  </body>
+</html>
+
    + +

    This is demonstrated in the working example of Providing a button in the HTML before the Flash object to stop sound. The source of source of Providing a button in the HTML before the Flash object to stop sound is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For Flash movies that automatically start playing sound after loading:

    +
      +
    1. Confirm that an HTML control that conforms to WCAG 2.0 is placed at the beginning of the document's tab order
      2. +
    2. If there is no HTML-based control, confirm that an accessible control is placed at the beginning of the Flash movie's tab order.
      3. +
    3. Activate the HTML or Flash-based control
      4. +
    4. Verify that audio playback stops
      5. +
    +
    +

    Expected Results

    +
      +
    • Check #1 or #2 is true, and #4 is true.
      • +
    +
    +
    \ 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 @@ +Providing a script that warns the user a time limit is about to expire and provides a way to extend it

    Providing a script that warns the user a time limit is about to expire and provides a way to extend it

    ID: FLASH19

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    Examples

    +
    +

    Using ActionScript to offer a time limit extension before the timeout expires

    + +

    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.

    + + 
    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 && e.detail && e.detail == Alert.YES)
+  resetTimeout();
+}
    + +

    For a demonstration, see a working example of Using ActionScript to offer a time limit extension before the timeout expires. The source of Using ActionScript to offer a time limit extension before the timeout expires is available.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. load the page and start a timer that is 20 seconds less than the time limit.
      2. +
    2. 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.
      3. +
    +
    +

    Expected Results

    +

    Check #2 is true

    +
    +
    \ 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 @@ +Setting the description property for a non-text object in Flash

    Setting the description property for a non-text object in Flash

    ID: FLASH2

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    The Flash Player supports long text alternatives to non-text objects, which can be defined in ActionScript or within Flash authoring tools using the description property, as indicated in the examples below.

    +

    Examples

    +
    +

    Applying a Description for a symbol (graphic, button or movieclip)

    + +

    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.

    +
      +
    1. For a text alternative to be applied to a non-text object, it must be saved as a symbol in the movie's library. Note: 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.
      2. +
    2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11. Ensure that the 'Make object accessible' checkbox is checked.
      3. +
    3. Select the non-text instance on the movie stage, the fields in the Accessibility panel become editable.
      4. +
    4. 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.
      5. +
    +

    + Important: Only use the 'Description' field if a short text alternative is not sufficient to describe the objects purpose. Otherwise, leave the 'Description' field empty.

    +
    + + +
    The Accessibility panel in the Flash authoring environment.
    + +
    + + +
    +
    +

    Applying Description programmatically in ActionScript 2.0

    + +

    To manage an object's text equivalents programmatically using ActionScript, 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 and description in ActionScript.

    +

    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.

    + + 
    // '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.";
    +
    +
    +

    Applying Description programmatically in ActionScript 3.0

    + +

    To manage an object's text equivalents programmatically using ActionScript, the AccessibilityProperties object must be used. The code example below shows a simple example of how the AccessibilityProperties object used to set an objects name and description in ActionScript.

    +

    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.

    + + 
    // '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.";
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Publish the SWF file
      2. +
    2. 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)
      3. +
    3. Use a tool which is capable of showing an object's long description, such as ACTF aDesigner 1.0 to open the Flash movie.
      4. +
    4. 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.
      5. +
    5. 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.
      6. +
    6. All non-text objects have text equivalents that can serve the same purpose and convey the same information as the non-text object.
      7. +
    +
    +

    Expected Results

    +

    #6 is true.

    +
    +

    Resources

    + + + +
    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 @@ +Reskinning Flash components to provide highly visible focus indication

    Reskinning Flash components to provide highly visible focus indication

    ID: FLASH20

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    This technique can be applied through the following steps:

    +
      +
    1. Create a customized version of focusRectSkin.
      2. +
    2. Use scripting to associate the component with the customized skin.
      3. +
    +

    There are two ways to customize a skin:

    + +
      +
    1. +

      Duplicating Existing Skin

      +

      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).

      +
        +
      1. 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.
        2. +
      2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.
        3. +
      3. Right-click (or Ctrl-click on a Mac) on the focusRectSkin MovieClip, and choose "Duplicate" from the context menu.
        4. +
      4. 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).
        5. +
      5. Using ActionScript, associate form component instances with your customized version of focusRectSkin. This can be achieved using the setStyle method.
        6. +
      +
      + + +
      Editing a duplicate of focusRectSkin
      + +
      +
      2. +
    2. +

      Modifying Existing Skin

      +

      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.

      +
        +
      1. 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.
        2. +
      2. Open the Library panel, and navigate to the "Component Assets > Shared" folder.
        3. +
      3. Open the focusRectSkin MovieClip for editing by double clicking on it.
        4. +
      4. Edit the visual border in the skin's MovieClip. For example, the focus rectangle can be made thicker to stand out more.
        5. +
      +
      +

      With this approach you will override the existing skin. If you don't want this, follow the "Duplicate Existing Skin" approach instead.

      +
      +
      3. +
    +

    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.

    +

    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.

    +

    Examples

    +
    +

    A thick blue border to indicate focus

    + +

    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.

    +

    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:

    +
      +
    1. A duplicate version of the TextInput "normal" skin (which can be found in the library at "Component Asssets > TextInputSkins > TextInput_upSkin") is created and edited to show a yellow background.
      2. +
    2. 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.
      3. +
    +

    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.

    +

    The result of this technique can be found in the working version of A thick blue border to indicate focus.

    +

    Code for Example 1 (ActionScript 3.0)

    + + 
    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");
+    }
+  }
+}
    + +

    This is demonstrated in working version of A thick blue border to indicate focus. The source of working version of A thick blue border to indicate focus is available.

    + +
    +

    Tests

    +

    Procedure

    +

    When a Flash movie contains focusable components, confirm that:

    +
      +
    1. The visual highlight is applied by modifying the component's skins
      2. +
    2. A visual highlight is shown when the components receive focus
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +

    Resources

    + + + +
    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 @@ +Using the DataGrid component to associate column headers with cells

    Using the DataGrid component to associate column headers with cells

    ID: FLASH21

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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".

    +
    +

    The DataGrid component in Flash only supports column headings, not row headings.

    +
    +
    + + + +
    screenshot of highlighted row in grid component
    + +
    +

    Examples

    +
    +

    A statistical data table

    + +

    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.

    + + 
    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);
+};
    + +

    This is demonstrated in the working version of A statistical data table. The source of A statistical data table is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For Flash content that contains tabular data:

    +
      +
    1. 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)
      2. +
    2. Use a tool which is capable of showing an object's accessibility name, such as ACTF aDesigner 1.0 to open the Flash movie.
      3. +
    3. 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.
      4. +
    4. 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.
      5. +
    5. 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.
      6. +
    +
    +

    Expected Results

    +
      +
    • Check 3, 4, or 5 is true
      • +
    +
    +
    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 @@ +Adding keyboard-accessible actions to static elements

    Adding keyboard-accessible actions to static elements

    ID: FLASH22

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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 + tabEnabled property, and it ensures that the action can be triggered + from the keyboard by providing a keydown handler in addition to a click + handler.

    +

    Examples

    +
    +

    MovieClip used as a button

    + +

    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 AccessibilityProperties object. This makes the + button's label perceivable by assistive technology.

    +

    This result can be viewed in the working + version of MovieClip used as a button. The source of MovieClip used as a button is available.

    +
    +

    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".

    +
    + + 
    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();
+}
    +
    +

    Tests

    +

    Procedure

    +

    When a Flash Movie contains generic MovieClip instances that are used + as interactive controls, confirm that:

    +
      +
    1. The MovieClip instance has its tabEnabled property set to true
      2. +
    2. The MovieClip instance has event handlers for both mouse and keyboard events
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    \ 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 @@ +Adding summary information to a DataGrid

    Adding summary information to a DataGrid

    ID: FLASH23

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    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.

    +

    Examples

    +
    +

    Adding a summary to a DataGrid in the Accessibility control panel

    + +

    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.

    +
      +
    1. Create a new Flash file (.fla) or open an existing one to put + a DataGrid into.
      2. +
    2. Open the Flash components panel from the Window menu
      3. +
    3. Drag a DataGrid component onto the stage and position as desired.
      4. +
    4. Select the DataGrid component and add the summary information + to the description field for DataGrid, using the Accessibility control + panel.
      5. +
    + +
    +
    +

    Adding a summary to a DataGrid with ActionScript 3

    + +

    This is a basic AS3 example of a DataGrid component that has summary + text added as its accessible description.

    + + 
    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;
+};
    + +

    For a demonstration, see the working version of Adding a summary to a DataGrid with ActionScript 3. The source of Adding a summary to a DataGrid with ActionScript 3 is available.

    + +
    +

    Tests

    +

    Procedure

    +

    If the Flash movie contains a DataGrid component, confirm that summary + text has been added to it through the corresponding accessible description + property.

    +
    +

    Expected Results

    +

    The above is true.

    +
    +
    \ 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 @@ +Allowing the user to extend the default time limit

    Allowing the user to extend the default time limit

    ID: FLASH24

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Changing timeout with a dropdown list

    + +

    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.

    + + 
    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");
+}
    + +

    For a demonstration, see the working + version of Changing timeout with a dropdown list. The source of Changing timeout with a dropdown list 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 Success + Criterion 2.2.1 (Timing Adjustable) .

    + + +
    +

    Tests

    +

    Procedure

    +

    For Flash content that include a time limit:

    +
      +
    1. 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.
      2. +
    2. 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.
      3. +
    +
    +

    Expected Results

    +

    The above is true

    +
    +
    \ 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 @@ +Labeling a form control by setting its accessible name

    Labeling a form control by setting its accessible name

    ID: FLASH25

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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 label 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).

    + +

    ActionScript 2

    +

    In ActionScript 2 the accessible name needs to be set on a component's + _accProps 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 _accProps property. The object itself can have + several accessibility related properties, one of them being _accProps.name, + which specifies the accessible name. When an _accProps 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 System.capabilities.hasAccessibility + flag. this will prevent an error on environments that do not support + MSAA.

    +

    ActionScript 2 provides the following accessible components:

    +
      +
    • SimpleButton
      • +
    • CheckBox
      • +
    • RadioButton
      • +
    • Label
      • +
    • TextInput
      • +
    • TextArea
      • +
    • ComboBox
      • +
    • ListBox
      • +
    • Window
      • +
    • Alert
      • +
    • DataGrid
      • +
    + +

    ActionScript 3

    +

    In ActionScript 3 the accessible name needs to be set on a component's + accessibilityProperties property. This property must be an instance + of flash.accessibility.AccessibilityProperties. If the property has + not been set yet, the developer needs to create the a new AccessibilityProperties + instance and assign it to the accessibilityProperties property. The + object itself can have several accessibility related properties, one + of them being accessibilityProperties.name which specifies the accessible + name. When an accessibilityProperties property 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 flash.system.capabilities.hasAccessibility + flag. this will prevent an error on environments that do not support + MSAA.

    +

    ActionScript 3 provides the following accessible components.

    +
      +
    • Button
      • +
    • CheckBox
      • +
    • ComboBox
      • +
    • List
      • +
    • RadioButton
      • +
    • TileList
      • +
    +

    Examples

    +
    +

    Setting a component's accessible name using the Accessibility panel

    + +

    To add and label a component control, follow these steps:

    +
      +
    1. From the 'Components' panel, drag the component on to the stage, + or use scripting to create a new instance.
      2. +
    2. With the newly created component instance selected, enter its + label text in the Accessibility Panel's Name field.
      3. +
    + +
    +
    +

    Setting the accessible name through ActionScript 2.0

    + +

    The code example below shows how a ListBox component is created and assigned an accessible name.

    + + 
    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();
+}
    + +

    This result can be viewed in the working version of Setting the accessible name through ActionScript 2.0. The source of Setting the accessible name through ActionScript 2.0 is available.

    + +
    +
    +

    Setting the accessible name through ActionScript 3.0

    + +

    The code example below shows how a ListBox component is created and assigned an accessible name.

    + + 
    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);
    + +

    This result can be viewed in the working version of Setting the accessible name through ActionScript 3.0. The source of Setting the accessible name through ActionScript 3.0 is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For Flash movies that contain form components, confirm that either:

    +
      +
    1. The selected component's label text is specified in the Accessibility + Panel's "name" field.
      2. +
    2. In ActionScript 2.0: Scripting is used to dynamically set the + component's _accProps.name property
      3. +
    3. In ActionScript 3.0: Scripting is used to dynamically set the + component's accessibilityProperties.name property
      4. +
    +
    +

    Expected Results

    +

    One of the above is true

    +
    +
    \ 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 @@ +Applying audio descriptions to Flash video

    Applying audio descriptions to Flash video

    ID: FLASH26

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Flash CS3 and higher
      • +
    • ActionScript 3.0 and higher
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Playing descriptions when cue points are reached

    + +

    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.

    +

    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.

    + + 
    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;
+      }
+    }
+  }
+}
    + +

    The result can be viewed in the working version of Playing descriptions when cue points are reached. The source of Playing descriptions when cue points are reached is available.

    + +
    +
    +

    Providing an additional audio track for descriptions

    + +

    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.

    + +
    +

    Tests

    +

    Procedure

    +

    When Flash content contains video with an audio soundtrack, + confirm that:

    +
      +
    1. Audio descriptions have been made available using separate + sound files.
      2. +
    2. A button is provided that allows users to enable or disable + the audio descriptions
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    \ 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 @@ +Providing button labels that describe the purpose of a button

    Providing button labels that describe the purpose of a button

    ID: FLASH27

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    Examples

    +
    +

    Using the label property to describe the button's purpose

    + 
    import fl.controls.Button;
+import fl.accessibility.ButtonAccImpl;
+
+ButtonAccImpl.enableAccessibility();
+
+var myButton:Button = new Button();
+myButton.label = "View Items in Cart";
+
    +
    +
    +

    Using scripting to set the accessible name for an image button using Actionscript 3.0

    + +

    In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.

    + + 
    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();
+}
    +
    +

    Tests

    +

    Procedure

    +

    For each button in the Flash movie that uses this technique:

    +
      +
    1. Check that the button's label text correctly describes + the button's purpose
      2. +
    2. If a button does not have a text label, confirm that descriptive + text has been added as the button's accessible name.
      3. +
    3. 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.
      4. +
    +
    +

    Expected Results

    +
      +
    • Checks #1, #2, and #3 are true.
      • +
    +
    +
    \ 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 @@ +Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash

    Providing text alternatives for ASCII art, emoticons, and leetspeak in Flash

    ID: FLASH28

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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 forceSimple property for the + MovieClip is set to true also. This will hide the actual ASCII + characters from assistive technology.

    +

    Examples

    +
    +

    Providing a text alternative for ASCII art in the Accessibility control panel

    + +

    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:

    +
      +
    1. Place the ASCII characters in a MovieClip instance
      2. +
    2. +

      Select the MovieClip instance containing the text, and + make the following changes in the Accessibility panel:

      +
        +
      • Add a meaningful text alternative for the ASCII art, + without leetspeak (such as "WCAG 2 RULEZ").
        • +
      • Uncheck the "Make child objects accessible" checkbox, + so that the ASCII characters will not be read by screen + readers
        • +
      +
      3. +
    +

    These steps are ilustrated in the screenshot below:

    +
    + + +
    Adding text alternative for ASCII art using the Accessibility panel
    + +
    + +
    +
    +

    Providing a text alternative for ASCII art using ActionScript

    + +

    This example is the same as example 1, except using ActionScript + instead of the Accessibility control panel in the Flash Professional + authoring tool.

    +
      +
    1. Place the ASCII characters in a MovieClip instance
      2. +
    2. Provide an instance name for the MovieClip instance (e.g. myASCII)
      3. +
    3. Set the accessible name for the MovieClip and set the + forceSimple property to true to hide the text inside the + MovieClip.
      4. +
    + + 
    // '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;
+
    + +

    This technique is demonstrated in the working version of Providing a text alternative for ASCII art using ActionScript. The source of Providing a text alternative for ASCII art using ActionScript is available.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Publish the SWF file
      2. +
    2. Use a tool which is capable of showing an object's name + to open the Flash movie.
      3. +
    3. Locate the ASCII grouping, leet speak, or emoticon and + verify in the tool that the accessibility name represents + the same information.
      4. +
    4. 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.
      5. +
    +
    +

    Expected Results

    +
      +
    • #3 or #4 above is true
      • +
    +
    +
    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 @@ +Setting the label property for form components

    Setting the label property for form components

    ID: FLASH29

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    The objective of this technique is to explicitly associate a form + component with its label text by setting the component's label property. + Setting this property will visually place a label next to the component, + and exposes the label text to assistive technology.

    +

    Components that support the label property are:

    + +

    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:

    +
      +
    • + +
      • +
    • + +
      • +
    +

    Examples

    +

    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:

    +

    When the Button component is used:

    +

    + import fl.accessibility.ButtonAccImpl; +ButtonAccImpl.enableAccessibility(); +

    +

    When the RadioButton component is used:

    +

    + import fl.accessibility.RadioButtonAccImpl; +RadioButtonAccImpl.enableAccessibility(); +

    +

    When the CheckBox component is used:

    +

    + import fl.accessibility.CheckBoxAccImpl; +CheckBoxAccImpl.enableAccessibility(); +

    +
    +

    Setting the label using the Component Inspector panel

    + +
      +
    1. Add the Button, CheckBox or RadioButton component to the movie + by dragging it on the stage from the 'Components' panel.
      2. +
    2. With the component selected, open the 'Component Inspector' panel + by selecting it in the 'Window' menu or using the Shift + F7 shortcut.
      3. +
    3. In the Component Inspector, under the 'Parameters' tab, enter + the label text for the 'label' parameter.
      4. +
    +

    The screenshot below illustrates this technique.

    +
    + + +
    Setting a component's label in the Component Inspector Panel
    + +
    + +
    +
    +

    Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0

    + 
    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);
    + +

    This technique is demonstrated in the working example of Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0. The source of Setting the label on a Button, CheckBox and RadioButton component using ActionScript 3.0 is available.

    + +
    +

    Tests

    +

    Procedure

    +

    When the Button, CheckBox or RadioButton components are used:

    +
      +
    1. confirm that labels describing the purpose of the button have + been provided through the component's label property.
      2. +
    +
    +

    Expected Results

    +
      +
    1. #1 is true
      2. +
    +
    +
    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 @@ +Marking objects in Flash so that they can be ignored by AT

    Marking objects in Flash so that they can be ignored by AT

    ID: FLASH3

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.

    +

    The Flash Player supports the ability for authors to control which graphics appear to assistive technologies using the silent property of the accessibility object, as indicated in the examples below.

    +

    Examples

    +
    +

    Hiding a graphic in the Flash Professional authoring tool

    + +

    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.

    +
      +
    1. To apply changes to accessibility properties for a graphic, it must be saved as a symbol in the movie's library. Note: 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.
      2. +
    2. Bring up the Accessibility panel by selecting "Window > Other Panels > Accessibility" in the application menu, or through the shortcut ALT + F11.
      3. +
    3. Select the graphic object
      4. +
    4. 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.
      5. +
    + +
    +
    +

    Applying textual alternatives programmatically in ActionScript 2.0

    + +

    To manage an object's text equivalents programmatically using ActionScript, the _accProps 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 _accProps property is used to remove an object from the accessibility information for the movie using ActionScript.

    + + 
    // 'decorative_mc' is an instance placed on the movie's main timeline
+_root.decorative_mc._accProps = new Object();
+_root.decorative_mc._accProps.silent = true;
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Publish the SWF file
      2. +
    2. 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)
      3. +
    3. Use a tool which is capable of showing an object's accessibility information, such as ACTF aDesigner 1.0 to open the Flash movie.
      4. +
    4. 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.
      5. +
    5. 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.
      6. +
    6. Non-text objects that are coded to be hidden from assistive technologies are not available to assistive technology.
      7. +
    +
    +

    Expected Results

    +

    Check #6 is true.

    +
    +

    Resources

    + + + +
    \ 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 @@ +Specifying accessible names for image buttons

    Specifying accessible names for image buttons

    ID: FLASH30

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    The accessible name for a button may need to be updated if the button + changes during the use of the Flash movie.

    +

    Examples

    +
    +

    Accessible name for a simple image button

    + +

    In this example, an icon based button is given an accessible name + through scripting. When the button is clicked a web page is opened.

    + + 
    //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');
+}
    + +

    The result is demonstrated in the working version of Accessible name for a simple image button. The source of Accessible name for a simple image button is available.

    + +
    +
    +

    Accessible name for a dynamic image button

    + + 
    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();
+}
    + +

    The result is demonstrated in the working version of Accessible name for a dynamic image button. The source of Accessible name for a dynamic image button is available.

    + +
    +

    Tests

    +

    Procedure

    +

    When a Flash Movie contains image based buttons, confirm that:

    +
      +
    1. An accessible name is provided for the button that describes the + button's action
      2. +
    2. If the button's action changes (for example when it is clicked) + the accessible name changes correspondingly
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    \ 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 @@ +Specifying caption text for a DataGrid

    Specifying caption text for a DataGrid

    ID: FLASH31

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Flash does not have a caption element for the DataGrid component, + but the same effect can be achieved through the following approach:

    +
      +
    1. Place a label component or textfield above the DataGrid, containing + the grid's caption text.
      2. +
    2. 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 AccessibilityProperties.name + property.
      3. +
    +

    Examples

    +
    +

    Associating a label with a DataGrid

    + +

    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.

    +
      +
    • Create a new Flash file (.fla) or open an existing one to put + a DataGrid into.
      • +
    • Open the Flash components panel from the Window menu
      • +
    • Drag a DataGrid component onto the stage and position as desired.
      • +
    • Drag a label component onto the stage and position as desired.
      • +
    • Add text to the label component.
      • +
    • 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.
      • +
    + +
    +
    +

    Associating a caption with a DataGrid using ActiveScript 3

    + +

    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.

    + + 
    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;
+};
    + +

    Notes on this code sample:

    + + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Check whether the Flash movie contains a DataGrid component.
      2. +
    2. Confirm that each DataGrid's caption text has been added to the component as an accessible name.
      3. +
    +
    +

    Expected Results

    +

    Step 2 is true.

    +
    +
    \ 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 @@ +Using auto labeling to associate text labels with form controls

    Using auto labeling to associate text labels with form controls

    ID: FLASH32

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    Except for the CheckBox and RadioButton 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 Label component. If the 'auto-label' feature is + enabled in the Accessibility panel, then the Flash Player will automatically + associate the label text for the TextInput and TextArea 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.

    +

    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.

    +
    +

    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.

    +
    +

    To auto labeling, perform the following steps:

    +
      +
    1. 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.
      2. +
    2. Select the movie stage, and open the Accessibility panel.
      3. +
    3. 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.
      4. +
    4. 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.
      5. +
    5. 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.
      6. +
    +
    +

    As an alternative to using the Accessibility panel, the auto + label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel + to true for the stage object.

    +
    +

    Examples

    +
    +

    Using the "Auto Label" option in the Accessibility panel

    + +

    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.

    +

    The screenshot below illustrates the example:

    +
    + +
    Using the Auto Label feature in the Flash Authoring Environment
    +
    +

    The results of this technique can be viewed in the working version of Using the "Auto Label" option in the Accessibility panel. The source of Using the "Auto Label" option in the Accessibility panel is available.

    + +
    +

    Tests

    +

    Procedure

    +

    If a Flash form contains TextInput or TextArea components, or custom + button symbols with text labels, confirm that:

    +
      +
    1. The Auto Label option is enabled in the movie's Accessibility + panel
      2. +
    2. Use a screen reader or MSAA checker to ensure that the label text + is indeed exposed as the control's accessible name
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    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 @@ +Using relative values for Flash object dimensions

    Using relative values for Flash object dimensions

    ID: FLASH33

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    The objective of this technique is to specify the width and/or height + of an embedded Flash object using relative units such as em 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.

    +
    +

    This technique is not necessary to support users who use zoom + functionality in their browsers.

    +
    +

    Examples

    +
    +

    Scaling text while keeping a minimum size

    + +

    In this example, a Flash object is loaded into an HTML document using SWFObject's + dynamic publishing method. 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 min-width and min-height properties are set to the default dimensions.

    + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
+    <title>Flash Resize example</title>
+    <script src="swfobject/swfobject.js" type="text/javascript"/>
+    <script type="text/javascript">
+    swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", 
+    "flashPlaceHolder", "100%", "100%", "8")      
+</script>
+
+    <style type="text/css">
+  #flashPlaceHolder {
+    width: 20em;
+    height: 15em;
+    min-width: 320px;
+    min-height: 240px;
+  }
+</style>
+  </head>
+  <body id="header">
+    <h1>Flash Resize Demonstration</h1>
+    <p>When the browser's text size is changed, the Flash movie will be
+      resized accordingly.</p>
+    <p id="flashPlaceHolder">Flash needs to be installed for this
+      example to work</p>
+  </body>
+</html>
+
    + +

    The result of this technique can be viewed in the working version of Scaling text while keeping a minimum size. The source of Scaling text while keeping a minimum size is available.

    + + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Open a web page containing an embedded flash object
      2. +
    2. 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 (%).
      3. +
    +
    +

    Expected Results

    +
      +
    • Check #2 is true.
      • +
    +
    +
    \ 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 @@ +Turning off sounds that play automatically when an assistive technology is detected

    Turning off sounds that play automatically when an assistive technology is detected

    ID: FLASH34

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active + property. If this property is set to true, it means that the Flash + player has detected running assistive technology. Based on this flag, + the Flash developer can choose to run different functionality.

    +
    +

    The Flash Player requires some time to detect active assistive + technology and set the Accessibility.active 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.

    +

    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.

    +

    Other assistive technology tools, including screen magnifiers, + or tools not used as assistive technologies may also utilize MSAA in + ways that result in Accessibility.active being set to true.

    +
    +

    Examples

    +
    +

    A SoundHandler class

    + +

    A class called SoundHandler is created which automatically starts + playing an MP3 file only when Accessibility.active is set to false. + Note that this example also checks the flash.system.Capabilities.hasAccessibility + 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).

    + + 
    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";
+      }
+    }
+  }
+}
    + +

    This technique can be viewed in the working version of A SoundHandler class. The source of A SoundHandler class is available.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Start a screen reader that supports MSAA.
      2. +
    2. Open a page containing a Flash movie that starts playing audio + automatically when a screen reader is not running
      3. +
    3. Confirm that the audio is stopped.
      4. +
    +
    +

    Expected Results

    +
      +
    1. #3 is true
      2. +
    +
    +

    Resources

    + + + +
    \ 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 @@ +Using script to scroll Flash content, and providing a mechanism to pause it

    Using script to scroll Flash content, and providing a mechanism to pause it

    ID: FLASH35

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    A toggle button to pause and resume scrolling

    + +

    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.

    +
    +

    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.

    +
    + + 
    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 < scrollViewer.x)
+  scrollText.x = scrollViewer.x + scrollViewer.width;
+  scrollText.x -= 1;
+}
+
+//initiate scrolling
+toggleScroll(false);
+
    + +

    The technique is demonstrated in the working version of A toggle button to pause and resume scrolling. The source of A toggle button to pause and resume scrolling is available.

    + +
    +

    Tests

    +

    Procedure

    +

    When a Flash Movie contains scrolling content:

    +
      +
    1. Confirm that a button is provided that allows users to pause and resume the scrolling behavior
      2. +
    2. Confirm that pressing the button stops the scrolling
      3. +
    3. Confirm that pressing the button again restarts the scrolling
      4. +
    +
    +

    Expected Results

    +
      +
    • Checks #1, #2, and #3 are true.
      • +
    +
    +
    \ 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 @@ +Using scripts to control blinking and stop it in five seconds or less

    Using scripts to control blinking and stop it in five seconds or less

    ID: FLASH36

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Stopping blinking after a timeout

    + +

    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.

    + + 
    setTimeout(stopBlinking, 4500);
+function stopBlinking() {
+  var blinkingTextMC = getChildByName('blinkingTextMC');
+  blinkingTextMC.gotoAndStop(1);
+}
+
    + +

    For a demonstration, view the working version of Stopping blinking after a timeout. The source of Stopping blinking after a timeout is available.

    + +
    +

    Tests

    +

    Procedure

    +

    For each instance of blinking content:

    +
      +
    1. Start a timer for 5 seconds at the start of the blink effect.
      2. +
    2. When the timer expires, determine if the blinking has stopped.
      3. +
    +
    +

    Expected Results

    +
      +
    • For each instance of blinking content, #2 is true.
      • +
    +
    +
    \ 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 @@ +Providing submit buttons in Flash

    Providing submit buttons in Flash

    ID: FLASH4

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    ActionScript 3 combobox with submit button

    + +

    This is a basic ActionScript 3 example of a combobox component with a submit button to redirect the user to a different resource.

    + + 
    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");
+}
    +
    +
    +

    ActionScript 2 combobox with submit button

    + +

    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:

    + + 
    import fl.accessibility.ComboBoxAccImpl;
+ComboBoxAccImpl.enableAccessibility();
+state_submit.addEventListener("click", submitHandler);
+function submitHandler(e) {
+  getURL("http://www.wikipedia.org/wiki/" + state_combo.selectedLabel, "_self");
+}
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. 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.
      2. +
    2. 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.
      3. +
    +
    +

    Expected Results

    +

    #2 is true

    +
    +
    \ 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 @@ +Combining adjacent image and text buttons for the same resource

    Combining adjacent image and text buttons for the same resource

    ID: FLASH5

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    Examples

    +

    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'.

    +

    To create the combined button in Flash Professional:

    +
      +
    1. Add a graphic object and text to the stage
      2. +
    2. Select both objects
      3. +
    3. Select 'New Symbol' from the Insert menu or hit Ctrl+F8 to create a new button object
      4. +
    4. Click on the button object on the stage and enter an instance name in the Properties panel.
      5. +
    5. Continue under example 1, 2, or 3 below.
      6. +
    +
    + + +
    screen shot showing the combined button with an instance name 'flashLink1'
    + +
    +
    +

    Using the Accessibility panel to specify the accessible name

    + +

    The Accessibility panel is used to specify the accessible name (which in this case is the same as the visual text).

    +
    + + +
    screen shot showing use of the Accessibility control panel to provide a name for the combined button
    + +
    + +
    +
    +

    Using ActionScript to specify the accessible name

    + +

    ActionScript 3 can be used instead of the Accessibility control panel to define the accessibility name for the combined button, as follows:

    + + 
    // 'flashLink1' is an instance placed on the movie's main timeline
+flashLink1.accessibilityProperties = new AccessibilityProperties();
+flashLink1.accessibilityProperties.name = "Learn more about Flash";
    + +

    ActionScript 2 can be used instead of the Accessibility control panel to define the accessibility name for the combined button, as follows

    + + 
    // 'flashLink1' is an instance placed on the movie's main timeline
+flashLink1._accProps = new Object();
+flashLink1._accProps.name = "Learn more about Flash";
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Publish the SWF file
      2. +
    2. 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)
      3. +
    3. 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.
      4. +
    4. 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.
      5. +
    +
    +

    Expected Results

    +

    #4 is true.

    +
    +
    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 @@ +Creating accessible hotspots using invisible buttons

    Creating accessible hotspots using invisible buttons

    ID: FLASH6

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Graphic with accessible clickable regions

    + +
      +
    1. Add the original graphic that needs to have clickable hotspots to the stage.
      2. +
    2. +

      For each hotspot, do the following:

      +
        +
      1. Create a new button symbol by choosing "New Symbol" from the Flash Professional 'Insert' menu or by using the Ctrl + F8 shortcut.
        2. +
      2. Inside the button symbol, create a shape that matches the clickable surface.
        3. +
      3. Place the newly created button on top of the original graphic.
        4. +
      4. 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.
        5. +
      5. Using the Accessibility panel, specify a value for the "tabindex" field to give the button a logical position in the tab order.
        6. +
      6. Using the Accessibility panel, specify an accessible name that describes the purpose of the hotspot.
        7. +
      +
      3. +
    +
    + + +
    adding the graphic to the Flash authoring stage
    + +
    +
    + + +
    making a button invisible using the Properties panel
    + +
    +
    + + +
    setting the button's name using the Accessibility panel
    + +
    + + +

    The result can be seen in the working example of creating accessible hotspots using invisible buttons. The source of creating accessible hotspots using invisible buttons is available.

    + +
    +

    Tests

    +

    Procedure

    +

    Find all images with hotspots. For each hotspot, confirm that:

    +
      +
    1. The hotspot is implemented as an invisible button
      2. +
    2. The hotspot is provided with an accessible name, either through the Accessibility panel or through ActionScript
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +
    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 @@ +Using scripting to change control labels

    Using scripting to change control labels

    ID: FLASH7

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    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.

    +

    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.

    +

    Examples

    +
    +

    Using ActionScript to add contextual information directly to the label of a button

    + +

    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 label property modified.

    + + 
    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;
+}
    + +

    The result can be seen in the working example of adding contextual information to a button label. The source of adding contextual information to a button label is available.

    + +
    +

    Tests

    +

    Procedure

    +

    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.

    +
    +

    Expected Results

    +

    The above is true.

    +
    +
    \ 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 @@ +Adding a group name to the accessible name of a form control

    Adding a group name to the accessible name of a form control

    ID: FLASH8

    Technology: flash

    Type: Technique

    When to Use

    +
      +
    • Adobe Flash Professional version MX and higher
      • +
    • Adobe Flex
      • +
    +

    Description

    +

    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.

    +

    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.

    +

    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.

    +

    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".

    +

    Examples

    +
    +

    Adding a group name to the accessible name of radio buttons

    + +

    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:

    +
      +
    1. Add radio button components to the stage:
      2. +
    2. Enter each button's label using its label property
      3. +
    3. Add the visual group label to the left or above the buttons added in step 1
      4. +
    4. Select each radio button. In the Accessibility panel, add the group name to the "Name" field;
      5. +
    +

    Flash will concatenate the group name with each button's individual name, such as "gender male".

    +

    This approach is illustrated in the screenshot below:

    +
    + + +
    Using the Accessibility panel to add a group name to a form control
    + +
    +
    +

    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(); +

    +
    +

    For an illustration of this approach, see the working version of Adding a group name to the accessible name of radio buttons. The source of Adding a group name to the accessible name of radio buttons is available.

    + +
    +
    +

    Programmatically adding a group name with the accessible name of radio buttons

    + +

    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 AccessibilityProperties object is created, and its name property is set to a combination of the legend text and the actual form control label.

    + + 
    +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 < 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 < 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] && item[2].length > 0) {
+          var radioGroup: RadioButtonGroup = new RadioButtonGroup(item[0]);
+          var newBtn: RadioButton;;
+          for (var i = 0; i < 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 < 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;
+    }
+  }
+}
    + +

    This example class can be initialized as follows:

    + + 
    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);
+
    + +

    For an illustration of this approach, see the working version of Programmatically adding a group name with the accessible name of radio buttons. The source of Programmatically adding a group name with the accessible name of radio buttons is available.

    +
    +

    Adobe Flex allows you to perform this type of behavior by using the <form>, <formitem> and <formheading> elements

    +
    + +
    +

    Tests

    +

    Procedure

    +

    When a Flash Movie contains grouped form controls, confirm that either :

    +
      +
    • The group's name is included in the Accessibility panel's "name" field for each control.
      • +
    • Each control has an AccessibilityProperties.name property, which contains both the group's name and the control's label text
      • +
    +
    +

    Expected Results

    +
      +
    • One of the above is true
      • +
    +
    +
    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 @@ +Applying captions to prerecorded synchronized media

    Applying captions to prerecorded synchronized media

    ID: FLASH9

    Technology: flash

    Type: Technique

    When to Use

    +

    Adobe Flash-based Content

    +
      +
    • Adobe Flash CS3 and later
      • +
    +

    Description

    +

    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.

    +

    Examples

    +
    +

    Adding a timed text caption file to Flash

    + +
      +
    1. 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
      2. +
    2. 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.
      3. +
    3. Set the 'Skin' parameter to use a skin which includes the CC (closed captions) button.
      4. +
    4. 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.
      5. +
    + + 
    <?xml version="1.0" encoding="UTF-8"?>
+<tt xml:lang="en" xmlns="https://www.w3.org/2006/04/ttaf1"
+  xmlns:tts="https://www.w3.org/2006/04/ttaf1#styling">
+  <head>
+    <styling>
+      <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"/>
+      <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"/>
+    </styling>
+  </head>
+  <body id="thebody" style="defaultCaption">
+    <div xml:lang="en">
+      <p begin="0:00:00.20" end="0:00:02.20">If there were nothing in
+        our universe</p>
+      <p begin="0:00:02.20" end="0:00:05.65">the fabric of space-time
+        would be flat.</p>
+      <p begin="0:00:05.65" end="0:00:08.88">But add a mass, and
+        dimples form within it.</p>
+      <p begin="0:00:16.61" end="0:00:19.84">Smaller objects that
+        approach that large mass</p>
+      <p begin="0:00:19.84" end="0:00:23.41">will follow the curve in
+        space-time around it.</p>
+      <p begin="0:00:32.64" end="0:00:36.84">Our nearest star, the
+        sun, has formed such a dimple</p>
+      <p begin="0:00:36.84" end="0:00:38.00">and our tiny planet
+        Earth</p>
+      <p begin="0:00:38.00" end="0:00:41.50">goes along for the ride
+        in the curve of its dimple</p>
+      <p begin="0:00:41.50" end="0:00:43.80">staying in orbit around
+        the sun.</p>
+      <p begin="0:00:45.67" end="0:01:55.00"/>
+    </div>
+  </body>
+</tt>
+
    + +

    This is demonstrated in working example of Adding a timed text caption file to Flash. The working example of Adding a timed text caption file to Flash is available.

    + +
    +

    Tests

    +

    Procedure

    +

    Watch all video content displayed by your Flash movie. Ensure that:

    +
      +
    1. Captions are available for all audio content, either turned on by default or as a user preference.
      2. +
    2. The captions properly describe all audio information contained in the video.
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true
      • +
    +
    +

    Resources

    + +

    + http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines +

    + + +

    + http://www.buraks.com/captionate/ +

    + + +

    + https://www.w3.org/AudioVideo/TT/ +

    + +
    \ 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": "Adobe stopped updating and distributing the Flash Player 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/G10.html b/techniques/general/G10.html index bc7c3a7ac7..2e8b19ab8a 100644 --- a/techniques/general/G10.html +++ b/techniques/general/G10.html @@ -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. -
  • 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.

    • Tests

    Procedure

    diff --git a/techniques/general/G108.html b/techniques/general/G108.html index 200172ac51..11a3cd56d8 100644 --- a/techniques/general/G108.html +++ b/techniques/general/G108.html @@ -20,7 +20,7 @@

    Examples

    -

    Example 1: A Web page written in HTML or XHTML uses standard form +

    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 diff --git a/techniques/general/G110.html b/techniques/general/G110.html index 767fa1a863..3ebb2e953e 100644 --- a/techniques/general/G110.html +++ b/techniques/general/G110.html @@ -19,7 +19,7 @@

    HTML: Refresh With a URI and No Timeout

    -

    In HTML 4.x and XHTML 1.x, it is possible to implement a client-side +

    In HTML, it is possible to implement a client-side redirect using the meta diff --git a/techniques/general/G112.html b/techniques/general/G112.html index 3f1a561fd8..4f6104a37a 100644 --- a/techniques/general/G112.html +++ b/techniques/general/G112.html @@ -19,7 +19,7 @@

    Driver

    W3C key words

    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 - RFC 2119.

    + RFC 2119.

    diff --git a/techniques/general/G128.html b/techniques/general/G128.html index ff5106a4bd..381b0ab201 100644 --- a/techniques/general/G128.html +++ b/techniques/general/G128.html @@ -7,11 +7,6 @@

    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.

    -
    -
    - -

    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.

    -
    diff --git a/techniques/general/G134.html b/techniques/general/G134.html index 3500b62c77..3f4f8e2f37 100644 --- a/techniques/general/G134.html +++ b/techniques/general/G134.html @@ -1,3 +1,8 @@ +--- +obsoleteMessage: | + This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- @@ -54,7 +59,7 @@

    Tests

    Expected Results

    For HTML, SGML-based and XML-based technologies:

    -

    Check 2 is true.

    +

    Check #2 is true.

    \ No newline at end of file diff --git a/techniques/general/G141.html b/techniques/general/G141.html index ea1e49bdc8..de6211185d 100644 --- a/techniques/general/G141.html +++ b/techniques/general/G141.html @@ -71,9 +71,6 @@

    Related Techniques

    Resources

      -
    • - WebAIM: Semantic Structure -
    • WebAIM: Semantic Structure
      • diff --git a/techniques/general/G142.html b/techniques/general/G142.html index 470fb4b62d..145d6a6018 100644 --- a/techniques/general/G142.html +++ b/techniques/general/G142.html @@ -6,7 +6,7 @@

      This technique requires that the zoom function preserve all spatial relationships on the page and that all functionality continues to be available.

    Examples

      -
    • Internet Explorer 7 and Opera 9 provide a zoom function that scales HTML/CSS page content uniformly.
      • +
    • Most modern browsers provide a zoom function that scales HTML/CSS page content uniformly.
    • To allow users to resize text, Adobe Reader provides a magnification tool that scales PDF pages uniformly.

    Tests

    diff --git a/techniques/general/G145.html b/techniques/general/G145.html index b26e51e0ec..474ab4be88 100644 --- a/techniques/general/G145.html +++ b/techniques/general/G145.html @@ -151,14 +151,11 @@

    Examples

      -
    • 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.
      • +
    • 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.
    • 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.

    Tests

    diff --git a/techniques/general/G163.html b/techniques/general/G163.html index 0e027d3c0e..d829729920 100644 --- a/techniques/general/G163.html +++ b/techniques/general/G163.html @@ -30,7 +30,7 @@

    Expected Results

      -
    • Checks #1 - #4 are true.
      • +
    • Checks #1-4 are true.
    \ No newline at end of file diff --git a/techniques/general/G169.html b/techniques/general/G169.html index 4456dbd220..68956131b8 100644 --- a/techniques/general/G169.html +++ b/techniques/general/G169.html @@ -41,7 +41,7 @@

    Procedure

    Expected Results

      -
    • Test procedure #2 is true.
      • +
    • Check #2 is true.
    diff --git a/techniques/general/G17.html b/techniques/general/G17.html index 1046477d31..32532c6cd6 100644 --- a/techniques/general/G17.html +++ b/techniques/general/G17.html @@ -155,14 +155,11 @@
    -

    Here is a working example of this technique implemented using PHP, Javascript, CSS and XHTML: +

    Here is a working example of this technique implemented using PHP, Javascript, CSS and HTML: Color Picker Example.

    diff --git a/techniques/general/G178.html b/techniques/general/G178.html index b20da7c0d7..fcb9d888d1 100644 --- a/techniques/general/G178.html +++ b/techniques/general/G178.html @@ -3,23 +3,15 @@

    Description

    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.

    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.

    -

    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.

    +

    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.

    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.

    This technique can also be used in circumstances where scalable fonts cannot be used, such as legacy code situations.

    -

    This technique can be used in combination with a style switching technique to present a page that is a - conforming alternate version - for non-conforming content. Refer to - C29: Using a style switcher to provide a conforming alternate version - and - Understanding Conforming Alternate Versions - for more information.

    +

    This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

    Examples

      -
    • 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 - alt - text on each button.
      • +
    • 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 alt text on each button.
    • 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.
    • 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.
    • 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.
      • diff --git a/techniques/general/G18.html b/techniques/general/G18.html index f448afd6c7..30806b5af4 100644 --- a/techniques/general/G18.html +++ b/techniques/general/G18.html @@ -157,14 +157,11 @@
    diff --git a/techniques/general/G187.html b/techniques/general/G187.html new file mode 100644 index 0000000000..1df33d06fb --- /dev/null +++ b/techniques/general/G187.html @@ -0,0 +1,32 @@ +--- +obsoleteMessage: Most user agents do not implement a stop animation command as described in this technique. +obsoleteSince: 20 +--- +Using a technology to include blinking content that can be turned off via the user agent

    Using a technology to include blinking content that can be turned off via the user agent

    ID: G187

    Technology: general

    Type: Technique

    When to Use

    +

    All technologies.

    +

    Description

    +

    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.

    +

    The most common way for users to stop animation is to press the "escape" key. As long as there are no processes that take precedence in the event queue for a press of that key, this is taken as a command to stop animation of moving or blinking content.

    +

    Technologies for which this is known generally to work include:

    +
      +
    • Graphics Interchange Format (GIF)
      • +
    • Animated Portable Network Graphics (APNG)
      • +
    +

    Examples

    +
      +
    • A page contains a blinking banner intended to draw the user's attention to it. The banner is an animated gif image which repeats indefinitely. The user presses the "escape" key, which causes the user agent to stop the animation of all animated gif images on the page.
      • +
    +

    Tests

    +

    Procedure

    +
      +
    1. Load a page that includes blinking content.
      2. +
    2. Activate the browser's stop animation command (usually the Escape key).
      3. +
    3. Check to see if the blinking stops.
      4. +
    +
    +

    Expected Results

    +
      +
    • Check #3 is true.
      • +
    +
    +
    diff --git a/techniques/general/G19.html b/techniques/general/G19.html index 2aedcf17d2..42397557db 100644 --- a/techniques/general/G19.html +++ b/techniques/general/G19.html @@ -26,7 +26,7 @@

    Expected Results

      -
    • Both Step 1 and Step 2 are true.
      • +
    • Both checks #1 and #2 are true.
    \ No newline at end of file + diff --git a/techniques/general/G204.html b/techniques/general/G204.html index a5e7e127c5..0c38405e2c 100644 --- a/techniques/general/G204.html +++ b/techniques/general/G204.html @@ -2,7 +2,7 @@

    All technologies

    Description

    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.

    -

    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.

    +

    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.

    Examples

    @@ -29,8 +29,8 @@
    \ No newline at end of file diff --git a/techniques/general/G211.html b/techniques/general/G211.html index bb306acccc..cf948ee9d8 100644 --- a/techniques/general/G211.html +++ b/techniques/general/G211.html @@ -14,11 +14,11 @@

    Metadata

    When to Use

    -

    This technique applies to all web technologies that include interactive controls (such as links or form inputs).

    +

    This technique applies to all web technologies that include interactive controls (such as links or form inputs).

    Description

    -

    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.

    +

    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.

    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 accessible name 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.

    Determining the appropriate label

    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.

    @@ -207,18 +207,15 @@

    Expected Results

    Resources

    -

    Provide links to external resources that are relevant to users of the technique. This section is optional.

    • Accessible Name and Description Computation
    • Accessible Name and Description Computation in HTML Accessibility API Mappings 1.0
      • diff --git a/techniques/general/G212.html b/techniques/general/G212.html index 55bff4f304..a88807fb4e 100644 --- a/techniques/general/G212.html +++ b/techniques/general/G212.html @@ -8,7 +8,6 @@

      Using native controls to ensure functionality is triggered on the up-event.

      Metadata

      -

      Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.

      2.5.2 Pointer Cancellation

      Sufficient

      @@ -38,7 +37,7 @@

      Using a native button or link in HTML

      Using a native button in iOS or Android

      In native buttons in iOS and Android onclick events are triggered on the up-event by default.

      -

      The WCAG standard itself applies to web pages at a URL, and therefore this example is provided as helpful supplementary advice for those looking to implement the WCAG2ICT for native applications.

      +

      The WCAG standard itself applies to web pages, and therefore this example is provided as helpful supplementary advice for those looking to implement the WCAG2ICT for native applications.

    @@ -50,7 +49,7 @@

    Procedure

    1. 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.
    2. Check that the action was not triggered when the pointer is released outside of the hit area for the target.
      3. -
    3. If the action is triggered, check that the action is reversible.
      4. +
    4. If the action is triggered, check that the action is reversible.
    diff --git a/techniques/general/G217.html b/techniques/general/G217.html index 74ff1fdbb5..3302cf710f 100644 --- a/techniques/general/G217.html +++ b/techniques/general/G217.html @@ -8,13 +8,12 @@

    Providing a mechanism to allow users to remap or turn off character key shortcuts

    Metadata

    -

    Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.

    2.1.4 Character Key Shortcuts

    Sufficient

    Applicability

    -

    Any technology that supports scripting.

    +

    Any technology that supports scripting.

    Description

    @@ -53,19 +52,5 @@

    Expected Results

    - -
    -

    Resources

    -

    Provide links to external resources that are relevant to users of the technique. This section is optional.

    -
      -
    • Link
      • -
    -
    diff --git a/techniques/general/G218.html b/techniques/general/G218.html index 9ba522a508..8e08c3b495 100644 --- a/techniques/general/G218.html +++ b/techniques/general/G218.html @@ -13,7 +13,7 @@

    Metadata

    Applicability

    -

    Technologies that support authentication.

    +

    Technologies that support authentication.

    Description

    diff --git a/techniques/general/G219.html b/techniques/general/G219.html index 38cebb61ab..249f4ec9a4 100644 --- a/techniques/general/G219.html +++ b/techniques/general/G219.html @@ -8,7 +8,6 @@

    Ensuring that an alternative is available for dragging movements that operate on content

    Metadata

    -

    Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.

    2.5.X Dragging

    Sufficient

    @@ -56,14 +55,9 @@

    Expected Results

    -
    -

    Resources

    - -
    diff --git a/techniques/general/G220.html b/techniques/general/G220.html index c899d2eb7a..117c490165 100644 --- a/techniques/general/G220.html +++ b/techniques/general/G220.html @@ -13,7 +13,7 @@

    Metadata

    Applicability

    -

    Technologies that contain links

    +

    Technologies that contain links

    Description

    diff --git a/techniques/general/G56.html b/techniques/general/G56.html index 9a3603138b..8373f2cece 100644 --- a/techniques/general/G56.html +++ b/techniques/general/G56.html @@ -78,12 +78,12 @@

    Visual example of the failure

  • #5 is true
    • -

    Resources

    - +

    Resources

    + - +
    diff --git a/techniques/general/G65.html b/techniques/general/G65.html index 9972e0df0f..15238fd8ad 100644 --- a/techniques/general/G65.html +++ b/techniques/general/G65.html @@ -17,26 +17,39 @@

    When to Use

    Description

    -

    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.

    -

    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.

    -

    It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "→".

    +

    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.

    +

    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.

    +

    It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "→". Alternatively, one could use decorative iconography or create separators with CSS.

    Examples

    Photographer's portfolio

    -

    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:

    +

    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:

    Home / Galleries / Antarctica / Penguins / Gentoo Penguin
    -

    All of the text 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.

    +

    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 nav element with an aria-label. 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.

    +

    The aria-current 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.

    + +
    <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>
+
    +

    Working example: Breadcrumb example

    E-commerce site

    -

    The information architecture of an e-commerce Web site is categorized from general to increasingly more specific product subsections.

    +

    The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.

    You are here: Acme Company → Electronics → Computers → Laptops

    -

    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.

    +

    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.

    In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.

    HTML

    @@ -47,7 +60,7 @@

    HTML

    <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><a aria-current="page">Laptops</a></li> + <li><a href="/electronics/computers/laptops/" aria-current="page">Laptops</a></li> </ul> </nav>     @@ -57,7 +70,7 @@

    HTML

    CSS

    -
    nav, h2, ul, ul li{ display: inline;}
+
    h2, ul, ul li{ display: inline;}
 nav > h2{ font-size: 1em; } 
 ul { padding-left: 0em; }
    
 
@@ -71,9 +84,9 @@ 
    CSS
    
 		
    Tests
    
 		
    
 			
    Procedure
    
-			
    When breadcrumb trails have been implemented in a set of Web pages:
    
+			
    When breadcrumb trails have been implemented in a set of web pages:
    
 			
      
-				
    1. Navigate to a Web page.
      2. 
+				
    2. Navigate to a web page.
      3. 
 				
    3. Check that a breadcrumb trail is displayed.
      4. 
 				
    4. 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.
      5. 
 				
    5. 
@@ -91,17 +104,24 @@ 
      Procedure
      
 						
    6. Check that the current location is not implemented as a link.
      7. 
 					
    
 				
-				
  • Check that all links navigate to the correct Web page as specified by the breadcrumb trail.
    • 
+        
  • 
+          
    For a breadcrumb trail that does include the current location and it behaves as a link:
    
+          
      
+						
    1. Check that all elements are implemented as links.
      2. 
+						
    2. Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
      3. 
+					
    
+        
    • 
+				
  • Check that all links navigate to the correct web page as specified by the breadcrumb trail.
    • 
 			
 		
    
 		
    
 			
    Expected Results
    
 			
      
 				
    • 
-					
      For all Web pages in the set using breadcrumb trails,
      
+					
      For all web pages in the set using breadcrumb trails,
      
 					
        
-						
      • Checks #2, #3, and #6 are true.
        • 
-						
      • Either check #4 or #5 is true.
        • 
+						
      • Checks #2, #3, and #7 are true.
        • 
+						
      • Either check #4, #5 or #6 is true.
        • 
 					
      
 				
      • 
 			
    
@@ -117,10 +137,13 @@ 
    Related Techniques
    
 	
    
 		
    Resources
    
 		
 	
    
 
-
\ No newline at end of file
+
diff --git a/techniques/general/G91.html b/techniques/general/G91.html
index fccac110bd..d439ae3aa6 100644
--- a/techniques/general/G91.html
+++ b/techniques/general/G91.html
@@ -38,7 +38,7 @@ 
    Procedure
    
 		
    
 			
    Expected Results
    
 			
      
-				
    • Check 1 is true.
      • 
+				
    • Check #1 is true.
      • 
 			
    
 		
    
 	
    
diff --git a/techniques/html/H100.html b/techniques/html/H100.html
index c6c226136f..c350bba316 100644
--- a/techniques/html/H100.html
+++ b/techniques/html/H100.html
@@ -13,7 +13,7 @@ 
    Metadata

    Applicability

    -

    Technologies that support authentication.

    +

    Technologies that support authentication.

    Description

    diff --git a/techniques/html/H101.html b/techniques/html/H101.html index ce840c0a98..1f55dba66a 100644 --- a/techniques/html/H101.html +++ b/techniques/html/H101.html @@ -111,7 +111,7 @@

    Procedure

    Expected Results

      -
    • Checks 1, 2, and 3 are true.
      • +
    • Checks #1, #2, and #3 are true.
    diff --git a/techniques/html/H25.html b/techniques/html/H25.html index 4612039e44..58b3cc6857 100644 --- a/techniques/html/H25.html +++ b/techniques/html/H25.html @@ -48,7 +48,7 @@

    Procedure

    Expected Results

      -
    • Checks 1 and 2 are true.
      • +
    • Checks #1 and #2 are true.
    diff --git a/techniques/html/H34.html b/techniques/html/H34.html index c402f53d3f..d464e6afb9 100644 --- a/techniques/html/H34.html +++ b/techniques/html/H34.html @@ -50,13 +50,13 @@

    Procedure

    1. Examine the source for places where text changes direction.
    2. 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.
      3. -
    3. 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.
      4. +
    4. 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.

    Expected Results

      -
    • Check 3 is true.
      • +
    • Check #3 is true.
    diff --git a/techniques/html/H35.html b/techniques/html/H35.html new file mode 100644 index 0000000000..6af96accd7 --- /dev/null +++ b/techniques/html/H35.html @@ -0,0 +1,40 @@ +--- +obsoleteMessage: | + The Java-specific applet element is + obsolete in the HTML Living Standard. + Use embed or object instead. +obsoleteSince: 20 +--- + Providing text alternatives on applet elements

    Providing text alternatives on applet elements

    ID: H35

    Technology: html

    Type: Technique

    When to Use

    +

    HTML and XHTML Documents that load Java applets where applet is not deprecated. +

    +

    Description

    +

    Provide a text alternative for an applet by using the alt attribute to label an applet + and providing the text alternative in the body of the applet element. In this technique, both mechanisms + are required due to the varying support of the alt attribute and applet body text by + user agents.

    +

    Examples

    +
    +

    An applet to play the tic-tac-toe game.

    + 
    <applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game">
+   tic-tac-toe game
+</applet>
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. View the source code of the applet element
      2. +
    2. Check that the applet element contains an alt attribute with a text alternative + for the applet
      3. +
    3. Check that the applet element contains a text alternative for the applet in the + body of the applet element
      4. +
    +
    +

    Expected Results

    +
      +
    • Checks #2 and #3 are true.
      • +
    +
    +
    diff --git a/techniques/html/H39.html b/techniques/html/H39.html index 19963593e2..1fc656d6df 100644 --- a/techniques/html/H39.html +++ b/techniques/html/H39.html @@ -40,15 +40,14 @@

    Tests

    Procedure

    For each data table:

      -
    1. Check that the table has content that is presented as a table caption.
    2. Check that the table includes a caption element.
      3. -
    3. Check that the content of the caption element identifies the table.
      4. -
    +
  • Check that the text that titles or describes the table is included in the caption element.
    • +

    Expected Results

      -
    • #1, #2, and #3 are true.
      • +
    • #1 and #2 are true.
    diff --git a/techniques/html/H4.html b/techniques/html/H4.html new file mode 100644 index 0000000000..8000f5ec8b --- /dev/null +++ b/techniques/html/H4.html @@ -0,0 +1,126 @@ +--- +obsoleteMessage: Manipulating focus order is discouraged, as it frequently introduces new accessibility issues. +obsoleteSince: 20 +--- +Creating a logical tab order through links, form controls, and objects

    Creating a logical tab order through links, form controls, and objects

    ID: H4

    Technology: html

    Type: Technique

    When to Use

    +

    HTML and XHTML

    +

    Description

    +

    The objective of this technique is to provide a logical tab order when the default tab + order does not suffice. Often, placing the + interactive elements in an order that follows sequences and relationships within the + content is sufficient and this technique is not necessary. It can be very easy + to introduce usability bugs when setting the tab order explicitly.

    +

    In some cases, the author may want to specify a tab order that follows relationships in + the content without following the order of the interactive elements in the code. In + these cases, an alternative order can be specified using the tabindex + attribute of the interactive element. The tabindex is given a value between + 0 and 32767.

    +

    When the interactive elements are navigated using the tab key, the elements are given + focus in increasing order of the value of their tabindex attribute. + Elements that have a tabindex value higher than zero will receive focus + before elements without a tabindex or a tabindex of 0. After + all of the elements with a tabindex higher than 0 have received focus, the rest of the + interactive elements are given focus in the order in which they appear in the Web + page.

    +

    Examples

    +
    + +

    A genealogical search form searches for marriage records. The search form includes + several input fields for the bride and the groom. The form is marked up using a data + table that includes the fields of the groom in the first column and the fields of + the bride in the second column. The order in the content is row by row but the + author feels it is more logical to navigate the form column by column. This way, all + the groom's criteria can be filled in before moving on to the bride's criteria. The + tabindex attributes of the input fields are used to specify a tab + order that navigates column by column.

    + + 
    <form action="#" method="post">
+ <table summary="the first column contains the search criteria 
+  of the groom, the second column the search criteria of 
+  of the bride">
+ <caption>Search for marriage records</caption>
+ <tr>
+   <th>Search criteria</th>
+   <th>Groom</th>
+   <th>Bride</th>
+ </tr>
+ <tr>
+  <th>First name</th>
+  <td><input type="text" size="30" value="" name="groomfirst" 
+      title="First name of the groom" tabindex="1"></td>
+  <td><input type="text" size="30" value="" name="bridefirst" 
+       title="First name of the bride" tabindex="4"></td>
+ </tr>
+ <tr>
+  <th>Last name</th>
+  <td><input type="text" size="30" value="" name="groomlast" 
+      title="Last name of the groom" tabindex="2"></td>
+  <td><input type="text" size="30" value="" name="bridelast" 
+      title="Last name of the bride" tabindex="5"></td>
+ </tr>
+ <tr>
+  <th>Place of birth</th>
+  <td><input type="text" size="30" value="" name="groombirth" 
+      title="Place of birth of the groom" tabindex="3"></td>
+  <td><input type="text" size="30" value="" name="bridebirth" 
+      title="Place of birth of the bride" tabindex="6"></td>
+ </tr>
+</table>
+</form>
    +
    +
    + +

    A Web page contains a search field in the upper right corner. The field is given + tabindex="1" so that it will occur first in the tab order, even though it is not + first in the content order.

    + +
    +
    + +

    + Tabindex values need not be sequential nor must they begin with any + particular value. The values do not have to be unique. Elements that have identical + tabindex values are navigated in the order they appear in the + character stream.

    + + +

    In sections of the content where the tab order follows the content order, it can be + less error prone to give all elements the same tabindex value rather than specifying + a different number for each element. Then it is easy to rearrange those elements or + add new elements and maintain a logical tab order.

    + + 
     <a href="xxx" tabindex = "1">First link in list</a>
+<a href="xxx" tabindex = "1">Second link in list</a>
+<a href="xxx" tabindex = "1">Link that was added long 
+  after the original list was created</a>
+<a href="xxx" tabindex = "1">Third link in list</a>
+  ...
+<a href="xxx" tabindex = "1">Twentieth link in list</a>
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Check if tabindex is used
      2. +
    2. If tabindex is used, check that the tab order specified by the + tabindex attributes follows relationships in the content.
      3. +
    +
    +

    Expected Results

    +
      +
    • Check #2 is true.
      • +
    +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H44.html b/techniques/html/H44.html index 2cc53f20c1..d6f3cca1ef 100644 --- a/techniques/html/H44.html +++ b/techniques/html/H44.html @@ -127,8 +127,8 @@

    Procedure

    Expected Results

      -
    • Checks 1 and 2 are true.
      • -
    • For Success Criterion 3.3.2 (Labels or Instructions), Check 3 is also true.
      • +
    • Checks #1 and #2 are true.
      • +
    • For Success Criterion 3.3.2 (Labels or Instructions), check #3 is also true.
    diff --git a/techniques/html/H45.html b/techniques/html/H45.html new file mode 100644 index 0000000000..5ba88c0615 --- /dev/null +++ b/techniques/html/H45.html @@ -0,0 +1,58 @@ +--- +obsoleteMessage: | + The longdesc attribute is + obsolete in the HTML Living Standard, + and was never widely supported. + Use an a element or an image map to link to the description. +obsoleteSince: 20 +--- +Using longdesc

    Using longdesc

    ID: H45

    Technology: html

    Type: Technique

    When to Use

    +

    HTML documents that include images that cannot be + described in a short text alternative.

    +

    Description

    +

    The objective of this technique is to provide information in a file designated by the + longdesc attribute when a short text alternative does not adequately convey the function + or information provided in the image. The longdesc attribute is a URI, the target of + which contains a long description of the non-text content.

    +

    Authors can provide a description for an image by including text in a separate resource or within the text of the page containing the image. An advantage of using a separate resource for the description is that it is easily reusable for multiple instances of the same image, it does not add on-page visual clutter to the original document, and the description's end-point is apparent to the user. An advantage of providing the description within the same page as the image is that all users can access the description. A limitation of the on-page method, as well as in providing multiple descriptions on a single separate page, is that current implementations supporting longdesc do not identify the long description's end-point. Authors can solve this by providing a well-formed description, which identifies the where the description ends.

    +

    Examples

    +
    +

    Using longdesc to refer to a long description contained on a separate resource.

    + 
    <p><img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/></p>
    +
    +
    +

    Using longdesc to refer to a long description within the same page.

    + 
    <img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
+<div id="desc">
+<h3>Long Description: Line graph of the number of subscribers</h3>
+<!-- Full Description of Graph -->
+<p>Long description ends.</p>
+<div>
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Check that the img element has a longdesc attribute.
      2. +
    2. Check that the value of the longdesc attribute is a valid URI of an existing resource.
      3. +
    3. Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.
      4. +
    +
    +

    Expected Results

    +
      +
    • #1 through #3 are all true
      • +
    +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H46.html b/techniques/html/H46.html new file mode 100644 index 0000000000..c1fdc86f0b --- /dev/null +++ b/techniques/html/H46.html @@ -0,0 +1,55 @@ +--- +obsoleteMessage: | + noembed is + obsolete in the HTML Living Standard. + Use object instead when fallback is necessary. +obsoleteSince: 20 +--- +Using noembed with embed +

    Using noembed with embed +

    ID: H46

    Technology: html

    Type: Technique

    When to Use

    +

    Documents that load plugins with the embed element.

    +

    Description

    +

    The objective of this technique is to provide alternative content for the + embed element in a noembed element. The noembed is rendered + only if the embed is not supported. While it can be positioned anywhere on the + page, it is a good idea to include it as a child element of embed so that it is + clear to assistive technologies that a text alternative is associated with the + embed element it describes.

    +

    Examples

    +
    +

    + noembed is provided inside an embed +

    + 
    <embed src="../movies/history_of_rome.mov"
+  height="60" width="144" autostart="false">
+  <noembed>
+    <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
+  </noembed>
+</embed>
    +
    +
    +

    + noembed is provided beside an embed +

    + 
    <embed src="moviename.swf" width="100" height="80"
+  pluginspage="http://example.com/shockwave/download/" />
+<noembed>
+  <img alt="Still from Movie" src="moviename.gif" 
+    width="100" height="80" />
+</noembed>;
    +
    +

    Tests

    +

    Procedure

    +
      +
    1. Check if embed element has a child noembed element
      2. +
    2. Check if embed element has a noembed element that + immediately follows it.
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 is true or #2 is true
      • +
    +
    +

    Resources

    diff --git a/techniques/html/H56.html b/techniques/html/H56.html index 7b4f0f0f01..950e9dfe53 100644 --- a/techniques/html/H56.html +++ b/techniques/html/H56.html @@ -49,7 +49,7 @@

    Procedure

    Expected Results

      -
    • Checks 2 and 3 are true for all text.
      • +
    • Checks #2 and #3 are true for all text.
    diff --git a/techniques/html/H57.html b/techniques/html/H57.html index eca88a109e..8801c4164f 100644 --- a/techniques/html/H57.html +++ b/techniques/html/H57.html @@ -52,7 +52,7 @@

    Procedure

    Examine the html element of the document.

    1. Check that the html element has a lang attribute.
      2. -
    2. 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 Web page.
      3. +
    3. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor and reflects the primary language used by the Web page.
    @@ -78,7 +78,7 @@

    Resources

    HTML "lang" attribute on the Mozilla Developer Network.
  • - BCP 47: Tags for the Identification of Languages. + BCP 47: Tags for Identifying Languages; Matching of Language Tags.
  • Language tags in HTML and XML. diff --git a/techniques/html/H58.html b/techniques/html/H58.html index d68269db50..a620127d66 100644 --- a/techniques/html/H58.html +++ b/techniques/html/H58.html @@ -50,7 +50,7 @@

    Procedure

    For each lang attribute in the document:

      -
    1. Check that the value of the lang attribute conforms to BCP 47: Tags for the Identification of Languages or its successor.
      2. +
    2. Check that the value of the lang attribute conforms to BCP 47: Tags for Identifying Languages; Matching of Language Tags or its successor.
    3. Check that the language code matches the language of the content it applies to.
    • @@ -77,7 +77,7 @@

    Resources

    HTML "lang" attribute on the Mozilla Developer Network.
  • - BCP 47: Tags for the Identification of Languages. + BCP 47: Tags for Identifying Languages; Matching of Language Tags.
  • Language tags in HTML and XML. diff --git a/techniques/html/H59.html b/techniques/html/H59.html new file mode 100644 index 0000000000..2cbe03f493 --- /dev/null +++ b/techniques/html/H59.html @@ -0,0 +1,89 @@ +--- +obsoleteMessage: prev and next typically have no effect on browser navigation controls. +obsoleteSince: 20 +--- + + + + Using the link element and navigation tools + + + +

    Using the link element and navigation tools

    +
    +

    ID: H59

    +

    Technology: html

    +

    Type: Technique

    +
    +
    +

    When to Use

    +

    HTML

    +
    +
    +

    Description

    +

    The objective of this technique is to describe how the link 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 rel + attributes indicates what type of relation is being described, and the href + attribute provides a link to the document having that relation. Different link element rel values are used to create relationships:

    +
      +
    • next: Refers to the next document in a linear sequence of documents.
      • +
    • prev: Refers to the previous document in an ordered series of documents.
      • +
    +
    +
    +

    Examples

    +
    + +

    A Web page for Chapter 2 of an on-line book might contain the following links + within the head section.

    + +
    <link rel="prev" href="Chapter01.html" title="01. Why Volunteer?">
+<link rel="next" href="Chapter03.html" title="03. Who Volunteers?" />
    +
    +
    +
    +

    Tests

    +
    +

    Procedure

    +

    For a Web page that is within a sequence or collection of Web pages:

    +
      +
    1. Check that all link elements pertaining to navigation occur in the head section of the document.
      2. +
    2. +

      For each link element in the head section of the document which pertains to navigation, check that it contains at least:

      +
        +
      1. a rel attribute identifying the link type
        2. +
      2. a valid href attribute to locate the appropriate resource
        3. +
      +
      3. +
    +
    +
    +

    Expected Results

    +
      +
    • All of the checks above are true.
      • +
    +
    +
    + +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H60.html b/techniques/html/H60.html new file mode 100644 index 0000000000..3ec4ca9586 --- /dev/null +++ b/techniques/html/H60.html @@ -0,0 +1,62 @@ +--- +obsoleteMessage: The glossary link type is obsolete. +obsoleteSince: 20 +--- +Using the link element to link to a glossary

    Using the link element to link to a glossary

    ID: H60

    Technology: html

    Type: Technique

    When to Use

    +

    HTML and XHTML

    +

    Description

    +

    The objective of this technique is to provide a mechanism for locating a glossary. When + terms in the content are defined on a separate glossary page, the glossary is referenced + using a link element in the head element of the document that + uses the glossary. The rel attribute of the link element is + set to "glossary", and the href attribute contains the URI of the glossary + page. User agents can then assist users in accessing the glossary quickly and + easily.

    +

    Examples

    +
    +

    The WCAG 2.0 Glossary.

    + 
     <link rel="glossary" href="https://www.w3.org/TR/WCAG20/#glossary">
    +
    +

    Tests

    +

    Procedure

    +

    For any set of words and their definitions that are meant to serve as a glossary:

    +
      +
    1. Check that the head section of the Web page that contains words, + phrases or abbreviations defined in a glossary contains a link + element
      2. +
    2. Check that the link element has attribute + + rel="glossary" +
      3. +
    3. Check that the href attribute of the link element + refers to the glossary page.
      4. +
    +
    +

    Expected Results

    +
      +
    • All checks above are true.
      • +
    +

    Note: The definition of abbreviation used in WCAG is : "shortened form of a word, + phrase, or name where the original expansion has not been rejected by the organization + that it refers to and where the abbreviation has not become part of the language."

    +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H63.html b/techniques/html/H63.html index e2a1539c26..0194897d07 100644 --- a/techniques/html/H63.html +++ b/techniques/html/H63.html @@ -99,26 +99,5 @@

    Resources

    • - -
    -

    Resources

    - -
    \ No newline at end of file diff --git a/techniques/html/H70.html b/techniques/html/H70.html new file mode 100644 index 0000000000..5646c8ec0d --- /dev/null +++ b/techniques/html/H70.html @@ -0,0 +1,73 @@ +--- +obsoleteMessage: | + The frameset and frame elements are + obsolete in the HTML Living Standard. + Either use iframe and CSS instead, + or use server-side includes to generate complete pages with the various invariant parts merged in. +obsoleteSince: 20 +--- +Using frame elements to group blocks of repeated material

    Using frame elements to group blocks of repeated material

    ID: H70

    Technology: html

    Type: Technique

    When to Use

    +

    HTML and XHTML documents that use frames

    +

    Description

    +

    The objective of this technique is to demonstrate how framesets can be used to group + blocks of repeated material. Since most user agents and assistive technology provide a + way to navigate from frame to frame, using frames to organize elements can provide a + mechanism for easily bypassing blocks of repeated content. If the site uses framesets, + organize the blocks of content into separate frames. Make certain that the repeated + blocks of content appear in the same frame within the frameset of each Web page. In + addition, each frame element must have a title attribute to describe the content of the + frame. When frames are properly titled, users can use frame navigation to easily + navigate between blocks of content.

    +

    This technique is appropriate when framesets are already used to organize the content + of the page; other techniques are preferred for pages that are not already using + framesets, because many people using assistive technology have trouble with frames . An + advisory technique about using noframes is available in Success Criterion 1.1.1.

    +

    In HTML5 the frame element is marked as obsolete.

    +

    Examples

    +
    + +

    The following example shows the use of two frames to organize content. The source + of the first frame is the Web page, navigation.html, which contains the HTML for the + navigation. This frame has a title attribute which identifies it as a navigation + bar. The second frame contains the main content of the site as indicated by the + source parameter of main.html and the title attribute, "Main News Content" which + identifies its function.

    + + 
    <frameset cols="20%, *">
+  <frame src="navigation.html" name="navbar" title="Navigation Bar" />
+  <frame src="main.html" name="maincontent" title="Main News Content" />
+  <noframes>
+    <p>View <a href="noframe.html">no frame version</a>.</p>
+  </noframes>
+</frameset>
    +
    +

    Tests

    +

    Procedure

    +

    If the Web page uses frames to organize content:

    +
      +
    1. Check if repeated blocks of content are organized into separate frames.
      2. +
    2. Check that the frames with repeated content appear in the same location within + each frameset.
      3. +
    +
    +

    Expected Results

    +
      +
    • Checks #1 and #2 are true.
      • +
    +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H71.html b/techniques/html/H71.html index f80a0df693..4615b1dddc 100644 --- a/techniques/html/H71.html +++ b/techniques/html/H71.html @@ -112,7 +112,7 @@

    Procedure

    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:

    1. Check that the group of logically related input or select elements are contained within fieldset elements.
      2. -
    2. Check that each fieldset has a legend element that includes a description for that group.
      3. +
    3. Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.
    diff --git a/techniques/html/H73.html b/techniques/html/H73.html new file mode 100644 index 0000000000..7d7d3412ec --- /dev/null +++ b/techniques/html/H73.html @@ -0,0 +1,105 @@ +--- +obsoleteMessage: | + The summary attribute is + obsolete in the HTML Living Standard. + Use one of the techniques for describing tables instead. +obsoleteSince: 20 +--- +Using the summary attribute of the table element to give an overview of data + tables

    Using the summary attribute of the table element to give an overview of data + tables

    ID: H73

    Technology: html

    Type: Technique

    When to Use

    +

    HTML 4.01, XHTML 1.x

    +

    Description

    +

    The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.

    +

    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.

    +

    The summary attribute may be used whether or not the table includes a + caption element. If both are used, the summary should not + duplicate the caption.

    +

    In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.

    +
    +

    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. + However, if a layout table is used, then the summary attribute is not used or + is null. The purpose of a layout table is simply to control the placement of content; + the table itself is “transparent" to the user. A summary would “break" this + transparency by calling attention to the table. A null summary + (summary="") on layout tables is acceptable. See F46 for details.

    +
    +

    Examples

    +
    +

    A data table with a summary but no caption

    + +

    This example shows a bus schedule. The route number and direction are included in + the summary along with information on how to use the schedule.

    + + 
    <table summary="Schedule for Route 7 going downtown. Service begins 
+at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
+Find the intersection closest to your starting point or destination, then read 
+down that column to find out what time the bus leaves that intersection.">
+  <tr>
+    <th scope="col">State & First</th>
+    <th scope="col">State & Sixth</th>
+    <th scope="col">State & Fifteenth</th>
+    <th scope="col">Fifteenth & Morrison</th>
+  </tr>
+  <tr>
+    <td>4:00</td>
+    <td>4:05</td>
+    <td>4:11</td>
+    <td>4:19</td>
+  </tr>
+  …
+</table>
    +
    +
    +

    A data table with both a summary and a caption +

    + +

    In this example both a summary attribute and a caption + element are used. The caption identifies the bus route. The + summary helps users who are blind understand how to use the schedule. + Screen readers read the caption, followed by the + summary.

    + + 
    <table summary="Intersections are listed in row 1. 
+Find the intersection closest to your starting point 
+or destination, then read down that column to find 
+out what time the bus leaves that intersection.  
+Service begins at 4:00 AM and ends at midnight.">
+  <caption>Route 7 Downtown (Weekdays)</caption>
+…
+</table>
    +
    +

    Tests

    +

    Procedure

    +

    For each data table:

    +
      +
    1. If a summary is present, check that the summary + attribute describes the table's organization or explains how + to use the table
      2. +
    2. If both a summary attribute and a caption element are present + for the data table, check that the summary does not + duplicate the caption.
      3. +
    +
    +

    Expected Results

    +
      +
    • #1 and #2 are true.
      • +
    +
    +

    Resources

    + + + +
    diff --git a/techniques/html/H74.html b/techniques/html/H74.html index cd4493aa4c..ba7131f17a 100644 --- a/techniques/html/H74.html +++ b/techniques/html/H74.html @@ -1,3 +1,8 @@ +--- +obsoleteMessage: | + This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- @@ -62,18 +67,6 @@

    Resources

  • The W3C's Nu HTML Checker.
    • -
  • - Recommended DTDs to use in your Web document. -
    • -
  • - HTML - The doctype. -
    • -
  • - Validating Web pages. -
    • -
  • - The W3C's Nu HTML Checker. -
    • diff --git a/techniques/html/H75.html b/techniques/html/H75.html new file mode 100644 index 0000000000..ee44be3efe --- /dev/null +++ b/techniques/html/H75.html @@ -0,0 +1,81 @@ +--- +obsoleteMessage: | + This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- +Ensuring that Web pages are well-formed

    Ensuring that Web pages are well-formed

    ID: H75

    Technology: html

    Type: Technique

    When to Use

    +

    Any XML-based markup languages.

    +

    Description

    +

    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 contents. + Well-formedness is checked by parsing the document with a conforming XML parser and + checking if the validation report mentions well-formedness errors. Every conforming XML + parser is required to check well-formedness and stop normal processing when a + well-formedness error is found (a conforming XML parser does not need to support + validation).

    +

    Examples

    +
    +

    + +

    XML files include a document type declaration, a xsi:schemaLocation attribute or + other type of reference to a schema. The developer can use off-line or online + validators, an XML editor or an IDE with XML support (see Resources below) to check + well-formedness.

    + +
    +
    +

    + +

    When XML files do not include a document type declaration, a xsi:schemaLocation + attribute or a processing instruction referencing a schema even though there is a + schema for them, the relevant schema is specified by a command line instruction, a + user dialog or a configuration file, and the XML files are checked against the + schema.

    + +
    +
    +

    + +

    When XML files do not include a document type declaration, a xsi:schemaLocation + attribute or a processing instruction referencing a schema even though there is a + schema for them, the namespace is dereferenced to retrieve a schema document or + resource directory (Resource Directory Description Language: RDDL), and the XML files are checked against the + schema.

    + +
    +
    +

    + +

    When a Website generates XML dynamically instead of serving only static documents, + a developer can use XMLUnit, XML Test Suite or a similar + framework to test the generated XML code.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Load each file into a validating XML parser.
      2. +
    2. Check that there are no well-formedness errors.
      3. +
    +
    +

    Expected Results

    +

    Step 2 is true.

    +
    +

    Resources

    + + +

    For other resources, see Validating Web + pages.

    + +
    diff --git a/techniques/html/H88.html b/techniques/html/H88.html index 89fc224611..09c123d88d 100644 --- a/techniques/html/H88.html +++ b/techniques/html/H88.html @@ -53,6 +53,7 @@

    Expected Results

    Related Techniques

    Resources

    Refer to the resources section of Validating Web diff --git a/techniques/html/H93.html b/techniques/html/H93.html index 8f0ef17a09..0a5b9d8cb3 100644 --- a/techniques/html/H93.html +++ b/techniques/html/H93.html @@ -1,3 +1,8 @@ +--- +obsoleteMessage: | + This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- diff --git a/techniques/html/H94.html b/techniques/html/H94.html index 68dc177cd5..8395d69ef4 100644 --- a/techniques/html/H94.html +++ b/techniques/html/H94.html @@ -1,3 +1,8 @@ +--- +obsoleteMessage: | + This technique relates to 4.1.1: Parsing, which was removed as of WCAG 2.2. +obsoleteSince: 22 +--- @@ -51,7 +56,7 @@

    Expected Results

    Expected Results

      -
    • Check 1 is true.
      • +
    • Check #1 is true.
    diff --git a/techniques/pdf/PDF1.html b/techniques/pdf/PDF1.html index df3a55c45b..0171f98d41 100644 --- a/techniques/pdf/PDF1.html +++ b/techniques/pdf/PDF1.html @@ -111,7 +111,7 @@

    Procedure

    Expected Results

      -
    • Check 1 is true.
      • +
    • Check #1 is true.
    diff --git a/techniques/server-side-script/SVR1.html b/techniques/server-side-script/SVR1.html index 7c97a7e00b..0193eccd9f 100644 --- a/techniques/server-side-script/SVR1.html +++ b/techniques/server-side-script/SVR1.html @@ -98,7 +98,7 @@

    Procedure

    Expected Results

      -
    • Step 2 is false AND step 3 is true.
      • +
    • Check #2 is false and check #3 is true.
    @@ -112,7 +112,7 @@

    Resources

    Use standard redirects: do not break the back button! (W3C QA Tip).
  • - HTTP/1.1 Status Code Definitions: Redirection 3xx. + RFC 9110: HTTP Semantics 15.4. Redirection 3xx.
  • Interface javax.servlet.http.HttpServletResponse in diff --git a/techniques/server-side-script/SVR3.html b/techniques/server-side-script/SVR3.html index 2c5d2273fc..eb93d8bb19 100644 --- a/techniques/server-side-script/SVR3.html +++ b/techniques/server-side-script/SVR3.html @@ -17,7 +17,7 @@

    When to Use

    Description

    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.

    -

    Conformance Requirement 1 allows non-conforming pages to be included within the scope of conformance as long as they have a "conforming alternate version". 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.

    +

    Conformance Requirement 1 allows non-conforming pages to be included within the scope of conformance as long as they have a conforming alternate version. 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.

    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.

    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.

    diff --git a/techniques/silverlight/SL1.html b/techniques/silverlight/SL1.html new file mode 100644 index 0000000000..383da1c4b7 --- /dev/null +++ b/techniques/silverlight/SL1.html @@ -0,0 +1,147 @@ +Accessing Alternate Audio Tracks in Silverlight Media

    Accessing Alternate Audio Tracks in Silverlight Media

    ID: SL1

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to show how to access an alternate + audio channel in a prepared media file that is played in a Silverlight MediaElement.

    +

    Silverlight supports media file formats that contains additional audio + channels in synchronization, beyond the two tracks for stereo audio + that are used by typical media player defaults. Silverlight provides + a dedicated AudioStreamIndex API on MediaElement, + so that the Silverlight application author can use Silverlight programming + techniques to select which audio channel to play for the user. Silverlight + control authors might label a UI control with text such as "Activate + this button to listen to an audio-only version of the media presentation" so + that the purpose of the media element control interface is clear to + the user. That way the same media control can be used to present the + media either as audio-video or as audio-only with alternate track depending + on user preference at run time.

    +

    The media formats that are supported by Silverlight are documented + on MSDN.

    +
    +

    Media encoding

    +

    The process of encoding the media with additional audio channels is + not described in this technique because configuring and encoding audio + channels for media formats is a technique for any usage of media in + a computer application, not just a Silverlight-specific technique or + a Web technology technique. For more information on one possible procedure + for encoding the media in WMV format, see Microsoft Expression Encoder Overview. + Often, Silverlight authors will receive the media from a third party, + such as a video production facility, and are not directly involved + with the encoding process. Silverlight authors should verify that the + media they are using has alternate audio tracks encoded in it. If such + tracks exist, Silverlight authors will need a track listing from the + media producer to know which of the audio tracks is intended as the + alternate audio. Other tracks might exist in the encoded media that + provide language translations of the default audio, or that serve other + purposes.

    +
    +

    Examples

    +
    +

    Changing AudioStreamIndex

    + +

    This example has a UI definition in XAML and interaction logic in + C#. In addition to the typical Play/Pause/Stop controls, this interface + includes a Play Full-Description Audio button. Activating the button + invokes a function that swaps the audio channels and plays an alternative + synchronized audio channel that contains a composite full-description audio track.

    +

    The following is the basic UI in XAML. This example is deliberately + simple and does not include AutomationProperties. + Audio streams are identified by an index in a collection.

    + 
          <Grid x:Name="LayoutRoot" Background="White">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="20" />
+        </Grid.RowDefinitions>
+        <MediaElement x:Name="media" Source="/combined.wmv"
+           Width="300" Height="300" 
+           Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
+           AutoPlay="false"
+        />
+        <Button Click="StopMedia" 
+     Grid.Column="0" Grid.Row="1" Content="Stop" />
+        <Button Click="PauseMedia" 
+     Grid.Column="1" Grid.Row="1" Content="Pause" />
+        <Button Click="PlayMedia" 
+     Grid.Column="2" Grid.Row="1" Content="Play" />
+        <Button Name="AltAudioBtn" Grid.Row="2" HorizontalAlignment="Left" Grid.ColumnSpan="2" 
+        Click="AltAudioBtn_Click">Play Full-Description Audio</Button>
+    </Grid>
+
    +

    The following is the C# logic.

    + 
            private void AltAudioBtn_Click(object sender, RoutedEventArgs e)
+        {
+            if (media.AudioStreamCount > 1)
+            {
+                if (media.AudioStreamIndex == 1)
+                {
+                    media.AudioStreamIndex = 0;
+                    (sender as Button).Content = "Play full-description audio";
+                } else {
+                    media.AudioStreamIndex = 1;
+                   (sender as Button).Content = "Play default audio";
+                }
+            }
+            else
+            {
+                (sender as Control).IsEnabled = false;
+            }
+        }
+        private void StopMedia(object sender, RoutedEventArgs e)
+        {
+            media.Stop();
+        }
+        private void PauseMedia(object sender, RoutedEventArgs e)
+        {
+            media.Pause();
+        }
+        private void PlayMedia(object sender, RoutedEventArgs e)
+        {
+            media.Play();
+        }
    +

    This example is shown in operation in the working example of Alternative Audio Channel. If using the test file, the test contains test audio tones rather than actual audio description, but the pitch of the tones is indicative of which of the channels is selected and played.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Open the HTML page for a Silverlight application, where that application + plays media and the media is expected to support an alternate audio + track for the video.
      2. +
    2. Verify that the application user interface presents a control + that enables the user to cause the media to play with an alternate + audio track.
      3. +
    3. Activate that control. Verify that the audio portion of the media + player output as played through the computer's audio system is now + playing the alternate audio track.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL10.html b/techniques/silverlight/SL10.html new file mode 100644 index 0000000000..339f6587d5 --- /dev/null +++ b/techniques/silverlight/SL10.html @@ -0,0 +1,142 @@ +Implementing a Submit-Form Pattern in Silverlight

    Implementing a Submit-Form Pattern in Silverlight

    ID: SL10

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to declare Silverlight user interface + elements related to user input and use the Silverlight two-way data + binding techniques to provide a Submit button and opt-in forms submission + logic pattern for forms. The Submit button serves as the final deliberate + step of a form submission scenario. Silverlight programming techniques + do not provide a "Submit button as a distinct object. Rather, + application authors design their user input workflow such that it is + a single user action that initiates change of context that is related + to a data input scenario. The key to doing this in Silverlight is to + use a data binding mode that sets UpdateSourceTrigger of + all individual databound fields in that form or transaction. For any + data binding where the UpdateSourceTrigger is Explicit, + no real-time change is made to the data, until the UpdateSource method + is called on each of these bindings. The application-specific Submit + button is connected to an event handler that calls UpdateSource on + all of the databound UI elements that comprise that form.

    +
    +

    Validation of data

    +

    The Submit button itself can also be the UI element that provides + warnings, instructions, etc. in a way that assistive technologies can + report to users, through the AutomationProperties techniques. + Using a Submit model for Silverlight form input to databound data sources + relies on a particular data binding mode. The Submit model can be used + either along with client-side or server-side validation techniques. + The example does not explicitly include either validation technique.

    +
    +

    Examples

    +
    +

    Two form fields with Submit

    + +

    In this example, the form fields correspond to a data object that + implements a view model. Silverlight uses the view model and data annotations + to generate some of its UI, notably the names of the fields are bound + to the original view model names from the data. This example has a + UI defined in XAML and logic defined in C#. The following is the XAML + UI , which also includes the binding definitions. Note the Mode=TwoWay, + UpdateSourceTrigger=Explicit attributes in the bindings. This is the + binding mode to use for the Submit button scenario.

    + 
    <UserControl x:Class="BasicSubmitButton.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
+ <StackPanel x:Name="LayoutRoot" Background="White" Margin="10">
+   <Grid>
+   <Grid.RowDefinitions>
+       <RowDefinition Height="Auto"/>
+       <RowDefinition Height="Auto"/>
+       <RowDefinition Height="Auto"/>
+       <RowDefinition Height="Auto"/>
+       <RowDefinition Height="Auto"/>
+   </Grid.RowDefinitions>
+   <Grid.ColumnDefinitions>
+       <ColumnDefinition Width="Auto"/>
+       <ColumnDefinition Width="200"/>
+       <ColumnDefinition Width="Auto"/>
+   </Grid.ColumnDefinitions>
+   <TextBlock Text="Form Input" FontSize="16" FontWeight="Bold"
+     Grid.Column="1" HorizontalAlignment="Center" />
+       <sdk:Label x:Name="NameLabel" Grid.Row="2" Margin="3"
+   HorizontalAlignment="Right"
+   Target="{Binding ElementName=NameTextBox}"/>
+   <TextBox x:Name="NameTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
+     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
+     Grid.Column="1" Grid.Row="2" Margin="3" />
+       <sdk:Label x:Name="AgeLabel" Grid.Row="3" Margin="3"
+   HorizontalAlignment="Right"
+   Target="{Binding ElementName=AgeTextBox}"/>
+   <TextBox x:Name="AgeTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
+     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
+     Grid.Column="1" Grid.Row="3" Margin="3" />
+   <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
+     Grid.Column="1" Grid.Row="4" Width="50" Margin="3"
+   AutomationProperties.HelpText="Activate this button to submit form."/>
+   </Grid>
+ </StackPanel>
+</UserControl>
+
    +

    The following is the C# logic for the page. Note the SubmitButton_Click handler. + This implementation disables the Submit button (representative of + a change of context, because now the form cannot be submitted again) + and provides user feedback without performing any validation. The + test file included in this technique sets up its data object as a + purely client side entity and does no validation, so that no service/server + is necessary to use the test file. Each element with a binding calls + the UpdateSource method, such that the act of pressing + the Submit button commits all the form's information all at once. + A full implementation might replace this with a server side data + object infrastructure. A full implementation might also provide a "Reset" or "Edit" button + to enable form submission again if there were issues.

    + 
    private void SubmitButton_Click(object sender, RoutedEventArgs e)
+{
+   (sender as Button).IsEnabled = false;
+   NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
+   AgeTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
+   TextBlock tb = new TextBlock();
+   tb.Text="Thank you, your form information was submitted.";
+   LayoutRoot.Children.Add(tb);
+}
+
    +

    This example is shown in operation in the working example of Basic Submit Button.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To test + UI Automation based behavior such as reading AutomationProperties.HelpText, + use Microsoft Windows as platform.
      2. +
    2. Verify that the user interface design of the form includes a clearly + indicated Submit button (a control that adequately communicates to + users that activating it will cause input to be submitted and might + cause a change of context).
      3. +
    3. Provide values for the various input fields of the form, and verify + that doing so does not in and of itself change the context.
      4. +
    4. Verify that if change of context occurs at all, that action is + delayed until after the Submit button is activated.
      5. +
    +
    +

    Expected Results

    +

    #2, #3, and #4 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL11.html b/techniques/silverlight/SL11.html new file mode 100644 index 0000000000..00254639af --- /dev/null +++ b/techniques/silverlight/SL11.html @@ -0,0 +1,121 @@ +Pausing or Stopping A Decorative Silverlight Animation

    Pausing or Stopping A Decorative Silverlight Animation

    ID: SL11

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to associate a "Pause" or "Stop" action + for a Silverlight animation with a user interface control. This enables + a user to pause or stop an animation in Silverlight content.

    +

    The Silverlight animation system is generalized such that nearly any + Silverlight property of type Double, Point or Color can + be animated, or a property can cycle through discrete object values. + Thus the possibilities for which properties in the user interface can + be animated are quite broad. The general technique shown can be used + to pause or stop any Silverlight animation, including those that are + purely decorative.

    +
    +

    Pause versus Stop

    +

    Silverlight has two discrete methods for animation control: a Pause method + and a Stop method. The difference in behavior is that Pause uses + whatever the last value was while the animation was still running, + and holds that value permanenently (unless the animation is restarted). Stop sets + the value to be whatever value existed before the animation was started. + However, calling Stop on an animation often results + in a behavior that looks like a "reset" to the user; this + is particularly true if the animation is animating an element's position + on screen. In many cases, what might be a conceptual "stop" for + the user is better accomplished by a "permanent Pause" in + the Silverlight animation API. Whether to call Pause or Stop is + an aesthetic decision and application authors can experiment to see + which behavior has the best appearance. If application authors choose + to use Stop, authors can simply replace the call to + .Pause() with a call to .Stop() for any code that is based on this + technique's example.

    +
    +

    Examples

    +
    +

    Pausing a decorative animation

    + +

    The following is the XAML UI. The animated object and the animation + behavior are both described in XAML, as is the control that users can + activate to pause the animation.

    + 
    <UserControl x:Class="PauseBouncyBall.MainPage"
+xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+ <UserControl.Resources>
+   <Storyboard x:Key="anim" RepeatBehavior="Forever" >
+       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Ball"
+          Storyboard.TargetProperty="(Canvas.Top)"
+        FillBehavior="HoldEnd" AutoReverse="True">
+               <EasingDoubleKeyFrame Value="100" KeyTime="00:00:01">
+                   <EasingDoubleKeyFrame.EasingFunction>
+                       <BounceEase Bounces="-1" EasingMode="EaseIn"/>
+                   </EasingDoubleKeyFrame.EasingFunction>
+               </EasingDoubleKeyFrame>
+           </DoubleAnimationUsingKeyFrames>
+   </Storyboard>
+ </UserControl.Resources>
+ <Canvas x:Name="LayoutRoot" Background="White" Height="600" Width="800">
+   <Ellipse Name="Ball" Fill="Red" Width="20" Height="20" Canvas.Top="200">
+       <Ellipse.RenderTransform>
+           <TransformGroup>
+               <TranslateTransform/>
+           </TransformGroup>
+       </Ellipse.RenderTransform>
+   </Ellipse>
+   <Button HorizontalAlignment="Left" Width="200" Click="Button_Click">Stop the bouncy ball please!</Button>
+ </Canvas>
+</UserControl>
+
    +

    The following is the C# logic. One function is the "page" constructor, + which is what starts and loops the animation. The other function + is the event handler for the UI control (a button). The event handler + retrieves the animation definition from the page resources, and calls + the Pause method on the animation.

    + 
           public MainPage()
+       {
+           InitializeComponent();
+           (this.Resources["anim"] as Storyboard).Begin();
+       }
+       private void Button_Click(object sender, RoutedEventArgs e)
+       {
+           (this.Resources["anim"] as Storyboard).Pause();
+       }
+
    +

    This example is shown in operation in the working example of Pause Bouncy Ball.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. For Silverlight + content with moving, blinking, scrolling or auto-updating content + that is the result of a running Silverlight animation:
      2. +
    2. Check for a mechanism to stop the movement, blinking, scrolling + or auto-updating.
      3. +
    3. Check that the movement, blinking, scrolling or auto-updating + stops when the mechanism is activated and does not restart by itself.
      4. +
    4. For pause, check that the animation can be restarted using a start + mechanism.
      5. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL12.html b/techniques/silverlight/SL12.html new file mode 100644 index 0000000000..6b10614a9f --- /dev/null +++ b/techniques/silverlight/SL12.html @@ -0,0 +1,142 @@ +Pausing, Stopping, or Playing Media in Silverlight MediaElements

    Pausing, Stopping, or Playing Media in Silverlight MediaElements

    ID: SL12

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to create a control user interface + for the Silverlight MediaElement object. The controls + enable users to pause or stop the video to prevent the video images + on the MediaElement surface from moving, and stop + video-associated audio. These UI controls enable an interaction defined + in code event handlers. Each handler calls one of the following MediaElement methods:

    + +

    Note that by default, a MediaElement will start playing + its media as soon as the UI loads completely AND the media source file + is downloaded (or a certain buffer size is reached, in the case of + streaming media). Use the AutoPlay property to change + this default.

    +

    Examples

    +
    +

    Providing MediaElement controls in the UI

    + +

    This example has a UI definition in XAML and interaction logic in + C#.

    + 
    <UserControl x:Class="MediaElementControls.MainPage"
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ >
+  <Grid x:Name="LayoutRoot">
+      <StackPanel>
+          <MediaElement x:Name="media" Source="/xbox.wmv"
+         Width="300" Height="300" 
+         AutomationProperties.Name="Video of new Fable game for XBox"           
+      />
+          <Grid Name="UIControls">
+              <Grid.ColumnDefinitions>
+                  <ColumnDefinition Width="*" />
+                  <ColumnDefinition Width="*" />
+                  <ColumnDefinition Width="*"/>
+              </Grid.ColumnDefinitions>
+              <Grid.RowDefinitions>
+                  <RowDefinition Height="*" />
+                  <RowDefinition Height="Auto" />
+                  <RowDefinition Height="20" />
+              </Grid.RowDefinitions>
+              <Button Click="StopMedia" 
+   Grid.Column="0" Grid.Row="1" Content="Stop" />
+              <Button Click="PauseMedia" 
+   Grid.Column="1" Grid.Row="1" Content="Pause" />
+              <Button Click="PlayMedia" 
+   Grid.Column="2" Grid.Row="1" Content="Play" />
+              <Button Click="MuteMedia" 
+  Grid.Row="2" Grid.Column="0" Content="Mute" />
+              <TextBlock Name="VolumeLabel" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">Volume</TextBlock>
+              <Slider Height="20"
+          Value="{Binding Volume, Mode=TwoWay, ElementName=media}"
+          Minimum="0" Maximum="1"
+          Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
+              AutomationProperties.LabeledBy="{Binding ElementName=VolumeLabel}"/>
+          </Grid>
+      </StackPanel>
+  </Grid>
+</UserControl>
+
+private void StopMedia(object sender, RoutedEventArgs e)
+{
+    media.Stop();
+}
+private void PauseMedia(object sender, RoutedEventArgs e)
+{
+    media.Pause();
+}
+private void PlayMedia(object sender, RoutedEventArgs e)
+{
+    media.Play();
+}
+private void MuteMedia(object sender, RoutedEventArgs e)
+{
+    Button target = sender as Button;
+    // mute if not muted, unmute if already muted, in either case make sure the button content for text and accessibility info is updated
+    if (!media.IsMuted)
+    {
+        media.IsMuted = true;
+        target.Content = "Unmute";
+    }
+    else
+    {
+         media.IsMuted = false;
+         target.Content = "Mute";
+     }
+}
+
    +

    This example is shown in operation in the working example of Media Element Controls.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. The application + is expected to incorporate a MediaElement in the + user interface.
      2. +
    2. Check that interactive controls are available so that users can + pause or stop the media.
      3. +
    3. Check that when activated, the controls stop or pause the media.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL13.html b/techniques/silverlight/SL13.html new file mode 100644 index 0000000000..a15c5c0ef5 --- /dev/null +++ b/techniques/silverlight/SL13.html @@ -0,0 +1,299 @@ +Providing A Style Switcher To Switch To High Contrast

    Providing A Style Switcher To Switch To High Contrast

    ID: SL13

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to incorporate high contrast color + choices into a user interface visual design for Silverlight, by changing + the values of styles or templates, or changing values of individual + resources such as brushes or colors.

    +

    Silverlight styles and templates are produced in XAML. Silverlight + event handlers (such as the ones that engage the style switch) are + written in code, but are often wired through a method name reference + in the XAML. For more information on how to use templates, styles and + resources to change the appearance of Silverlight controls, see Control + Customization topic on MSDN.

    +

    Silverlight provides a built-in property that can determine whether + the hosting operating system is using a high contrast theme. This is + a Boolean value only; Silverlight API cannot determine any further + specifics about the theme choice, such as the colors being used or + the contrast ratio between the colors. Querying this property at application + startup is one possible trigger mechanism for applying high contrast + themes to Silverlight content. Another mechanism is to expose a control + (such as a button or text link) to the user, so that the user can engage + high contrast for a Silverlight application's content by activating + a control within the Silverlight application.

    +
    +

    Silverlight Toolkit themes and System Colors

    +

    An extension to the Silverlight core deliverables known as the Silverlight + Toolkit provides theming APIs and various themed styles for Silverlight + controls, including the core controls. Most of these themes are intended + for design purposes, but the Silverlight Toolkit also provides a System + Colors theme. The System Colors theme aligns the Silverlight theme + brushes or colors with those of the settings applied to the Microsoft + Windows operating system display options. When the user switches the + system themes to use a theme that is typically used for high contrast, + the underlying system brushes are redefined. A Silverlight application + that uses the System Colors theme also uses the now-redefined colors + in its UI, and will effectively use the same High Contrast colors that + are user-selected for all other display. How to use the Silverlight + Toolkit system themes is not described in this technique. However, + the Silverlight Toolkit theme system is a viable option for providing + high contrast as well as other more aesthetics-oriented UI experiences. + For more information about the Silverlight Toolkit, see Toolkit + site. The themes feature of Silverlight Toolkit is best explained + by Silverlight + Toolkit release notes (from a Microsoft-related blog).

    +
    +
    +

    Real-time changes not supported

    +

    + SystemParameters.HighContrast is an adequate trigger + for cases where high contrast is already engaged before the Silverlight + plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as + a trigger mechanism is that Silverlight does not detect the change + if it happens after the Silverlight plugin is loaded by the host HTML. + If Silverlight authors want to support real-time changes, they should provide a user-initiated + control option for changing to high contrast in Silverlight UI rather + than solely relying on SystemParameters.HighContrast.

    +
    +
    +

    Silverlight and CSS

    +

    Silverlight content does not use information that comes from a CSS + style as applied to the hosting HTML page. Therefore, techniques as + implemented by browser user agents and described by G148: + Not specifying background color, not specifying text color, and not + using technology features that change those defaults or G156: + Using a technology that has commonly-available user agents that can + change the foreground and background of blocks of text do not work + for Silverlight content, and C29 does + not directly apply. For example, the Internet Explorer settings under + Options / Appearance do not affect the fonts or contrast in the Silverlight + content area.

    +
    +

    Examples

    +
    +

    Silverlight application designed with brush resources + and template resources that enable a high contrast switch

    + +

    The example "application" for illustration is just text, + a button and border. The concepts shown in the example can scale to + any complexity of UI, including to applications that have thousands + of lines of XAML. Note that the visual appearance of the button is + already using a high contrast theme choice for its default state, to + assure that the control is visible to anyone that requires a high contrast + theme to see parts of the user interface per G174. + To keep the example simple, the visual states (behaviors) associated + with mouse-over, click, etc. have not been restyled for high contrast. + Only the base appearance is changed. The example also shows a technique + of storing original theme information and restoring it in response + to user request.

    + 
    <UserControl x:Class="HighContrast.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+   mc:Ignorable="d"
+   d:DesignHeight="300" d:DesignWidth="400">
+   <UserControl.Resources>
+       <SolidColorBrush x:Key="ArtsyBrush1" Color="Salmon"/>
+       <SolidColorBrush x:Key="ArtsyBrush2" Color="Bisque"/>
+       <SolidColorBrush x:Key="ArtsyBrush3" Color="DarkSalmon"/>
+       <SolidColorBrush x:Key="ArtsyBrush4" Color="Blue"/>
+       <Color x:Key="ArtsyBrush1Restore">Salmon</Color>
+       <Color x:Key="ArtsyBrush2Restore">Bisque</Color>
+       <Color x:Key="ArtsyBrush3Restore">DarkSalmon</Color>
+       <Color x:Key="ArtsyBrush4Restore">Blue</Color>
+       <RadialGradientBrush x:Key="ArtsyGradient">
+           <GradientStop Color="AliceBlue" Offset="0"/>
+           <GradientStop Color="LightBlue" Offset="0.4"/>
+           <GradientStop Color="#D00000EE" Offset="1"/>
+       </RadialGradientBrush>
+       <Style x:Key="ArtsyButton" TargetType="Button">
+           <Setter Property="Template">
+               <Setter.Value>
+                   <ControlTemplate TargetType="Button">
+                       <Border CornerRadius="4"
+                          BorderBrush="{StaticResource ArtsyBrush4}" BorderThickness="4">
+                           <Grid>
+                               <Rectangle Fill="{StaticResource ArtsyGradient}"
+                                 RadiusX="2" RadiusY="2"/>
+                               <ContentPresenter Content="{TemplateBinding Content}"
+                               ContentTemplate="{TemplateBinding ContentTemplate}"/>
+                           </Grid>
+                           
+                       </Border>
+                   </ControlTemplate>
+               </Setter.Value>
+           </Setter>
+       </Style>
+       <Style x:Key="HighConButton" TargetType="Button">
+           <Setter Property="Control.Background" Value="White"/>
+           <Setter Property="BorderBrush" Value="Black"/>
+           <Setter Property="Foreground" Value="Black"/>
+       </Style>
+   </UserControl.Resources>
+   <Border BorderBrush="{StaticResource ArtsyBrush1}" BorderThickness="4">
+       <StackPanel x:Name="LayoutRoot" Background="{StaticResource ArtsyBrush2}">
+           <TextBlock
+             Foreground="{StaticResource ArtsyBrush3}">High contrast demo</TextBlock>
+           <Button Name="Switcher" Click="Switcher_Click"
+             Width="160" Style="{StaticResource HighConButton}">
+              <TextBlock Text="Switch to high contrast"/>
+           </Button>
+           <Button Name="Switchback" Click="Switchback_Click"
+             Width="160" Style="{StaticResource HighConButton}" IsEnabled="False">
+               <TextBlock Text="Switch to regular theme"/>
+           </Button>
+       </StackPanel>
+   </Border>
+</UserControl>
+
    +

    The second listing is the C# code for the event handlers.

    + 
           private void Switcher_Click(object sender, RoutedEventArgs e)
+       {
+           ChangeToHighCon();
+       }
+       private void ChangeToHighCon()
+       {
+           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color = Colors.Black;
+           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color = Colors.White;
+           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color = Colors.Black;
+           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color = Colors.Black;
+           Switcher.IsEnabled = false;
+           Switchback.IsEnabled = true;
+       }
+       private void RestoreRegularCon()
+       {
+           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color =
+             (Color)this.Resources["ArtsyBrush1Restore"];
+           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color =
+             (Color)this.Resources["ArtsyBrush2Restore"];
+           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color =
+           (Color)this.Resources["ArtsyBrush3Restore"];
+           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color =
+             (Color)this.Resources["ArtsyBrush4Restore"];
+           Switcher.IsEnabled = true;
+           Switchback.IsEnabled = false;
+       }
+       private void Switchback_Click(object sender, RoutedEventArgs e)
+       {
+           RestoreRegularCon();
+       }
+   }
+
    +

    The following images show the original, and the applied high contrast + settings.

    +
    + + +
    Low contrast image with "switch to high contrast" button enabled
    + +
    +
    + + +
    High contrast image with "switch to regular theme" button enabled
    + +
    +

    This example is shown in operation in the working example of High Contrast.

    + +
    +
    +

    Use SystemParameters.HighContrast to detect system high + contrast settings at application startup

    + +

    This example uses the same UI and style definitions as the previous + example. The sole addition a case statement that is added to the primary + page constructor of the UI (defined in C#). The added code is everything + other than the InitializeComponent() call (which is part of Silverlight + infrastructure). Note that the added code calls a user-defined function + ChangeToHighCon(), which is the same function and behavior as shown + in Example 1 for the user-initiated high contrast switch.

    + 
           public MainPage()
+       {
+           InitializeComponent();
+           if (SystemParameters.HighContrast)
+           {
+               ChangeToHighCon();
+           }
+       }
+
    + +
    +

    Tests

    +
    +

    UI option for style switching

    +

    Procedure

    +

    To test a Silverlight UI option for style switching (Example 1):

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Check for a control that indicates it will change the application's + appearance to use a high-contrast theme.
      3. +
    3. Activate the control. Check that the Silverlight application's + user interface color themes change to an appearance that uses at + least a 4.5:1 contrast ratio per Success + Criterion 1.4.3 (Contrast (Minimum)).
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +
    +

    HighContrast API

    +

    Procedure

    +

    To test the HighContrast API (Example 2):

    +
      +
    1. Use operating system settings (such as Ctrl+LeftShift+PrtScn shortcut + on Windows 7) to enter high contrast mode prior to opening the test + page.
      2. +
    2. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      3. +
    3. Check that the Silverlight application's user interface color + themes change to an appearance that uses at least a 4.5:1 contrast + ratio per Success + Criterion 1.4.3 (Contrast (Minimum)).
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +
    +

    UI option for enhanced contrast

    +

    Procedure

    +

    To test a Silverlight UI option for style switching for enhanced contrast:

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Check for a control that indicates it will change the application's + appearance to use an enhanced contrast theme.
      3. +
    3. Activate the control. Check that the Silverlight application's + user interface color themes change to an appearance that uses at + least a 7:1 contrast ratio per Success + Criterion 1.4.6 Contrast (Enhanced).
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL14.html b/techniques/silverlight/SL14.html new file mode 100644 index 0000000000..44eeb14973 --- /dev/null +++ b/techniques/silverlight/SL14.html @@ -0,0 +1,278 @@ +Providing Custom Control Key Handling for Keyboard Functionality + in Silverlight

    Providing Custom Control Key Handling for Keyboard Functionality + in Silverlight

    ID: SL14

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to implement built-in handling + of key events in a custom control. If a custom control is correctly + implemented, then any Silverlight applications that include the control + can rely on the built-in key handling for some or all of the desired + keyboard equivalence of a control's functionality.

    +

    Defining a custom control requires that the control author write a + default template for the control and also the initialization logic, + including the default implementations for built-in keyboard equivalence. + Typically, control authors provide keyboard equivalence for any actions + that can be activated by a mouse click on the control surface, and + that are not already providing a keyboard equivalence through the implementation + of a composite part.

    +

    All input events report a specific source that is communicated to + handler code as an event parameter, so that the application author + can identify which element in their Silverlight UI was being interacted + with, and the application can perform an action that is relevant to + that user input. In the case of mouse events, the event source is the + element that the mouse pointer is over at the time. In the case of + key events, the event source is the element that has focus. The element + that has focus is visually indicated so that the user knows which element + they are interacting with (see ). Assistive technologies + often have parallel conventions whereby the user is made aware of which + element is visually focused and is the current input scope presented + by the assistive technology.

    +
    +

    Browser hosts and keyboard events

    +

    Silverlight is hosted as a plug-in inside a browser host. The Silverlight + runtime only receives the input events that the browser host forwards + to hosted plug-ins through a browser-specific program access layer. + Occasionally the browser host receives input that the browser host + itself handles in some way, and does not forward the keyboard event. + An example is that a Silverlight application hosted by an Internet + Explorer browser host on Windows operating system cannot detect a press + of the ALT key, because Internet Explorer processes this input and + performs the action of bringing keyboard focus to the Internet Explorer + menu bar. Silverlight authors might need to be aware of browser-specific + input handling models and not rely on key events for keys that are + essentially reserved for use by a browser host. For more information, + see Keyboard + Support.

    +

    Application authors should choose keys that avoid browser conflicts, + but still are a natural choice for an accelerator. Using the CTRL key + as a modifier is a convention that is frequently used in existing Silverlight + applications.

    +
    +
    +

    Informing users of which keys to use for keyboard equivalence

    +

    If a control supports user interaction, which key to use to engage + the keyboard equivalent behavior is not always obvious. One way to + inform users of the possible key options that a control supports is + to author an AutomationProperties.HelpText value in + the application UI that gives instructions such as "Press the + plus key to increment value". This is up to the application author + to do; the control definitions do not provide a means to set HelpText + by default, because any display technique for end user help is potentially + too application-specific to be encapsulated in control definitions. + Application authors might also consider using tooltips, providing a + menu framework that visually indicates the key associations (perhaps + with the Windows key-underlined convention), providing a generalized + application Help, or displaying plain text in the user interface.

    +
    +
    +

    The On* method pattern in Silverlight

    +

    Silverlight classes often have methods that follow the naming pattern On* where + the star is a string that also identifies an event. These On* methods + are prewired event handlers, defined as virtual methods so that subclasses + can override them. A consumer of a control class can change or augment + the default behavior associated with that event by overriding the method, + and typically also calls the base implementation so that the base functionality + is preserved. This principle is illustrated in Example 1 by the overrides + of OnGotFocus and OnLostFocus. Controls that introduce new events should + consider also exposing a virtual On* method that pairs with the event, + so that consumers of the custom control can use the same pattern.

    +
    +

    Examples

    +
    +

    KeyNumericUpDown Control That Handles Arrow Key Equivalence + for + and - Buttons

    + +

    This example implements a custom Silverlight control that displays + an integer value, and can increment or decrement the integer value + based on user actions. When a user interacts with the control, the + user can click the "+" and "-" buttons that are + component parts of the control. The "+" and "-" button + parts are deliberately not in the Silverlight tab sequence, because + this is intended to be a complete control, where only the control itself + (and not its constituent parts) are focusable and are reported as an + element to the accessibility framework. To provide keyboard equivalence, + the control defines a KeyUp handler. The design of + the control treats an Up Arrow key press as equivalent to activating + the "+" button, and the Down Arrow key as equivalent to activating + the "-" button. The control implementation reinforces this + behavior by having the button Click event handlers + and the cases of the KeyUp handler call the same underlying + helper functions (Increment() and Decrement()).

    +

    Handling the + and - keys as alternate or additional keyboard equivalents + for the actions is also possible (if that is desired, handler would + check for Key.Add or Key.Subtract values).

    +

    The following is the XAML-defined control template for this control.

    + 
       <Style TargetType="local:KeysNumericUpDown">
+       <Setter Property="BorderThickness" Value="1"/>
+       <Setter Property="Height" Value="22"/>
+       <Setter Property="BorderBrush">
+           <Setter.Value>
+               <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
+                   <GradientStop Color="#FFA3AEB9" Offset="0"/>
+                   <GradientStop Color="#FF8399A9" Offset="0.375"/>
+                   <GradientStop Color="#FF718597" Offset="0.375"/>
+                   <GradientStop Color="#FF617584" Offset="1"/>
+               </LinearGradientBrush>
+           </Setter.Value>
+       </Setter>
+       <Setter Property="Template">
+           <Setter.Value>
+               <ControlTemplate TargetType="local:KeysNumericUpDown">
+                   <Grid x:Name="CompositionRoot">
+                       <Grid.ColumnDefinitions>
+                           <ColumnDefinition/>
+                           <ColumnDefinition/>
+                       </Grid.ColumnDefinitions>
+                       <TextBox x:Name="Text" IsTabStop="False" AcceptsReturn="False"
+ BorderThickness="0" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}"
+ FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}"
+ FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="20"
+ TextAlignment="Right" VerticalAlignment="Center"  TextWrapping="NoWrap" Text="{TemplateBinding Value}">
+                               <TextBox.Style>
+                                   <Style TargetType="TextBox">
+                                       <Setter Property="Template">
+                                           <Setter.Value>
+                                               <ControlTemplate TargetType="TextBox">
+                                                   <ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
+                                               </ControlTemplate>
+                                           </Setter.Value>
+                                       </Setter>
+                                   </Style>
+                               </TextBox.Style>
+                           </TextBox>
+                       <StackPanel Orientation="Vertical" Grid.Column="1">
+                       <Button Width="18" Height="18" IsTabStop="False" x:Name="plusButton">+</Button>
+                       <Button Width="18" Height="18" IsTabStop="False" x:Name="minusButton">-</Button>
+                       </StackPanel>
+                       <Border x:Name="FocusVisualElement" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" 
+                       CornerRadius="1,1,1,1" IsHitTestVisible="False" Opacity="0"/>
+                   </Grid>
+               </ControlTemplate>
+           </Setter.Value>
+       </Setter>
+   </Style>
+
    +

    The following is the implementation of the control class. Overrides + of the base class are omitted for clarity, as is automation support. + Note the event wiring in OnApplyTemplate; this is + a common pattern for custom control definitions.

    + 
       public class KeysNumericUpDown : UpDownBase<double>
+   {
+       Grid root;
+       Button plusButton;
+       Button minusButton;
+       Border focusRect;
+       public KeysNumericUpDown()
+       {
+           this.DefaultStyleKey = typeof(KeysNumericUpDown);
+       }
+       public override void OnApplyTemplate()
+       {
+           base.OnApplyTemplate();
+           root = this.GetTemplateChild("CompositionRoot") as Grid;
+           root.KeyUp += new KeyEventHandler(Handle_Accelerators);
+           plusButton = this.GetTemplateChild("plusButton") as Button;
+           minusButton = this.GetTemplateChild("minusButton") as Button;
+           plusButton.Click += new RoutedEventHandler(plusButton_Click);
+           minusButton.Click += new RoutedEventHandler(minusButton_Click);
+           focusRect = this.GetTemplateChild("FocusVisualElement") as Border;
+       }
+       void plusButton_Click(object sender, EventArgs e)
+       {
+           Increment();
+       }
+       void minusButton_Click(object sender, EventArgs e)
+       {
+           Decrement();
+       }
+       private void Increment()
+       {
+           this.Value += 1;
+       }
+       private void Decrement()
+       {
+           this.Value -= 1;
+       }
+       private void Handle_Accelerators(object sender, KeyEventArgs e)
+       {
+           switch (e.Key)
+           {
+               case (Key.Up):
+                   this.Value -= 1;
+                   e.Handled = true;
+                   break;
+               case (Key.Down):
+                   this.Value += 1;
+                   e.Handled = true;
+                   break;
+               default: break;
+           }
+       }
+       protected override void OnGotFocus(RoutedEventArgs e)
+       {
+           base.OnGotFocus(e);
+           if (focusRect != null)
+           {
+               focusRect.Opacity = 1;
+           }
+       }
+       protected override void OnLostFocus(RoutedEventArgs e)
+       {
+           base.OnLostFocus(e);
+           focusRect.Opacity = 0;
+       }
+   }
+
    +

    When this control is included in application UI, the usage is very + simple. Note that there are no key handlers on this instance; the + necessary key handling to wire up the increment/decrement logic is + already built-in to all instances of the control.

    + 
    <local:KeysNumericUpDown Width="100" Height="45"/>
+
    +

    This example is shown in operation in the working example of Numeric Up / Down control.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Press TAB key to move keyboard focus to various element parts + of the user interface, and in particular to areas that are known + to be custom control implementations.
      3. +
    3. Check that custom key commands exist for all these user interface + actions and that these key commands are made known to the user.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL15.html b/techniques/silverlight/SL15.html new file mode 100644 index 0000000000..2038402bca --- /dev/null +++ b/techniques/silverlight/SL15.html @@ -0,0 +1,226 @@ +Providing Keyboard Shortcuts that Work Across the Entire Silverlight + Application

    Providing Keyboard Shortcuts that Work Across the Entire Silverlight + Application

    ID: SL15

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to introduce key handling that + exists at the application root level of a Silverlight application, + rather than per-element key handling. Event handling at the application + level as opposed to at the element level is one way to address key + equivalence. The key events provide key equivalence for particular + user interface elements that a user might otherwise interact with using + a mouse. This technique is related to events in the Silverlight programming + model, as opposed to in the HTML DOM.

    +

    Handling key events at the root level of an application rather than + only on the element that was the "source" of a key event + is possible because of a Silverlight programming model feature known + as event routing. For more information on event routing and how it + works, see Events + Overview for Silverlight.

    +

    This technique demonstrates a "menu" approach to key handling + and user interaction. This technique is presented as a companion to , which + can be thought of as an "accelerator key/hotkey" approach. + The "menu" approach towards keyboard equivalence is perhaps + just as common as the "hotkey" approach. It is often simpler + to document a menu's key equivalence in a user interface than it is + to document key equivalents of particular regions of an application, + or to communicate to users that where the current focus is placed is + relevant to how keyboard keys are interpreted by the application, even + if the key action is relevant to only one of the controls in an interface. + If all keys are handled at the top level, the specific focused element + is no longer relevant.

    +

    In order to originate a key event that Silverlight application code + can detect, some element in the Silverlight application must have keyboard + focus. One way to assure keyboard focus is to focus the Silverlight + plug-in as a whole, as called from within an event handler for Application.Startup. + This is shown in the examples.

    +

    If an application does handle keys at top level, care should be taken + to not interfere with specific text entry control behavior, such as + typing into a TextBox. To avoid interactions, the + design of key equivalence at the top level of an application typically + relies on combinations with key modifiers. The Control/CTRL key is + a key that is often used for this purpose. Application authors should + also be aware of the implications of browser hosts that might handle + the key event at HTML DOM level without making that event available + to the Silverlight programming surface. For more information on this + concept, see "Keyboard Events and Browser Hosts" section + of Keyboard + Support Overview for Silverlight on MSDN.

    +

    Application authors are responsible for correctly documenting the + accelerator keys that are pertinent for their application. There are + a variety of techniques for documenting user interface actions that + are not described here. One possible suggestion is to include a generalized "Help" button + that appears early in the application's reading order, which is focusable + and has an AutomationProperties.Name value available as the text content + or equivalent. Such a button can be activated without knowing any of + the application's accelerator keys, and the activation result could + be a new text element that enumerates the possible keys. For example, + the application could display a Silverlight Popup with + the following content:

    +
    + + +
    A screen shot of a sample Popup control that documents specific accelerator keys
    + +
    +

    Examples

    +
    +

    Key handling by application root UserControl

    + +

    This example has only one interactive control for simplicity, but + with two possible key combinations for that control being handled as + actions. The purpose and explanation of the control is reported through + a TextBlock that is associated with the labeled control + through use of AutomationProperties.LabeledBy in + XAML. The control being illustrated is MultiScaleImage, + which supports a zoom-in metaphor for examining an image that redraws + at increasingly fine resolutions. For more information on MultiScaleImage, + see Deep + Zoom on MSDN.

    +

    The following is the startup logic at application level that sends + focus to Silverlight in the HTML DOM.

    + 
           private void Application_Startup(object sender, StartupEventArgs e)
+       {
+           this.RootVisual = new MainPage();
+           //bring overall DOM focus to Silverlight area, so that keys are captured by Silverlight
+           System.Windows.Browser.HtmlPage.Plugin.Focus();
+       }
+
    +

    The following is XAML UI for the main page.

    + 
     <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
+    x:Class="ApplicationLevelKeyHandling.MainPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    d:DesignHeight="300" d:DesignWidth="400" KeyUp="UserControl_KeyUp">
+
+    <StackPanel x:Name="LayoutRoot" Background="White">
+        <Button Name="bInstructions" Click="bInstructions_Click">Get Help</Button>
+        <Popup Name="p">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <TextBlock FontWeight="Bold">Key</TextBlock>
+                <TextBlock FontWeight="Bold" Grid.Column="1">Action</TextBlock>
+                <TextBlock Grid.Row="1">Ctrl + Alt + Plus</TextBlock>
+                <TextBlock Grid.Row="1" Grid.Column="1">Zooms in on the image</TextBlock>
+                <TextBlock Grid.Row="2">Ctrl + Alt + Minus</TextBlock>
+                <TextBlock Grid.Row="2" Grid.Column="1">Zooms out of the image</TextBlock>
+                <Button Grid.Row="3" Click="button1_Click">Close this Help</Button>
+            </Grid>
+        </Popup>
+        <MultiScaleImage x:Name="deepZoomObject"
+         Source="source/dzc_output.xml" 
+         MouseLeftButtonDown="DeepZoomObject_MouseLeftButtonDown"
+         MouseRightButtonDown="DeepZoomObject_MouseRightButtonDown"
+         AutomationProperties.LabeledBy="{Binding ElementName=lblInstructions}"/>
+    </StackPanel>
+ </UserControl>
    +

    The following is the C# logic. Note how the key handlers and mouse + handlers reference the same logic function.

    + 
            private void UserControl_KeyUp(object sender, KeyEventArgs e)
+        {
+            if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control &&
+                (Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt &&
+                e.Key == Key.Add)
+            {
+                DZIn();
+            }
+            if ((Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control &&
+                (Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt &&
+                e.Key == Key.Subtract)
+            {
+                DZOut();
+            }
+        }
+        private void DeepZoomObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        {
+            DZIn();
+        }
+        private void DeepZoomObject_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
+        {
+            e.Handled = true;
+            DZOut();
+        }
+        private void DZIn()
+        {
+            this.deepZoomObject.ZoomAboutLogicalPoint(3, .5, .5);
+        }
+        private void DZOut()
+        {
+            this.deepZoomObject.ZoomAboutLogicalPoint(.333, .5, .5);
+        }
+        private void bInstructions_Click(object sender, RoutedEventArgs e)
+        {
+
+            // Set where the popup will show up on the screen.
+            p.VerticalOffset = 25;
+            p.HorizontalOffset = 25;
+            // Open the popup.
+            p.IsOpen = true;
+        }
+        void button1_Click(object sender, RoutedEventArgs e)
+        {
+            // Close the popup.
+            p.IsOpen = false;
+
+        }
    +

    This example is shown in operation in the working example of Application Level Key Handling.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Verify that keyboard focus is somewhere within the Silverlight + content area, and not elsewhere in the hosting HTML or hosting browser + user interface. If necessary, use TAB key to traverse the overall + HTML tab sequence until an interface element within Silverlight displays + a visual focus indicator.
      3. +
    3. Verify that the keys to be used as keyboard equivalent action + triggers for the application as a whole are documented for users. + For example, text or long text alternative documents key / key combinations + and short descriptions of actions.
      4. +
    4. Verify that pressing the application-specific keys results in + the action as expected in the application.
      5. +
    5. Move keyboard focus throughout other areas of the Silverlight + application, and verify that the same keys continue to function application-wide.
      6. +
    +
    +

    Expected Results

    +

    #3, #4 and #5 are true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL16.html b/techniques/silverlight/SL16.html new file mode 100644 index 0000000000..241b64595f --- /dev/null +++ b/techniques/silverlight/SL16.html @@ -0,0 +1,120 @@ +Providing Script-Embedded Text Captions for MediaElement Content

    Providing Script-Embedded Text Captions for MediaElement Content

    ID: SL16

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use text captioning that is + embedded in the stream with media displayed in a Silverlight MediaElement, + and present that text captioning in a separate Silverlight control + or text element.

    +

    This particular technique uses scripting files with a TimelineMarkers collection + that are embedded directly within the media file. When text captioning + is embedded directly in the streams, synchonization of the scripting + stream versus the video content stream is done automatically by the MediaElement component. + Each time the MarkerReached event fires, that is an + indication that a synch point in the video that corresponds to a script + marker entry has been reached. Silverlight application authors can + obtain the text from the relevant timeline marker entry through their + event handler implementations, and can display captions in the user + interface area where the text captions are displayed. Typical Silverlight + controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox, + or RichTextBox. A typical interface design would place + the caption-display control in close proximity to the MediaElement control + that is being captioned, for example might place the captions directly + underneath the MediaElement "screen".

    +

    Script-embedded captions are captions that are stored directly in + the media file as metadata, rather than as a separate file. For information + about techniques for captions in separate files, see .

    +
    +

    Tools

    +

    Producing the media file with TimelineMarkers captions + directly in embedded scripting can be accomplished using the Microsoft + Expression Encoder tool. Online help for the procedure of encoding + scripting with text captions in the stream are available in the offline + Help file that installs with the Microsoft Expression 4 Encoder products. + For more information, see Expression + Encoder Pro Overview.

    +

    There is a public + API for introducing Markers into a WMV file, as part of the Windows + Media Format SDK. Using Expression Encoder is the way that the task + of directly embedding TimelineMarkers is presented + and taught in Microsoft's available instructional material on Silverlight. + However, because the mechanism is public, it is possible that other + tools exist or will exist that can also produce media with script-encoded TimelineMarkers.

    +
    +

    Examples

    +
    +

    MediaElement handles MarkerReached, displays marker text + in existing TextBox

    + +

    This example has a UI definition in XAML and interaction logic in + C#. The following is the basic UI in XAML. This example is deliberately + simple and does not include AutomationProperties for + identification or user instructions. The most relevant part of this + example is that the Silverlight author declares a handler for the event MarkerReached. + This event fires potentially hundreds of times, once for each caption + in the stream. Each time the event fires, the event handler runs and + adds the text to the dedicated TextBox in the user + interface.

    + 
    <UserControl x:Class="MediaTimelineMarkers.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <MediaElement MarkerReached="OnMarkerReached"
+       HorizontalAlignment="Left"
+       Source="/spacetime.wmv"
+       Width="300" Height="200" />
+       <ScrollViewer>
+           <TextBox Name="captionText" Height="40"
+           IsReadOnly="true" AcceptsReturn="true"/>
+       </ScrollViewer>
+   </StackPanel>
+ </UserControl>
+
+private void OnMarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
+{
+   captionText.Focus();
+   captionText.SelectedText = e.Marker.Text.ToString() + "\n";
+}
+
    +

    This example is shown in operation in the working example of Media Timeline Markers.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. The application + plays media that is expected to have text captioning.
      2. +
    2. Check that a text area in the user interface shows captions for + the media.
      3. +
    +
    +

    Expected Results

    +

    # 2 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL17.html b/techniques/silverlight/SL17.html new file mode 100644 index 0000000000..1fb9871206 --- /dev/null +++ b/techniques/silverlight/SL17.html @@ -0,0 +1,144 @@ +Providing Static Alternative Content for Silverlight Media Playing + in a MediaElement

    Providing Static Alternative Content for Silverlight Media Playing + in a MediaElement

    ID: SL17

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to replace a Silverlight MediaElement with + static alternative non-media content that is not time-based. The static + alternative content replaces the media in the same or a nearby user + interface region of the Silverlight application.

    + +

    A Silverlight application user interface can be adjusted at run time + by removing elements from the visual tree, and adding new elements + to the visual tree. In this case, the user interface is designed to + provide a control that the user activates to display the static alternative + content, which is often a control that displays text, or a text element.

    +

    Examples

    +
    +

    MediaElement playing audio, replace with transcript

    + +

    This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement + has no visual representation itself and is 0x0 size because it plays audio only. As a simple placeholder, this + example displays the text "Library of Congress Audio" to represent the media element as something visible in the + UI. In addition to Play/Stop controls, this interface includes a Display Transcript button. Activating the + button displays static text that represents the transcript of the audio. The following is the basic UI in XAML.

    + 
    <UserControl x:Class="ReplaceAudioWithTranscriptText.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   xmlns:sys="clr-namespace:System;assembly=mscorlib">
+   <UserControl.Resources>
+       <sys:String x:Key="transSpeakerName">Matt Raymond: </sys:String>
+       <sys:String x:Key="transText">This is Matt Raymond at the Library of Congress.
+Each year thousands of book lovers of all ages visit the nation's capital to celebrate the joys 
+of reading and lifelong literacy, at the Library of Congress National Book Festival. 
+For the first time in the festival's nine year history, President Barack Obama and 
+First Lady Michelle Obama will serve as honorary chairs of this free event. </sys:String>
+   </UserControl.Resources>
+   <StackPanel x:Name="LayoutRoot" Background="White" >
+       <TextBlock FontSize="30" Foreground="Blue">Library of Congress Audio</TextBlock>
+       <MediaElement Source="/locintro.wma" AutoPlay="False" Name="player" Height="0" />
+       <StackPanel Orientation="Horizontal" Name="ControlBar">
+           <Button Name="Play" Click="Play_Click">Play</Button>
+           <Button Name="Stop" Click="Stop_Click">Stop</Button>
+           <Button Name="TextAlt" Click="TextAlt_Click">Display Transcript</Button>
+       </StackPanel>
+   </StackPanel>
+</UserControl>
+
    +

    The following is the C# logic.

    + 
       public partial class MainPage : UserControl
+   {
+       RichTextBox rtb;
+       bool transDisplayed=false;
+       public MainPage()
+       {
+           InitializeComponent();
+           rtb = new RichTextBox();
+           rtb.IsReadOnly = true;
+           Paragraph p = new Paragraph();
+           Run speakerName = new Run();
+           speakerName.Text = this.Resources["transSpeakerName"] as String;
+           speakerName.FontWeight = FontWeights.Bold;
+           Run transText = new Run();
+           transText.Text = this.Resources["transText"] as String;
+           p.Inlines.Add(speakerName);
+           p.Inlines.Add(transText);
+           rtb.Blocks.Add(p);
+       }
+       private void Play_Click(object sender, RoutedEventArgs e)
+       {
+           player.Play();
+           Play.IsEnabled = false;
+       }
+       private void Stop_Click(object sender, RoutedEventArgs e)
+       {
+           player.Stop();
+           Play.IsEnabled = true;
+       }
+       private void TextAlt_Click(object sender, RoutedEventArgs e)
+       {
+           Panel parent = (player.Parent as Panel);
+           if (!transDisplayed)
+           {
+               DisplayTranscript();
+               (sender as Button).Content = "Hide Transcript";
+               transDisplayed = true;
+           }
+           else
+           {
+               parent.Children.Remove(rtb);
+               (sender as Button).Content = "Display Transcript";
+               transDisplayed = false;
+           }
+       }
+       private void DisplayTranscript()
+       {
+           Panel parent = (player.Parent as Panel);
+           parent.Children.Add(rtb);
+       }
+
    +

    This example is shown in operation in the working example of Replace Audio With Transcript.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. That + application has audio-only media content and is expected to supply + a text alternative, or has media that is expected to be replaced + entirely with a transcript or similar text alternative.
      2. +
    2. Check for a control that indicates that activating it will supply + static alternative content for the media. Activate the control.
      3. +
    3. Verify that the media control is replaced with alternate content, + and that assistive technologies represent the change to the user + interface.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL18.html b/techniques/silverlight/SL18.html new file mode 100644 index 0000000000..2197ebbd0e --- /dev/null +++ b/techniques/silverlight/SL18.html @@ -0,0 +1,112 @@ +Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name

    Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name

    ID: SL18

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the Silverlight AutomationProperties.Name property + to provide a short text alternative for controls that do not otherwise + contain text. The text is intended to provide human-readable identifiers + and short-descriptions or user instructions for accessibility frameworks, + which can then be reported to assistive technologies.

    +

    "Control" in this technique refers to any element that is + based on the Silverlight Control class, and is keyboard-focusable + either by user action or calling focus to the control programmatically. + The non-text control in question might be something like a button that + communicates information using only an icon or image. For example, + a triangle image rotated 90 degrees clockwise is commonly used in many + user interfaces to indicate a "Play" button control. This "Play" icon + mimics interface metaphors from many non-software consumer products, + and is often presented in a user interface without any nearby visible + text information that explains the purpose of the control. Another + example is a "thumbnail" metaphor where a small image serves + as a control that can be activated, and where the action results in + the display of a larger version of the same image, or enters an editing + mode that loads the same image.

    +

    For cases of controls such as buttons that invoke actions, the text + alternative also identifies link purpose.

    +

    In Silverlight, a text-only identifier for any control can be set + specifically as AutomationProperties.Name on the parent + control. Silverlight control compositing techniques enable either per-control + images that are specified by the application author, or a general-purpose + image/icon for a control that is part of the control's template and + displays that way by default. The Silverlight API AutomationProperties.Name directly + sets Name in the UI Automation tree. The properties + in the UI Automation tree are reported to assistive technologies, when + the assistive technology implements behavior that acts as a UI Automation + client (or as an MSAA client, which relies on the UIA-MSAA bridge).

    +

    Examples

    +
    +

    Applying a text alternative for an icon Button with + XAML

    + +

    Application authors can specify the AutomationProperties.Name attribute + on the Button element, and leave accessibility information + for the composited Image content unspecified. It is + the button and its action that is relevant to users, not the non-interactive Image component. + The value provided for AutomationProperties.Name is + a meaningful text alternative for the action conveyed by the button's + icon/image, but where the functionality is conceptually embodied in + the button and not its images or other constituent parts in compositing + or visual design.

    + 
     <Button
+   Height="20" Width="50"
+   AutomationProperties.Name="Pause Media">
+   <Image Height="12" Width="12" Source="/icon_pause.png"/>
+ </Button>
+
    +

    This example is shown in operation in the working example of Button Text Alternative.

    + +
    +

    Tests

    +
    +

    Accessibility framework view

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Use a verification tool that is capable of showing the full accessibility + framework tree, and an object’s "Name" text alternative + as part of the tree. Verify that all interactive elements such as + buttons without visible text provide a human-readable text identifier "Name" in + the automation tree.
      3. +
    +
    +

    Expected Results

    +

    #2 is true.

    +
    +
    +

    Screen Reader

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Engage the screen reader. Press TAB to traverse the tab sequence + inside the Silverlight content area to focus to a composite control + that has no visible text, but has an AutomationProperties.Name applied.
      3. +
    3. Check that the "Name" as applied to the control instance, + along with the class name of the named control, is read by the screen + reader.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL19.html b/techniques/silverlight/SL19.html new file mode 100644 index 0000000000..74fa115251 --- /dev/null +++ b/techniques/silverlight/SL19.html @@ -0,0 +1,176 @@ +Providing User Instructions With AutomationProperties.HelpText in + Silverlight

    Providing User Instructions With AutomationProperties.HelpText in + Silverlight

    ID: SL19

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    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, + and to show the practice of storing that information in a dedicated + property of the Silverlight-supported UI Automation support system. + The technique can also be used on text controls (such as TextBox), + for cases where the control text itself does not provide enough context + to suggest an appropriate user action.

    +

    The relevant UI Automation property is named HelpText, + to connote its possible usage to provide imperative instructions for + interactive elements. However, the same property can instead be used + for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly + sets HelpText in the UI Automation tree. The properties + in the UI Automation tree are reported to assistive technologies, when + the assistive technology implements behavior that acts as a UI Automation + client.

    +

    + AutomationProperties.HelpText can be set in code, + but is most typically set as an attribute in XAML that defines a Silverlight + UI.

    +

    The same information as is present in AutomationProperties.HelpText could + also be useful to sighted users. In this case, the same text could + be displayed in a Silverlight ToolTip control. + The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in + conjunction is because the Tooltip information is + not introduced into the runtime accessibility framework information + set. This is because a tooltip is transient and not conventionally + focusable. In Silverlight programming, a useful technique for sharing + the same resource is to combine the Silverlight data binding feature + with the .NET Framework embedded resource feature. For more information + on combining Silverlight data binding and resources for common string + sources, see How + to Make XAML Content Localizable.

    +

    Examples

    +
    +

    Applying a long text alternative for an Image with XAML

    + +

    To introduce the necessary information to Silverlight XAML for an + application UI definition, specify the AutomationProperties.HelpText attribute + on the Image element. The value provided for the attribute + is a meaningful long text alternative for the image content. The value + of AutomationProperties.HelpText should augment rather + than duplicate AutomationProperties.Name, which is + also typically specified to provide accessibility support for an image.

    + 
     <Image
+   Height="400" Width="600"
+   Source="/office.png"
+   AutomationProperties.Name="Diagram of 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."/>
+
    + +
    +
    +

    Using HelpText as form instructions

    + +

    This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText. + The strings used for these purposes are shared to both methodologies + by defining the strings as resources and binding to them. In this example, + the form submission does not perform client-side validation (although + server-side validation following a data round trip might still exist).

    +

    The following is the XAML UI:

    + 
    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
+   x:Class="HelpTextAndToolTip.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+       <Grid x:Name="LayoutRoot" Background="White" Margin="10">
+           <Grid.RowDefinitions>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+           </Grid.RowDefinitions>
+           <Grid.ColumnDefinitions>
+               <ColumnDefinition Width="Auto"/>
+               <ColumnDefinition Width="200"/>
+               <ColumnDefinition Width="Auto"/>
+           </Grid.ColumnDefinitions>
+           <TextBlock Text="Form With Tooltips" FontSize="16" FontWeight="Bold"
+     Grid.Column="1" HorizontalAlignment="Center" />
+           <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
+     Grid.Row="2" Margin="3"/>
+           <TextBox x:Name="NameTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
+     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
+     Grid.Column="1" Grid.Row="2" Margin="3"
+     AutomationProperties.HelpText="{Binding
+       NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
+           <ToolTipService.ToolTip>
+               <ToolTip Content="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
+           </ToolTipService.ToolTip>
+           </TextBox>
+           <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
+     Grid.Row="3" Margin="3" HorizontalAlignment="Right"/>
+           <TextBox x:Name="AgeTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
+     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
+     Grid.Column="1" Grid.Row="3" Margin="3"
+    AutomationProperties.HelpText="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
+           <ToolTipService.ToolTip>
+               <ToolTip Content="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
+           </ToolTipService.ToolTip>
+       </TextBox>
+           <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
+             Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
+       </Grid>
+</UserControl>
+
    +

    The following is the resource definition in app.xaml:

    + 
           <ResourceDictionary>
+           <resources:Resource1 x:Key="TooltipStrings"/>
+       </ResourceDictionary>
+
    +

    The generated resource code that defines the "Resource1" class + is not shown here because it is mostly infrastructure that is produced + by a generation task in Visual Studio. For more information about + embedded resources in Silverlight, see Resources + Overview on MSDN. The resources here contain just two strings, + each of which would typically be defined in a Visual Studio .resx + file. Resources in a .resx file can be localized or changed separately + from code by the appropriate localization toolsets for Microsoft + localization/development.

    +
      +
    • NameTextBoxToolTipString: Must be 10 characters or less. Required.
      • +
    • AgeTextBoxToolTipString Must be a value between 0 and 120. Required.
      • +
    +

    These examples are shown in operation in the working example of Automation Properties Help Text and working example of HelpText and ToolTip.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To see + UI Automation, use Microsoft Windows as platform.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree, and an object’s long text alternative as part of the tree. + (For example, use UIAVerify or Silverlight Spy; see Resources links.)
      3. +
    3. Focus an element that is known to have a long text alternative. + Check that the AutomationProperties.HelpText as applied to + individual UI elements appears as the HelpText or acc_Help value + in the automation tree.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL2.html b/techniques/silverlight/SL2.html new file mode 100644 index 0000000000..0c59e310fb --- /dev/null +++ b/techniques/silverlight/SL2.html @@ -0,0 +1,206 @@ +Changing The Visual Focus Indicator in Silverlight

    Changing The Visual Focus Indicator in Silverlight

    ID: SL2

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the Silverlight "control + skinning" scenario and feature set to change the visible focus + indication of a control. In particular, the intent is to increase the + visibility of focus indication versus the appearance of a default-styled + control. This technique is useful both for the control sets that are + included in the Silverlight run time or SDK assemblies, as well as + for Toolkit or any third party distributed control.

    +

    The default Silverlight core controls all indicate some type of visible + focus indication, through their default templates. However, Silverlight + application authors can still use the skinning techniques to augment + or replace the visible focus indications for controls as used in their + applications. For more information on how Silverlight controls will + generally supply a default visual focus indicator, see Focus + Overview on MSDN.

    +

    Silverlight control skinning is enabled through a deliberate separation + of UI and logic in the Silverlight control model. Appearance of a control + is largely written in XAML. The logic is largely written in code (for + example C#) and is left unaffected when a Silverlight application author + provides a new control template "skin". The hooks that connect + the appearance and the logic are a Style property of the control (which + the author changes the value of, to refer to their new XAML resource) + and a contract of expected named entities in the XAML. The control + logic invokes the names of the entities/parts whenever control state + changes, and the expectation is that the named part provides the necessary + appearance as defined in XAML. Design tools such as Visual Studio or + Expression Blend generate copies of the default templates and parts, + such that Silverlight authors can modify the parts that they want to + change the appearance of, and still preserve the remainder of default + appearance and behavior of the control.

    +

    For the visible focus indicator technique, the author typically modifies + a single visual element that renders in layout as an overlay on top + of the control when it is focused, and switches the overlay to nonvisible + when the control is not focused. This element is a named element that + is typically referred to from within the XAML named state Focused, + which in turn is hooked up to changes in the visual state.

    +

    Note that this technique assumes that the original control author + provided the necessary logic event hookup, and exposed a named state + associated with keyboard focus to work with. If this is not the case, + or if the scenario is that a Silverlight author is defining their own + control, a different technique is needed. See .

    +
    +

    Focus in Silverlight

    +

    Focus in Silverlight is equivalent to the larger user interface and + application concept of keyboard focus. The element that has focus is + the element within the Silverlight object tree and programming model + that has first chance to process the Silverlight key events. As a more + tangible example that is user-centric, if a TextBox has + keyboard focus, then when the user presses keys on the keyboard, the + characters associated with the user's pressed keys will appear in the + TextBox. A user interface element in Silverlight can obtain keyboard + focus in one of three ways:

    +
      +
    1. The user uses the Silverlight tab sequence to traverse into the + Silverlight content and to focus a specific control.
      2. +
    2. The Silverlight application's logic calls the Focus method + programmatically to force focus to a control.
      3. +
    3. The user performs some other action, for example uses the mouse + to click on a control. That control's specific logic handles the + Silverlight input event and uses that event as stimulus to call Focus on + that control. The difference between this case and the above case + is that the behavior is typically built-in to that control's runtime + behavior, and does not require each application author to call Focus in + application code.
      4. +
    +
    +

    Examples

    +
    +

    Two Button elements, one reskinned to provide new visible + focus indicator

    + +

    XAML templates can be verbose; for clarity, only the parts of the + template that were changed or useful for showing the structure are + shown. Omitted portions are shown as ellipsis (...).

    + 
    <UserControl x:Class="VisibleFocusTemplate.MainPage"
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+ <UserControl.Resources>
+   <Style x:Key="StrongFocusIndicator" TargetType="Button">
+...
+     <Setter Property="Template">
+       <Setter.Value>
+         <ControlTemplate TargetType="Button">
+...
+             <VisualStateManager.VisualStateGroups>
+               <VisualStateGroup x:Name="FocusStates">
+                 <VisualState x:Name="Focused">
+                   <Storyboard>
+                     <DoubleAnimation Duration="0" To="1"
+ Storyboard.TargetProperty="Opacity"
+ Storyboard.TargetName="FocusVisualElement"/>
+                     <DoubleAnimation Duration="0" To="0.5"
+ Storyboard.TargetProperty="(UIElement.Opacity)"
+ Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
+                   </Storyboard>
+                 </VisualState>
+                 <VisualState x:Name="Unfocused"/>
+               </VisualStateGroup>
+             </VisualStateManager.VisualStateGroups>
+...
+             <Border x:Name="FocusVisualElement"
+ IsHitTestVisible="false" Opacity="0"
+ CornerRadius="2" BorderBrush="#D0FF0000"
+ BorderThickness="4">
+               <Rectangle x:Name="rectangle"
+ IsHitTestVisible="false" Margin="2"
+ Opacity="0" RadiusY="2" RadiusX="2"
+ Fill="#A0FF0000"/>
+             </Border>
+          </ControlTemplate>
+       </Setter.Value>
+     </Setter>
+   </Style>
+ </UserControl.Resources>
+ <StackPanel x:Name="LayoutRoot">
+   <Button Width="275">Default button</Button>
+   <Button Width="275"
+ Style="{StaticResource StrongFocusIndicator}"
+ >Button with re-templated focus visible indicator</Button>
+ </StackPanel>
+</UserControl>
+
    +

    The most interesting aspect of this example is the change made to + the FocusVisualElement part. Here is the original (default template) + FocusVisualElement:

    + 
    <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" 
+ Opacity="0" IsHitTestVisible="false" />
+
    +

    Here is the changed FocusVisualElement:

    + 
    <Border x:Name="FocusVisualElement" IsHitTestVisible="false"
+ Opacity="0" CornerRadius="2"
+ BorderBrush="#D0FF0000" BorderThickness="4">
+ <Rectangle x:Name="rectangle" IsHitTestVisible="false"
+ Margin="2" Opacity="0"
+ RadiusY="2" RadiusX="2" Fill="#A0FF0000"/>
+</Border>
+
    +

    The following images show how each of the two buttons (default and + reskinned) appear when focused.

    +
    + + +
    Default button focus
    + +
    +
    + + +
    Reskinned button focus
    + +
    +

    This example is shown in operation in the working example of Visible Focus Template.

    + +
    +

    Tests

    +

    Procedure

    +

    Note that not all Silverlight applications necessarily will start + with the keyboard focus being somewhere within the Silverlight content + area for purpose of Step #2. It may be necessary to press TAB several + times to traverse the browser's framing user interface. Also, within + the browser's display area that displays the HTML document, there might + also be other HTML elements that are keyboard focusable, which are + representative of HTML that falls lexically before the <object> tag + that instantiates the Silverlight plug-in. So it may also be necessary + to press TAB several times until these HTML elements are traversed.

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Using a keyboard, tab to the element where focus characteristics + are being examined.
      3. +
    3. Check that the background, border, or other noticable visual indicator + of the element changes color.
      4. +
    4. Check that the changes in color for the background, border, or + other noticable visual indicator are removed when the element loses + focus.
      5. +
    +
    +

    Expected Results

    +

    #3 and #4 are true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL20.html b/techniques/silverlight/SL20.html new file mode 100644 index 0000000000..e3dd4dd8ee --- /dev/null +++ b/techniques/silverlight/SL20.html @@ -0,0 +1,137 @@ +Relying on Silverlight AutomationPeer Behavior to Set AutomationProperties.Name

    Relying on Silverlight AutomationPeer Behavior to Set AutomationProperties.Name

    ID: SL20

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to illustrate how in certain cases, + the Silverlight automation peer system can provide an accessibility + framework Name based on any simple text strings that + are also presented in the visible user interface as control content.

    +

    The applicability of this technique to SC 1.3.1 is that once promoted, + the Name becomes the primary information item that + describes the user interface element to accessibiity frameworks and + assistive technologies, and the information is thus immune to any further + applications of the Silverlight style system that might change the + appearance of the visual text equivalent (styled with color, uses italic + font for rendering basis, etc.)

    +

    The applicability of this technique to SC 4.1.2 is that the default + peer promotion behavior provides the Name component of Name, Role, + Value. This is related to the description of the term label in + SC4.1.2.

    +

    A default behavior for generating Name for accessibility + frameworks is possible for certain peers of content controls. The content + controls that might support a default automation peer behavior include:

    +
      +
    • + TextBlock +
      • +
    • + ButtonBase derived classes that do not change + the GetNameCore implementation. This includes the Button class. + In order for the default promotion to work, the Content of + the button must be set as a plain string or must contain only a TextBlock; + any compositing such as wrapping in a Border or + other container will disable the default promotion.
      • +
    • Any other ContentControl derived class where + the Content property contains either TextBlock or + a text-content-only ButtonBase implementation as + sole content.
      • +
    +

    In these cases the string that sets either Content (for ContentControl and ButtonBase) + or Text (for TextBlock) is promoted + as the AutomationProperties.Name for the control in + UI Automation, without any further attribution. The properties in the + UI Automation tree are reported to accessibility frameworks (UI Automation, + and MSAA through the bridge). The accessibility frameworks reports + this information to assistive technology clients.

    +

    Relying on default automation peer behavior is the preferred Silverlight + technique for supplying the accessibility framework "Name" information, + so long as the default peer promotion actually does produce a usable + name. Using default behavior is preferred because re-using the strings + that are already used in the general visual presentation is less likely + to result in accessibility-specific strings being forgotten by the + application author, or get decoupled from visible UI in a revision + process.

    +

    For cases where there is control compositing in a control rather than + simple text, the automation peer typically cannot provide a default + simple string, and it may be the application author's responsibility + to set AutomationProperties.Name explicitly as an + attribute in XAML, or as a property in runtime code. For details, see .

    +
    +

    Test-based methodology

    +

    In order to use this technique effectively, application authors are + expected to be following a test-based methodology towards verifying + what information their application is reporting to any pertinent accessibility + framework. Useful tools for this purpose include SilverlightSpy and + UIAVerify. Application authors might examine their running Silverlight + application on a test machine where the accessibility framework test + viewers are also active. Initially, the application author might view + the application at a point in the application development cycle that + is prior to any effort devoted to specifically adding accessibility-related + information to the application. Silverlight applications might be in + this state because the initial user interface design was done in a + visually oriented design tool such as Microsoft Expression Blend. Using + the test-based methodology, application authors might note that certain + accessibility framework properties are already populated, as a result + of the mechanisms that are described in this technique. However, it + is rare that ALL of the necessary accessibility information for an + application can be obtained entirely from the built-in default behaviors + of the automation peers. At this point, the application author may + have to apply additional Silverlight techniques that provide accessibility + framework information, for example .

    +
    +

    Examples

    +
    +

    Button is composed with direct text content only

    + +

    The following example shows XAML UI only. Logic is not shown, but + would typically be added by referencing a Click handler + from the XAML.

    + 
     <Button Height="20" Width="200">Fire photon torpedoes!</Button>
+
    +

    The following illustration shows the UIAVerify tree view of this + simple interface. Note that the internal string "Fire photon + torpedoes!" is being peer-forwarded. This is verified by the + Properties view on the right side: the Name property value is "Fire + Photon Torpedoes", even though no programmatic Name property + or AutomationProperties.Name has been applied to + that button that would otherwise have supplied an acccessibility + framework "Name".

    +
    + + +
    UIAVerify tree view
    + +
    +

    This example is shown in operation in the working example of Simple Peer Forwarding.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To use + UI AUtomation, use Windows as the platform.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree, and an object’s name text alternative as part of the tree. + (For example, use UIAVerify or Silverlight Spy; see Resources links.)
      3. +
    3. Check that any element where default automation peer promotion + is expected is supplying a default Name in the automation tree.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL21.html b/techniques/silverlight/SL21.html new file mode 100644 index 0000000000..51cb39692a --- /dev/null +++ b/techniques/silverlight/SL21.html @@ -0,0 +1,121 @@ +Replacing A Silverlight Timed Animation With a Nonanimated Element

    Replacing A Silverlight Timed Animation With a Nonanimated Element

    ID: SL21

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to replace a timed Silverlight + animation with a non-timed user interface element that presents equivalent + information. This is useful in cases where the Silverlight animation + is a timed animation that may contain information that the user wants + to see without a time limit, such as crawling text in a text area. + The animated version of information in the user interface element can + instead be swapped out for an equivalent static element.

    +

    The Silverlight animation system is generalized such that nearly any + Silverlight property of type Double, Point or Color can + be animated, or a property can cycle through discrete object values. + Thus the possibilities for which properties in the user interface can + be animated are quite broad. The general technique shown can be used + to stop any animation.

    +

    Examples

    +
    +

    Stopping an animation that is scrolling text, replacing the animation with a full text alternative

    + +

    This example has a UI definition in XAML and interaction logic in C#. The following is the basic UI in XAML.

    + 
    <UserControl x:Class="StopAnimation.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+xmlns:sys="clr-namespace:System;assembly=mscorlib">
+   <UserControl.Resources>
+       <ImageBrush x:Key="Stars" ImageSource="/stars.jpg" Stretch="Fill"/>
+       <Storyboard x:Key="crawl">
+           <DoubleAnimation From="700" To="-100" Duration="0:0:20"
+             Storyboard.TargetName="crawltext" Storyboard.TargetProperty="(Canvas.Top)"/> 
+       </Storyboard>
+       <sys:String x:Key="crawlText">
+           Episode IV, A NEW HOPE It is a period of civil war. Rebel spaceships, striking from a hidden base, 
+           have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed 
+           to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with 
+           enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia 
+           races home aboard her starship, custodian of the stolen plans that can save her people and restore 
+           freedom to the galaxy….
+       </sys:String>
+   </UserControl.Resources>
+   <StackPanel x:Name="LayoutRoot"
+   Background="{StaticResource Stars}"
+   Height="600" Width="800">
+       <Button Width="200"
+   Click="Button_Click">Stop crawling text, display fixed text</Button>
+       <Canvas Name="CrawlPanel" Width="605" Height="595" >
+           <Canvas.Projection>
+               <PlaneProjection RotationX="-75"/>
+           </Canvas.Projection>
+           <Canvas.Clip>
+               <RectangleGeometry Rect="0 0 600 600"/>
+           </Canvas.Clip>
+           <TextBlock Text="{StaticResource crawlText}"
+   TextWrapping="Wrap" FontSize="20"
+   Width="300" Canvas.Left="150" Name="crawltext"
+   Foreground="Goldenrod"/>
+       </Canvas>
+   </StackPanel>
+</UserControl>
+
    +

    The following is the C# logic. In this example, the animation starts + automatically. When the user activates the control (the Button), + the event handler stops the animation, removes the animated element + from the visual tree, and replaces it with a fixed text element that + presents all text at once. Because it is a TextBox, + assistive technologies could identify the newly introduced text element + and present it, for example read the text in a screen reader.

    + 
           public MainPage()
+       {
+           InitializeComponent();
+           (this.Resources["crawl"] as Storyboard).Begin();
+       }
+       private void Button_Click(object sender, RoutedEventArgs e)
+       {
+           (this.Resources["crawl"] as Storyboard).Stop();
+           LayoutRoot.Children.Remove(CrawlPanel);
+           TextBox tb = new TextBox();
+           tb.IsReadOnly = true;
+           tb.FontSize = 30;
+           tb.TextWrapping = TextWrapping.Wrap;
+           tb.Text = (string)this.Resources["crawlText"];
+           LayoutRoot.Children.Add(tb);
+       }
+
    +

    This example is shown in operation in the working example of Stop Text Animation.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. For a + Silverlight application that has a time limit on interaction due + to an animated user interface element:
      2. +
    2. Check for a mechanism to stop the time limit on interaction.
      3. +
    3. When the mechanism is activated, check that the element that is + animated and resulting in a time limit is removed, and the time-limited + element is replaced with static content that is equivalent and does + not have a time limit.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL22.html b/techniques/silverlight/SL22.html new file mode 100644 index 0000000000..cca8c0403c --- /dev/null +++ b/techniques/silverlight/SL22.html @@ -0,0 +1,132 @@ +Supporting Browser Zoom in Silverlight

    Supporting Browser Zoom in Silverlight

    ID: SL22

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +
      +
    • Silverlight content in a user agent host that supports browser + zoom
      • +
    +

    Description

    +

    The objective of this technique is to support or anticipate existing + browser zoom features effectively when users interact with the Silverlight + application. This technique explains how the Silverlight content area + reacts to the browser zoom feature implemented by some user agent hosts. + Silverlight content and layout properties are based on physical screen + pixel measurements. When the browser zoom is engaged, Silverlight content + scales correctly for the zoom factor, and uses the same zoom factor + as any surrounding HTML content.

    +

    Browser zoom is relevant for accessibility and Silverlight because + it is likely to be the zoom /scaling feature enabled by the browser + host that Web technology users are the most familiar with as a technique + for increasing the text size in Web content.

    +
    +

    Legacy behavior in Silverlight version 2

    +

    Built-in support for browser zoom was introduced as a feature in Silverlight + version 3. Older documents on the Web might describe techniques that + were relevant for Silverlight version 2, where dealing with browser + zoom required JavaScript handling of the Resized event, + and developers manually applied a ScaleTransform to Silverlight + content to scale it up. Silverlight has a "quirks mode" that + detects existing handlers that might still use the older techniques. + Built-in zoom not active in these cases, so that applications can avoid + doubling or otherwise mishandling the user agent's zooming behavior.

    +
    +
    +

    Deliberately disabling browser zoom in Silverlight applications

    +

    Silverlight also provides the ability to disable the built-in browser + zoom handling and rendering behavior. This is sometimes done in order + to suppress some of the aliasing and distortion artifacts that host-level + scaling can introduce, particularly for video content or certain uses + of text. In these cases, application authors might consider other Silverlight + techniques for scaling the user interface, perhaps specifically only + for the text elements on a page. When an application disables the built-in + zoom behavior and rendering for Silverlight content, the browser still + retains its zoom settings, and that setting applies to other content + outside of Silverlight such as the hosting HTML.

    +
    +

    Examples

    +
    +

    Verifying browser zoom, and checking the zoom factor

    + +

    This example has a UI defined in XAML and logic defined in C#. The + UI shows the zoom factor, and also demonstrates what happens when built-in + browser zoom handling is deliberately disabled. Note that the zooming + factor as reported by the API is still retained even when Silverlight + built-in zoom scaling is disabled deliberately. The following is the + XAML UI:

    + 
    <UserControl x:Class="BrowserZoom.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <TextBlock>Some text you can zoom.</TextBlock>
+       <Button Click="Button_Click">Toggle built-in zoom handling</Button>
+       <StackPanel Orientation="Horizontal">
+           <Button Click="Button_Click_1">Query current zoom factor</Button>
+           <TextBox IsReadOnly="true" Name="zoomf"
+   Text="{Binding Path=reportZoom}"/>
+       </StackPanel>
+   </StackPanel>
+</UserControl>
+
    +

    The following is the C# logic:

    + 
       public partial class MainPage : UserControl
+   {
+       public MainPage()
+       {
+           InitializeComponent();
+       }
+       private void Button_Click(object sender, RoutedEventArgs e)
+       {
+           if (!Application.Current.Host.Settings.EnableAutoZoom == false) {
+           Application.Current.Host.Settings.EnableAutoZoom = false;
+           }
+           else
+           {
+               Application.Current.Host.Settings.EnableAutoZoom = true;
+           }
+       }
+       private void Button_Click_1(object sender, RoutedEventArgs e)
+       {
+           zoomf.Text = Application.Current.Host.Content.ZoomFactor.ToString();
+       }
+   }
+
    +

    This example is shown in operation in the working example of Browser Zoom.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. The browser + being used for the test must support a browser zoom feature, and + the feature must be turned on as a user preference.
      2. +
    2. Verify that the Silverlight application enables auto zoom (no + Silverlight application-specific code or markup has set EnableAutoZoom + API to false).
      3. +
    3. Test the zooming feature of the user agent. Verify that browser + zoom factors apply to the Silverlight content.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL23.html b/techniques/silverlight/SL23.html new file mode 100644 index 0000000000..ff283c14a3 --- /dev/null +++ b/techniques/silverlight/SL23.html @@ -0,0 +1,219 @@ +Using A Style Switcher to Increase Font Size of Silverlight Text + Elements

    Using A Style Switcher to Increase Font Size of Silverlight Text + Elements

    ID: SL23

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to define style switching logic + for Silverlight. In particular, the intent is to use the style switcher + to change the font size of text elements. This technique could be used + only for specific elements, or could also be applied to the entire + Silverlight content area and all text elements therein (including elements + such as TextBlock that are technically not controls). + Examples are provided for these two cases.

    +

    The property to style or otherwise change is the FontSize property. + Primarily, this is done using the API Control.FontSize, + but developers can also use similar properties on other objects that do not + derive from Control (examples: TextBlock; DataGridTextColumn).

    +

    Silverlight uses a style system whereby many properties that affect + UI appearance can be referred to and changed through a style resource. + The style resource overrides the default code implementation and the + default XAML template as provided by the Silverlight core implementation(or + a third party control author). A style enables an application author + to make a one-to-many change to property values in an efficient and + reversible way, and also to group multiple related property changes + as one unit of logic. Styles can be applied explicitly by referencing + them by name, or implicitly by associating a style with a class (which + then targets all instances of that class). This is analogous to how + CSS can either define styles globally for tags or uniquely for classids + and names.

    +

    Silverlight styles are always written in XAML. Silverlight event handlers + are most often written in code (there are related techniques that can + react to states with event associations, defined in pure XAML, but + the specific style switching technique is most straightforward in code).

    +
    +

    Using this technique versus relying on browser zoom

    +

    Silverlight supports browser zoom when viewed in browser hosts that + support a browser zoom feature. Specifically, Silverlight scales content + within its content area when the user engages browser zoom, based on + the browser zoom factor. However, not all browser hosts that Silverlight + supports have a browser zoom feature, and/or users might choose not + to use browser zoom. This technique presents an alternative technique + for font scaling in cases when relying on browser zoom is not viable + as a technique. Applications might use HTML DOM based logic to determine + the user agent string of the browser host, and use that as a determinant + of whether the user has browser zoom available as an option. If no + browser zoom feature exists for that user and their user agent, that + user could be served a version of the Silverlight application that + presents a UI and logic for sizing the fonts using the Silverlight + API, as described in this technique.

    +

    For more information about Silverlight and browser zoom, see the technique .

    +
    +
    +

    Sizing by percent

    +

    Generally, sizing Silverlight FontSize values by + percentages is not recommended. Sizing by percentage produces non-integer + font size values, which in turn produce aliasing artifacts. The Silverlight + rendering routines for text work best when dealing with integer numbers. + The entire Silverlight rendering system is based on pixel measurements. + In particular, the behavior for text rendering produces optimized font + shaping and subpixel rendering for text areas, and this behavior is + based on the assumption that font unit measurements will be provided + by applications using whole pixel values.

    +
    +
    +

    Units for font sizing in Silverlight

    +

    Font sizing in Silverlight is always specified by a unit measure of + pixels. Other unit measures such as ems or points that come from a + migrated UI definition in XAML would need to be unit-converted to all + use a purely numeric value, such that attribute values in XAML do not + not include unit identifier suffixes such as "px", "pt", "em", + or "cm". This note is most relevant if the application author + is porting or migrating a Windows Presentation Framework (WPF) application + to Silverlight, or is using a XAML-emitting design tool that is producing + general XAML UI definitions and not targeting a specific framework.

    +
    +

    Examples

    +
    +

    Style applied to all text elements within a RichTextBox + container

    + +

    Variations of this example could be employed to offer more choices. + For example, multiple style switchers could be provided that gave three + or more fontsize choices.

    + 
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <UserControl.Resources>
+       <Style x:Key="BiggerRTBFonts" TargetType="RichTextBox">
+           <Setter Property="FontSize" Value="24"/>
+       </Style>
+   </UserControl.Resources>
+
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <Button Click="Button_Click">Super size fonts!</Button>
+       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
+       <RichTextBox IsReadOnly="True" Name="rtb1">
+           <RichTextBox.Blocks>
+               <Paragraph>Various test text</Paragraph>
+               <Paragraph>
+                   <Bold>Some bold test text</Bold></Paragraph>
+               <Paragraph>
+                   <Italic>Some italic</Italic>
+               </Paragraph>
+               <Paragraph FontFamily="Times New Roman">A different font, why not?</Paragraph>
+           </RichTextBox.Blocks>
+       </RichTextBox>
+   </StackPanel>
+</UserControl>
+
    +

    The second listing is the C# code for the event handler . Note that + all it does is change a style property, using a value that keys into + the .Resources collection from XAML where the Style is defined. Another + event handler nulls out the style and returns values to defaults.

    + 
    private void Button_Click(object sender, RoutedEventArgs e)
+{
+  rtb1.Style = this.Resources["BiggerRTBFonts"] as Style;
+}
+private void Undo_Click(object sender, RoutedEventArgs e)
+{
+   rtb1.Style = null;
+}
+
    +

    The following images show the original, and the applied style.

    +
    + + +
    Screen shot with standard fonts and a button to enlarge
    + +
    +
    + + +
    Screen shot with enlarged fonts after activating button to enlarge
    + +
    +

    This example is shown in operation in the working example of Style Switcher Font Size.

    + +
    +
    +

    Font size increase applied to all text content by applying + at UserControl level, and by percent increase logic

    + +

    This example uses the inheritance characteristics of the FontSize + property that is available to all Silverlight controls. Rather than + using a style, this example uses a HoldEnd animation, to take advantage + of the "By" behavior of the animation system that can increment + an existing value by 2 (pixels) rather than replacing the value with + a fixed pixel value.

    +

    The following is the XAML UI:

    + 
    <UserControl x:Class="StyleSwitcherFontSize.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   Name="rootcontrol">
+   <UserControl.Resources>
+       <Storyboard x:Key="BySize">
+           <DoubleAnimation Storyboard.TargetName="rootcontrol" Storyboard.TargetProperty="FontSize" By="2" FillBehavior="HoldEnd" Duration="0"/>
+       </Storyboard>
+   </UserControl.Resources>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <Button Click="Button_Click">Super size fonts!</Button>
+       <Button Name="Undo" Click="Undo_Click">Make those big fonts stop!</Button>
+       <TextBox Text="Various test text"/>
+       <TextBox FontWeight="Bold" Text="Some bold test text"/>
+       <TextBox FontStyle="Italic" Text="Some italic"/>
+       <TextBox FontFamily="Times New Roman" Text="A different font, why not?"/>
+   </StackPanel>
+</UserControl>
+
    +

    The following are the C# event handlers.

    + 
    private void Button_Click(object sender, RoutedEventArgs e)
+{
+   (this.Resources["BySize"] as Storyboard).Begin();
+}
+private void Undo_Click(object sender, RoutedEventArgs e)
+{
+   (this.Resources["BySize"] as Storyboard).Stop();
+}
+
    +

    + This example is shown in operation in the working example of By Animation Font Size. +

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Verify that the application provides a control that can increase + font size.
      3. +
    3. Activate the control, and check that the font sizes increase.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL24.html b/techniques/silverlight/SL24.html new file mode 100644 index 0000000000..53885190e1 --- /dev/null +++ b/techniques/silverlight/SL24.html @@ -0,0 +1,122 @@ +Using AutoPlay to Keep Silverlight Media from Playing Automatically

    Using AutoPlay to Keep Silverlight Media from Playing Automatically

    ID: SL24

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the AutoPlay property + of MediaElement object, which prevents the MediaElement from + playing its media source automatically.

    +

    By default the value of AutoPlay is true, which causes + any media that is the Source of the MediaElement to + play as soon as either the entire source file is loaded (for nonstreaming + media) or an initial buffer is loaded (for streaming media). To prevent + the possible accessibility issues, developers can instead specifically set AutoPlay to + false, so that the user always controls whether the media plays. This + technique would thus be used in combination with providing user interface + controls that go along with the MediaElement, and + that enable the user to control the media. In particular, the user + interface controls enable the media to play, pause or stop, with event + wiring for those controls associated with the Play, Pause or Stop methods + of the MediaElement object.

    + +

    Examples

    +
    +

    Setting AutoPlay to false, and providing the typical MediaElement controls in the UI

    + +

    This example has a UI definition in XAML and interaction logic in + C#.

    +

    The following is the basic UI in XAML. Note the AutoPlay="false" setting.

    + 
    <UserControl x:Class="MediaElementControlsAutoPlay.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  >
+   <Grid x:Name="LayoutRoot">
+       <Grid.ColumnDefinitions>
+           <ColumnDefinition Width="*" />
+           <ColumnDefinition Width="*" />
+           <ColumnDefinition Width="*"/>
+       </Grid.ColumnDefinitions>
+       <Grid.RowDefinitions>
+           <RowDefinition Height="*" />
+           <RowDefinition Height="Auto" />
+       </Grid.RowDefinitions>
+       <MediaElement x:Name="media" Source="/xbox.wmv"
+          Width="300" Height="300" 
+          Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"
+          AutoPlay="False"
+          AutomationProperties.Name="Video of new Fable game for XBox"           
+       />
+       <Button Click="StopMedia" 
+    Grid.Column="0" Grid.Row="1" Content="Stop" />
+       <Button Click="PauseMedia" 
+    Grid.Column="1" Grid.Row="1" Content="Pause" />
+       <Button Click="PlayMedia" 
+    Grid.Column="2" Grid.Row="1" Content="Play" />
+   </Grid>
+</UserControl>
+
    +

    The following is the C# logic.

    + 
     private void StopMedia(object sender, RoutedEventArgs e)
+ {
+     media.Stop();
+ }
+ private void PauseMedia(object sender, RoutedEventArgs e)
+ {
+     media.Pause();
+ }
+ private void PlayMedia(object sender, RoutedEventArgs e)
+ {
+     media.Play();
+ }
+ 
+
    +

    This example is shown in operation in the working example of Media Element Controls with AutoPlay False.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. The application + is expected to use a MediaElement object to play + prerecorded media.
      2. +
    2. Check that the media does not play automatically as soon as the + application loads and displays. Rather, the user is presented with + a user interface that can start the media per the user's action.
      3. +
    +
    +

    Expected Results

    +

    #2 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL25.html b/techniques/silverlight/SL25.html new file mode 100644 index 0000000000..88bdd46ce4 --- /dev/null +++ b/techniques/silverlight/SL25.html @@ -0,0 +1,87 @@ +Using Controls and Programmatic Focus to Bypass Blocks of Content + in Silverlight

    Using Controls and Programmatic Focus to Bypass Blocks of Content + in Silverlight

    ID: SL25

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the combination of Silverlight + control activation and programmatic focus to enable the user to skip + regions of content in a Silverlight application user interface.

    +

    The control that the user activates should clearly indicate that its + purpose is to skip content, so that the resulting programmatic focus + shift is not interpreted as an undesired change of context.

    +

    The object to call focus to (the receiver of focus after the user-initiated + action is triggered) has to be a Control in the Silverlight + programming model. This is because the Focus method + must be called on the target, and therefore the target must inherit + the Control class. So, an application author might + call focus to a read-only TextBox, or perhaps a RichTextBox, + depending on the purpose of the Silverlight application and its user + interface design. You can also focus a UserControl, + for cases where the area to call focus to represents a custom control + implementation.

    +
    +

    Setting TabIndex (not recommended)

    +

    Silverlight provides a TabIndex attribute that can + be used to override the default-generated tab sequence. Do not attempt + to adjust tab index as a technique for getting past content blocks. + Doing so will create a focus order that does not match the apparent + visual order, as described in SC + 2.4.3.

    +
    +

    Examples

    +
    +

    User-enabled control that programmatically sets focus

    + +

    The following is the XAML for the user interface.

    + 
       <StackPanel Name="LayoutRoot">
+       <Button Name="bypassbtn1" Click="bypassbtn1_Click">Skip menus, go to main page content</Button>
+       <!intervening content-->
+       <StackPanel>
+           <RichTextBox Name="rtb_MainContent" IsReadOnly="True">
+           <Paragraph>Here is the main content ....</Paragraph>
+           </RichTextBox>
+       </StackPanel>
+   </StackPanel>
+
    +

    The following is the event handler that forces focus.

    + 
           private void bypassbtn1_Click(object sender, RoutedEventArgs e)
+       {
+           rtb_MainContent.Focus();
+       }
+
    +

    This example is shown in operation in the working example of Programmatic Focus.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Open the test HTML page for a Silverlight application.
      2. +
    2. Check for a control that indicates that activating that control + can skip to some particular region of the content.
      3. +
    3. Activate that control. Verify that activating the control causes + focus to go to that region, and that a repeated block or blocks of + content are skipped.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL26.html b/techniques/silverlight/SL26.html new file mode 100644 index 0000000000..dbe6ad3d95 --- /dev/null +++ b/techniques/silverlight/SL26.html @@ -0,0 +1,86 @@ +Using LabeledBy to Associate Labels and Targets in Silverlight

    Using LabeledBy to Associate Labels and Targets in Silverlight

    ID: SL26

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the AutomationProperties.LabeledBy property + to associate a non-interactive text label with an interactive field + such as a Silverlight TextBox or RichTextBox. + By using this technique, application authors can use the label text + as the default source for AutomationProperties.Name on + the target, and do not need to specify an explicit AutomationProperties.Name.

    +

    This technique relies on several Silverlight features: the Name property + for identifying specific UI elements, the AutomationProperties API, + and the ElementName variation of Silverlight data binding. AutomationProperties.Name can + be set on and can target any Silverlight UIElement. + The two most common uses of this labeling technique are for labeling + a form field, and for associating an image caption with an image.

    +

    Examples

    +
    +

    Two TextBox form fields, each with a LabeledBy reference + to a text label

    + +

    The following is XAML for the UI (and can be inserted into a UserControl + XAML root or elsewhere). No code-behind is necessary for this example; + the element relationships are established by the {Binding} values in + the XAML and interpreted appropriately by the Silverlight run time.

    + 
       <StackPanel x:Name="LayoutRoot" Background="White">
+       <StackPanel Orientation="Horizontal">
+           <TextBlock Name="lbl_FirstName">First name</TextBlock>
+           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
+       </StackPanel>
+       <StackPanel Orientation="Horizontal">
+           <TextBlock Name="lbl_LastName">Last name</TextBlock>
+           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_LastName}" Name="tbLastName" Width="100"/>
+       </StackPanel>
+   </StackPanel>
+
    +

    This example is shown in operation in the working example of Labels.

    + +
    +
    +

    Labeling / captioning an image

    + + 
           <Image HorizontalAlignment="Left" Width="480" Name="img_MyPix"
+                Source="snoqualmie-NF.jpg"
+                AutomationProperties.LabeledBy="{Binding ElementName=caption_MyPix}"/>
+       <TextBlock Name="caption_MyPix">Mount Snoqualmie North Bowl Skiing</TextBlock>
+
    +
    +

    If the caption is not a usable text alternative, use the technique , or change the caption + text.

    +
    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To see + UI Automation, use Microsoft Windows as platform.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree. (For example, use UIAVerify or Silverlight Spy; see Resources + links.)
      3. +
    3. Verify that any element that has a LabeledBy value + has an associated visible label.
      4. +
    4. Verify that any element that has a LabeledBy value + uses the Name value from that label.
      5. +
    +
    +

    Expected Results

    +

    #3 and #4 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL27.html b/techniques/silverlight/SL27.html new file mode 100644 index 0000000000..e4a3511bfb --- /dev/null +++ b/techniques/silverlight/SL27.html @@ -0,0 +1,287 @@ +Using Language/Culture Properties as Exposed by Silverlight Applications + and Assistive Technologies

    Using Language/Culture Properties as Exposed by Silverlight Applications + and Assistive Technologies

    ID: SL27

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the combination of HTML + Lang attribute, CultureInfo and Language to + correctly specify the language of the entirety of Silverlight content, + or of parts within the Silverlight content.

    +

    In general, Silverlight does not attempt to repurpose HTML Lang, because + Silverlight is not HTML. Instead, internally within the Silverlight + content area, Silverlight uses language definition concepts that relate + to XML (Language is a remapping of xml:lang) or .NET + Framework programming (CultureInfo). For these reasons, + HTML Lang techniques as described in [H58] + are not useful for Silverlight programming of Silverlight-specific "parts".

    +

    What becomes important in Silverlight application programming then + is to make sure that the HTML language concept of Lang and the Silverlight + language concept of CultureInfo or Lang are not at odds with one another, + or reporting misinformation. In particular, application authors should + avoid situations where an assistive technology has HTML Lang available + for programmatic determination of either page or part, but the effective + runtime language in the Silverlight part is different. The result here + might be that a screen reader that changes functionality such as phonetic + pronunciations would not correctly read the text content from the Silverlight + content. Avoiding this situation is largely a matter of due diligence + on the part of a Silverlight application author, OR on the part of + the Web page author who authors surrounding HTML, in cases where a + Web page is embedding Silverlight content or packages that the Web + page's author did not actively develop and is only consuming/embedding.

    +

    The following is a general recommendation that summarizes the detailed + discussion in subsequent subheadings:

    +
      +
    • If the Silverlight application does not have a strong emphasis + on presenting textual information with a particular language association, + HTML Lang should be left blank. This causes assistive technologies + to defer to either user agent or platform language settings. Silverlight + is able to determine these same language values at run time, and + language behavior of assistive technologies and of Silverlight is + kept synchronized through the use of the same external information + set.
      • +
    • If the Silverlight application DOES have a strong emphasis on + presenting textual information with A SINGLE particular language + association, HTML Lang should be assigned to report that specific + language either for whole page or at least for the Silverlight object + tag. This enables assistive technologies to pick up the value, per H57: + Using language attributes on the html element HTML. Aside from + due diligence during development and deployment, Silverlight application + code might choose to enforce that its runtime CultureInfo is really + the same. This could be addressed with a specific HTML DOM helper + function.
      • +
    • If the Silverlight application has MULTIPLE language associations, + the best option is to separate the Silverlight application into object + parts at the HTML level, to assure that HTML Lang and intended runtime + language do not clash. This is particularly important if the application + is actively resetting CurrentCulture away from the user settings + of platform or user agent. For more information, see .
      • +
    +
    +

    HTML Lang

    +

    When Silverlight is embedded in an HTML document with the <object> element, + the value of the HTML Lang attribute of the surrounding HTML becomes + a factor. Browsers process the outer HTML, and the browser's processing + has possible influence over values reported to any DOM script that + acts, or to any accessibility framework that is reporting the browser + content. The preferred way for a Silverlight application to address SC + 3.1.1 is to correctly specify the HTML Lang value in the hosting + HTML page. This technique should be used in conjunction with H57: + Using language attributes on the html element HTML. By using the + same language values with both techniques as a better practice, H57 + will satisfy 3.1.1 while setting the language value of the Silverlight + content to match will assist authors in meeting SC 3.1.2.

    +

    The Silverlight runtime itself does not attempt to inherit language + settings that come from markup that is outside the Silverlight-specific + content. In particular, the HTML Lang attribute applied to the html + tag, Lang on host object tag, specific parameters of the Silverlight + object tag, all have no affect on the value of any Silverlight Language attribute. + Instead, the Silverlight Language defaults to the CultureInfo of + the Silverlight runtime as instantiated by HTML object tag invocation. + It is expected that if a Silverlight application contains extensive + text where language of text is a factor for assistive technology purposes, + developers will manually set the HTML Lang tag to match the Language value + on the Silverlight root element in XAML. Development tools might or + might not enforce or inform the relationship between HTML Lang and + Silverlight Language; that consideration is outside + the scope of Silverlight as a technology. If language is not a major + factor in the application, application authors should consider leaving + HTML Lang blank on the hosting HTML page.

    +

    You can programatically determine the value of HTML Lang of surrounding + HTML from within the Silverlight API, by using the DOM-bridging method HtmlElement.GetAttribute. + Otherwise, this can be determined by techniques other than Silverlight's + (such as scripting to the HTML DOM of the hosting browser).

    +
    +
    +

    Silverlight Language property

    +

    + Language is an attribute that is available on all + Silverlight objects that directly represent a UI element. Language + can be queried (or set) by Silverlight managed code run time, such + that the Language value can be programatically determined + within the Silverlight programming model.

    +

    The format of the value that is used to set Language is + based on ISO-639-1, and is thus compatible with http://www.rfc-editor.org/rfc/bcp/bcp47.txt.

    +

    + Language has a behavior that parallels the behavior + of xml:lang in an XML document: if Language is set on + a parent element, all child elements inherit that Language value. + An actual xml:lang attribute in XAML is also valid for this purpose.

    +

    + Language can be set at the root of a XAML document, + so that the entire UI shares the same language setting. If Language is + not explicitly set at the root by application markup, Language is + inferred per running instance, based on processing the acting CultureInfo at + run time.

    +

    However, another usage is for application authors to set Language on + a specific child element, to override the root-level or client-environment-inferred Language value. + This enables consciously embedding a content part that is deliberately + in a different language than the remainder of the Silverlight content.

    +

    Exactly what happens when a Language is set on a + part is not always specified, and is largely a matter of implementation + detail of the individual Silverlight classes that might be a "part". + However, as an informative generalization, the value of Language might + affect considerations such as: how white space is processed (in particular + CR or LF); character sets for fonts; string formatting when using APIs + specifically on that part.

    +
    +
    +

    CultureInfo

    +

    + CultureInfo is a concept that is relevant to .NET + Framework programming. This concept applies to Silverlight because + Silverlight uses a specific implementation of a CLR runtime that uses + .NET Framework principles. CultureInfo potentially + specifies both a language and a culture. This distinction becomes relevant + for advanced string formatting concepts that are provided in the .NET + Framework, such as decimal separators, dates, and currency. For example, + an application author might simply specify "en" if the author + did not care about string formatting, but might specify "en-GB" if + the application was using string formatting for currency values with + the intention of displaying Pounds Sterling as currency unit in string + formatting.

    +

    Silverlight applications often run using an inferred CultureInfo based + on the operating system where the user agent browser host exists (in + other words, the culture of the client computer where the Silverlight + application is run). This CultureInfo can be queried + by applications at run time; see CultureInfo.CurrentCulture. + Application authors can deliberately constrain the set of CultureInfo cases + that a Silverlight application can be run under, in order to verify + that necessary string resources for that culture are available in that + application. This is done by setting <SupportedCultures> in the + Silverlight project settings. If a user accesses the application on + a client that is outside the SupportedCultures, the application author + has the following choices:

    +
      +
    • Use a fallback resource set representing a neutral culture; this + is enabled automatically by the Silverlight resources lookup behavior, + so long as the project includes resources identified as being culture-neutral. + This is the preferred approach.
      • +
    • Use client logic to detect the culture, and initiate a client-side + redirect to request either a different XAP or a different hosting + HTML page.
      • +
    • Trap requests at the server level by checking lang request in + the header. This varies between server implementations, is not a + Silverlight-specific technique, and is not discussed here.
      • +
    +

    For more information, see How + to: Create a Build that Targets a Specific Culture.

    +

    + CultureInfo generally applies to the Silverlight + application as a whole. There are advanced techniques whereby worker + threads can be run as separate cultures, but that is not discussed + here and is not relevant because only the main UI thread has relevance + to Web content accessibility. So, if an application author wants to + declare specific language settings for a part (component, region or + control) of the Silverlight application, a different Silverlight-specific + property Language is used.

    +
    +

    Examples

    +

    These examples show Silverlight behaviors that are based on interpreting + the Language property value, as a way of illustrating + the programmatic determination of language values specifically in the + Silverlight application framework. To determine HTML Lang, application + authors should use the HTML DOM as enabled by browser host scripting, + rather than Silverlight APIs. HTML DOM techniques are not shown here + because they are specific to browsers or scripting frameworks, not + to Silverlight.

    +
    +

    Language set at root-level of Silverlight content, inherits

    + +

    This example features a XAML UI and logic that reports information + to demonstrate that the information is programmatically determinable. + This example shows determination of the Language property.

    + 
    <UserControl x:Class="LangProperties.MainPage" 
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   Language="en-gb">
+ <StackPanel x:Name="LayoutRoot" Background="White">
+       <Border BorderBrush="Red" BorderThickness="2">
+           <TextBlock Language="zh-cn" Text="（（）共" Name="t2" VerticalAlignment="Top" TextWrapping="Wrap" Height="100"/>
+       </Border>
+       <Border BorderBrush="Red" BorderThickness="2">
+           <TextBlock Text="（（）共" Name="t3" VerticalAlignment="Top" TextWrapping="Wrap" Height="100"/>
+       </Border>
+       <Button Click="button1_Click">IETF Language of this app</Button>
+ </StackPanel>
+</UserControl
+
+private void button1_Click(object sender, RoutedEventArgs e)
+{
+   Button b = sender as Button;
+   MessageBox.Show(b.Language.IetfLanguageTag);
+   // this will be 'en-gb' because inherits from the root
+}
+
    +

    This example is shown in operation in the working example of Language Properties.

    + +
    +
    +

    Determine CurrentCulture; runtime verification that CurrentCulture and the surrounding HTML's current Lang value do not report different language settings

    + +

    The following is an event handler that can be hooked to an object + lifetime event such as UserControl.Loaded on the Silverlight + XAML root. This example demonstrates property access to several of + the relevant language properties that are present in Silverlight and + shows a specific way to compare CultureInfo and Lang by a "not + equals" check after constructing a CultureInfo based on the Lang + string. To apply this test, the hosting HTML page may need to be altered + to declare a specific HTML Lang; default Silverlight aspx or html test + pages do not declare HTML Lang.

    + 
           private void RunLanguageDetectLogic(object sender, RoutedEventArgs e)
+       {
+           CultureInfo thisAppCC = CultureInfo.CurrentCulture;
+           CultureInfo thisAppCUIC = CultureInfo.CurrentUICulture;
+           HtmlDocument thisPage = HtmlPage.Document;
+           String thisAppHTMLLang = (string) thisPage.DocumentElement.GetProperty("lang");
+           CultureInfo CCFromLang = new CultureInfo(thisAppHTMLLang);
+           if (CCFromLang != thisAppCC && CCFromLang.ToString() !=  "")
+           {
+               TextBlock tb = new TextBlock();
+               tb.Text += "Warning: the current culture for the run time (";
+               tb.Text += thisAppCC.ToString();
+               tb.Text += ") does not match the culture indicated in hosting HTML's Lang (";
+               tb.Text += CCFromLang.ToString();
+               tb.Text += ").";
+               tb.Inlines.Add(new LineBreak());
+               tb.Inlines.Add("Typical action here would be to redirect the request to an HTML page
+                 where the Lang is correct for user's current culture as determined from the OS.");
+               LayoutRoot.Children.Add(tb); 
+               //LayoutRoot refers to the default MainPage.xaml element from a VS-template Silverlight Application
+           }
+       }
+
    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Verify that language settings are respected by individual Silverlight + control characteristics. (Exactly what behavior manifests the language + difference varies per Silverlight class implementation. For some + testing ideas, see Creating + Globally Aware Applications).
      3. +
    3. Verify that any interaction between HTML Lang in the HTML and + the Language or CultureInfo from the Silverlight application do not + result in a clash of language information, either in terms of basic + application behavior or in how an assistive technology decides to + process language information.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL28.html b/techniques/silverlight/SL28.html new file mode 100644 index 0000000000..54721a53b0 --- /dev/null +++ b/techniques/silverlight/SL28.html @@ -0,0 +1,439 @@ +Using Separate Text-Format Text Captions for MediaElement Content

    Using Separate Text-Format Text Captions for MediaElement Content

    ID: SL28

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use text captioning that comes + from a separate text file, synchronize the captions with the media + in a Silverlight MediaElement, and display the captions + in Silverlight.

    +

    There are two variations of the general theme of implementing Silverlight + media player controls to work with external timed text: using built-in + capabilities of the Microsoft Expression Encoder tool, and using parsing + code that consumes caption as a raw file format and converts that format + into the Silverlight API's TimelineMarkers representation. + This technique primarily addresses how to use the Expression Encoder + technique, along with media player templates that are also provided + by Expression Encoder or related Silverlight SDKs such as the Smooth + Streaming SDK.

    +

    At a pure architecture level, Silverlight uses the TimelineMarkers API + to display caption text at synchronized times. The Expression Encoder + and Expression Blend tools provide a front end to drive the TimelineMarkers API + for the supported formats. The intention of the architecture is so + that Silverlight as a run-time has a base architecture that could potentially + use any existing or future timed text format, but the tools for Silverlight + (rather than built-in features of the runtime) provide the optimized + workflow for producing captioned media projects.

    +

    A procedure for using the Expression Encoder and Expression Blend + tools to produce a Silverlight media player application that can consume + timed text in TTML format is provided as Example 1 in this technique. + (Note: prior to the approval of TTML by W3C, DFXP was a format that + used much of the eventual TTML vocabulary. In tools that predate TTML, + this format is often identified as DFXP.)

    +

    A purely code-based parsing technique, with the goal of avoiding Expression + Encoder dependencies, is necessarily more complex. This is because + there are multiple issues to solve:

    +
      +
    • Obtaining and validating the timed text file
      • +
    • Parsing the format into general information items like timings, + text, format etc. that are either consumable directly in a Silverlight + API, or useful as intermediates
      • +
    • Using the timecode information to create TimelineMarker representations + for each timed text entity
      • +
    • Associating the TimelineMarkers with media loaded + by the player
      • +
    • Finding a place to store the additional formatting that is conveyed, + including the text and any formatting
      • +
    • Handling events from TimelineMarkers in the media + player, in such a way that text and formatting behavior can be retrieved + and presented in the Text part of the player UI
      • +
    +
    +

    Text Captioning Formats

    +

    There are several existing text-based formats that are used for text + captioning of prerecorded media. The following are supported as formats + if using the Expression Encoder tool as shown in Example 1 (where the + Expression Encoder generated Silverlight application uses the existing + Silverlight MediaPlayerTemplate and the TimedTextLibrary component.) + For more information on which timed text formats can be referenced + in an Expression Encoder project, see About + Captioning (Expression documentation on MSDN).

    + +

    The following are not supported directly in Expression Encoder templates. + To use these formats, application authors would have to write parsing + logic, as shown in Example 2:

    +
      +
    • MPEG Part 17 / 3GPP Timed Text. For more information, see ISO/IEC + 14496-17:2006 on ISO site.
      • +
    • Other formats that have not realized wide adoption, for example + Universal Subtitle Format.
      • +
    • In addition to these formats, other formats for device-specific + recorded media (such as DVD encoded tracks) could be cross-purposed + for use by streaming/online media.
      • +
    +

    Rather than build the parsing logic for all these formats into the + Silverlight runtime, or choosing just one of these formats to support, + the Silverlight design for text captioning at the core level instead + makes the TimelineMarkers property of a MediaElement writeable, + independently of the value of Source. The format of + each TimelineMarker in the collection is very simple: + a time value expressed in the format, and the text value of the text + for that synchronized caption. The time format for TimelineMarkers is + documented as TimelineMarker + reference on MSDN. Converting timed text formats to TimelineMarkers form + as consumed by the Silverlight core can be done by following any of + the following application design patterns:

    +
      +
    • Authoring the project using Expression Encoder, and using the + Expression MediaPlayerTemplate as the media player UI. In this case, + Expression produces a Silverlight application that includes assemblies + that are generated from code templates. The default build of the + project provides a working library that handles all tasks related + to timed-text format conversion, from the formats as documented at About + Captioning (Expression documentation on MSDN).
      • +
    • The templates of an Expression Encoder project can also be edited, + either editing the XAML for the UI by altering the template, or by + altering the C# code files that define various aspects of the media + player logic, including the timed text format parsers. Then the project + can be rebuilt using the desired customizations. Using this technique, + it is possible to adapt the code to support timed text formats that + are not directly supported in the Expression Encoder project UI.
      • +
    • Using a 3rd party media player implementation that also includes + a codebase for processing timed text formats, producing TimelineMarkers, + and displaying the captions in the player-specific UI.
      • +
    • Including a library that handles just the format parsing, and + using APIs of this library as part of the Silverlight application + code-behind.
      • +
    • Writing all logic that is necessary for timed text parsing AND + application UI display, and including it all in the main Silverlight + application library.
      • +
    +
    +

    Examples

    +
    +

    Using Expression Encoder and Expression Blend to produce + a Silverlight media player project from tool output and templates

    + +

    By far the simplest technique for incorporating existing timed-text + information is to use Microsoft Expression Encoder and the media player + templates that an Expression Encoder project produces by default. You + can use timed text in any of the following formats: DFXP, SAMI, SRT, + SUB, and LRC. Associating a caption file with a media source is done + as an "import" operation in the Expression Encoder tool. + However, the "import" does not necessarily mean that the + timed text file is integrated into the media stream; Silverlight authors have the option + to preserve the file separation. This is useful if the application is obtaining + timed text from a third party source in real-time, or if Silverlight authors have a + production pipeline that makes it difficult to have the captioning + ready in time to be encoded in the stream along with the audio-visual + source files. For third-party timed text files that are served directly + from the third party's HTTP servers, it can be useful to supply a dummy + URL in the initial project encoding. The output of the Expression Encoder + project parameterizes many of the project settings at the HTML level. + This makes it possible to change the URL at any time prior to deployment + without having to rebuild the project. The following code is the HTML + output of a sample Expression Encoder project. Note the CaptionSources + node in the initparams; that is the information item that informs the + Expression Encoder templates where to find the timed text file.

    + 
         <object data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
+       <param name="source" value="MediaPlayerTemplate.xap"/>
+       <param name="onerror" value="onSilverlightError" />
+       <param name="autoUpgrade" value="true" />
+       <param name="minRuntimeVersion" value="4.0.50401.0" />
+       <param name="enableHtmlAccess" value="true" />
+       <param name="enableGPUAcceleration" value="true" />
+       <param name="initparams" value='playerSettings = 
+         <Playlist>
+           <AutoLoad>true</AutoLoad>
+           <AutoPlay>true</AutoPlay>
+           <DisplayTimeCode>false</DisplayTimeCode>
+           <EnableOffline>false</EnableOffline>
+           <EnablePopOut>false</EnablePopOut>
+           <EnableCaptions>true</EnableCaptions>
+           <EnableCachedComposition>true</EnableCachedComposition>
+           <StretchNonSquarePixels>NoStretch</StretchNonSquarePixels>
+           <StartMuted>false</StartMuted>
+           <StartWithPlaylistShowing>false</StartWithPlaylistShowing>
+           <Items>
+             <PlaylistItem>
+             <AudioCodec></AudioCodec>
+             <Description></Description>
+             <FileSize>2797232</FileSize>
+             <IsAdaptiveStreaming>false</IsAdaptiveStreaming>
+             <MediaSource>thebutterflyandthebear.wmv</MediaSource>
+             <ThumbSource></ThumbSource>
+             <Title>thebutterflyandthebear</Title>
+             <DRM>false</DRM>
+             <VideoCodec>VC1</VideoCodec>
+             <FrameRate>30.00012000048</FrameRate>
+             <Width>508</Width>
+             <Height>384</Height>
+             <AspectRatioWidth>4</AspectRatioWidth>
+             <AspectRatioHeight>3</AspectRatioHeight>
+             <CaptionSources>
+               <CaptionSource Language="English" LanguageId="eng" Type="Captions" Location="thebutterflyandthebear.eng.capt.dfxp"/>
+             </CaptionSources>
+           </PlaylistItem>
+         </Items>
+      </Playlist>'/>       
+   </object>
+
    +

    The templates include a library that handles any parsing requirements + for the chosen timed text format, both at the level of getting the + basic text and timing into the TimelineMarkers used + by the run-time MediaElement, and for preserving + a subset of format information that can reasonably be crossmapped + from the formatting paradigm of the source (typically HTML/CSS) into + the Silverlight text object model of the text element that displays + the captions in the running Silverlight application.

    +

    The following is a brief description of the procedure for creating + a project that incorporates a separate timed text file.

    +
      +
    1. From the initial Expression Encoder screen, select New Project + from the File menu.
      2. +
    2. In the Load a new project dialog, select Silverlight + Project.
      3. +
    3. From the File menu, select Import. Choose the primary media source + file the project will use.
      4. +
    4. In the Text tab, find the listing for the media source file. Click + the + icon to the right of the file name. This opens + a file dialog.
      5. +
    5. Choose a timed text file to add to the project.
      6. +
    6. Build the project. By default the project produces a complete + output folder. The folder includes the media player template XAP, + the timed text file as a separate file, and additional libraries + and XAPs that support the basic template and/or the timed text capabilities.
      7. +
    7. Optionally, use the features in the Templates tab of Expression + Encoder to generate a template copy. You can edit the template copy + in other tools such as Expression Blend or Visual Studio, to change + the layout or behavior from the default media player template. Template + editing can address requirements such as applying a particular branding + or "look" to the player user interface.
      8. +
    +

    The following is a screenshot of the Expression Encoder (version 4) + interface. The + icon mentioned in Step 4 is highlighted + in this screenshot with a red diamond. The Templates tab + mentioned in Step 7 is on the right side, top-middle. Note that all + tabs of an Expression user interface are dockable; the orientations + shown here are the default, but could be in different locations on + any given computer or configuration.

    +
    + + +
    Expression Encoder screenshot
    + +
    + +
    +
    +

    Code parses timed text; MediaElement handles MarkerReached, + displays marker text in application-defined TextBox

    + +

    This example defines a very simple media player class that includes + a display surface, basic controls, and a text display for captions + as part of its default template. The usage code for this control in + XAML is simple, but only because the majority of the implementation + is present in the definition of the media player class.

    +

    + The following is example usage XAML:

    + 
     <local:SimpleMediaPlayerWithTT Width="480" Height="360" CaptionUri="testttml.xml" MediaSourceUri="/xbox.wmv" />
+
    +

    Note the attributes CaptionUri and SimpleMediaPlayerWithTT. Each + of these is a custom property of the media control class TTReader. + CaptionUri in particular references a URL, in this case a local URL + from the same server that serves the Silverlight XAP. The timed text + file could come from a different server also, but comes from a local + server in this example to conform to the behavior of the test file.

    +

    The following is the generic.xaml default template for the media player + control. The template is mainly relevant for showing the named elements + that are shown in the initialization code.

    + 
                   <ControlTemplate TargetType="local:SimpleMediaPlayerWithTT">
+                   <Border Background="{TemplateBinding Background}"
+                           BorderBrush="{TemplateBinding BorderBrush}"
+                           BorderThickness="{TemplateBinding BorderThickness}">
+                       <Grid x:Name="vroot">
+                           <Grid.RowDefinitions>
+                               <RowDefinition Height="*"/>
+                               <RowDefinition Height="50"/>
+                               <RowDefinition Height="80"/>
+                           </Grid.RowDefinitions>
+                           <MediaElement x:Name="player" AutoPlay="False"/>
+                           <StackPanel Orientation="Horizontal" Height="50" Grid.Row="1">
+                               <Button x:Name="player_play">Play</Button>
+                               <Button x:Name="player_pause">Pause</Button>
+                               <Button x:Name="player_stop">Stop</Button>
+                           </StackPanel>
+                           <ScrollViewer x:Name="scroller" Height="50" Grid.Row="2">
+                           <TextBox IsReadOnly="True" x:Name="captions"/>
+                           </ScrollViewer>
+                       </Grid>
+                   </Border>
+               </ControlTemplate>
+
    +

    The following is the initialization code that is for general infrastructure. OnApplyTemplate represents + the code wiring to the template-generated UI.

    + 
       public class SimpleMediaPlayerWithTT : Control
+   {
+       MediaElement player;
+       TextBox captions;
+       public SimpleMediaPlayerWithTT()
+       {
+           this.DefaultStyleKey = typeof(SimpleMediaPlayerWithTT);
+       }
+       public override void OnApplyTemplate()
+       {
+           base.OnApplyTemplate();
+           player = this.GetTemplateChild("player") as MediaElement;
+           captions = this.GetTemplateChild("captions") as TextBox;
+           scroller = this.GetTemplateChild("scroller") as ScrollViewer;
+           //event hookups and prop inits
+           player.MediaOpened += new RoutedEventHandler(OnMediaOpened);
+           player.MediaFailed += new EventHandler<ExceptionRoutedEventArgs>(OnMediaFailed);
+           player.Source = this.MediaSourceUri;
+           player.MarkerReached+=new TimelineMarkerRoutedEventHandler(player_MarkerReached);
+           Button player_play = this.GetTemplateChild("player_play") as Button;
+           player_play.Click += new RoutedEventHandler(player_play_click);
+           Button player_pause = this.GetTemplateChild("player_pause") as Button;
+           player_pause.Click += new RoutedEventHandler(player_pause_click);
+           Button player_stop = this.GetTemplateChild("player_stop") as Button;
+           player_stop.Click += new RoutedEventHandler(player_stop_click);
+       }
+       // mediaelement in template events
+       void OnMediaOpened(object sender, RoutedEventArgs e)
+       {
+           LoadCaptions(captionUri);
+       }
+       void OnMediaFailed(object sender, ExceptionRoutedEventArgs e)
+       {
+       }
+       void player_MarkerReached(object sender, TimelineMarkerRoutedEventArgs e)
+       {
+           captions.SelectedText = e.Marker.Text + "\n";
+           scroller.ScrollToVerticalOffset(scroller.ScrollableHeight);
+       }
+       void player_play_click(object sender, RoutedEventArgs e)
+       {
+           player.Play();
+       }
+       void player_pause_click(object sender, RoutedEventArgs e)
+       {
+           player.Pause();
+       }
+       void player_stop_click(object sender, RoutedEventArgs e)
+       {
+           player.Stop();
+       }
+       // properties
+       private Uri captionUri;
+       public Uri CaptionUri
+       {
+           get { return captionUri; }
+           set { captionUri = value; }
+       }
+       private Uri msUri;
+       public Uri MediaSourceUri
+       {
+           get { return msUri; }
+           set { msUri = value; }
+       }
+
    +

    The following is the logic that is particular to obtaining the separate + caption file. Some of this logic is referenced in the preceding template-specific + event handlers. This example uses the asynchronous WebClient technique + to request the file result of the CaptionUri. Make + sure to use AutoPlay=false or some other means to allow + time for the caption file to download before attempting to play the + media file.

    + 
           private void LoadCaptions(Uri captionURL)
+       {
+           WebClient wc = new WebClient();   // Web Client to download data files
+           if (captionURL != null)
+           {
+               wc.DownloadStringCompleted +=
+                   new DownloadStringCompletedEventHandler(OnDownloadStringCompleted);
+               wc.DownloadStringAsync(captionURL);
+           }
+       }
+       private void OnDownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
+       {
+           if (!e.Cancelled && e.Error == null && e.Result != "")
+           {
+               string xml = e.Result.Trim();
+               ParseCaptionData(new StringReader(xml));
+           }
+       }
+
    +

    The actual parsing can be done using a combination of the "XML + to Linq" facilities of an optional Silverlight library, and + standard .NET Framework string format APIs from the Silverlight core. + An implementation is NOT provided here, due to length considerations. + TTML supports a number of profiles and capabilities. The basic pattern + to follow in the implementation is to obtain the necessary text and + timing information, and to pass it to a function that might resemble + the following code template. This code template takes the raw information, + generates a new TimelineMarker, and adds it to the + collection assigned to the active MediaElement as + identified by "player" in the application.

    + 
           public void AddMediaMarker(string time, string type, string data)
+       {
+           TimelineMarker marker = new TimelineMarker();
+           marker.Time = new TimeSpan(0,0,(Convert.ToInt32(time.Trim())/1000));
+           // this logic could vary depending on how time is formatted in the input string; this one assumes raw milliseconds
+           marker.Type = type;
+           marker.Text = data.Trim();
+           player.Markers.Add(marker);
+       }
+
    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. That + application plays media that is expected to have text captioning.
      2. +
    2. Check that the text area in the textbox shows captions for the + media, and that the captions synchronize with media in an expected + way.
      3. +
    +
    +

    Expected Results

    +

    #2 is true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL29.html b/techniques/silverlight/SL29.html new file mode 100644 index 0000000000..50c2b3d939 --- /dev/null +++ b/techniques/silverlight/SL29.html @@ -0,0 +1,181 @@ +Using Silverlight "List" Controls to Define Blocks that + can be Bypassed

    Using Silverlight "List" Controls to Define Blocks that + can be Bypassed

    ID: SL29

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use some of the basic user interface + objects in Silveright to produce blocks of content that are identified + as a "List" to accessibility frameworks and to Silverlight's + own tab sequence navigation behavior.

    +

    Using the "List" technique results in a tab sequence behavior + whereby that element is treated as a single tab stop, even if that + element has consituent elements (the list items) that would otherwise + be considered additional tab stops in the main tab sequence. In the + default key handling, when the user presses the TAB key while focus + is on a List, the focus goes to the next element after the List. To + focus the items of the list, the user would press the Arrow keys rather + than TAB. In the Silverlight programming model for controls, this tab + sequence behavior is expressed by the TabNavigation property + holding the value of Once. The Silverlight ListBox is + a control that reports itself as "List" role, and that has + a default TabNavigation.Once value. + Thus ListBox as + per this technique is a lightweight technique for producing blocks + that can be bypassed. It is specifically a lightweight technique because + it can be accomplished by writing simple application-level XAML and + using only the Silverlight core libraries.

    +

    Silverlight also supports more full-featured techniques for producing + bypass blocks that are based on common user interface features such + as menus or toolbars. However, using toolbars in Silverlight is inherently + not as lightweight because the Silverlight core libraries themselves + do not include a ready-made toolbar. Silverlight provides a ContextMenu as + part of the Silverlight Toolkit extensions, but the behavior of this + particular menu does not easily address the bypass block scenario. + Silverlight includes all the infrastructure and necessary base classes + for defining a toolbar or a menu that could address the bypass block + scenario. Many third-party control implementations of menus and toolbars + exist, either as part of control packages that are sold by control + vendors, or through community mechanisms such as CodePlex or third-party + sites that provide free source code. For some examples, see the following:

    + +

    If application authors use a built-in control such as ListBox where + the accessibility framework reported role is not traditionally associated + with a navigation role, it is a best practice to set AutomationProperties.Name such + that the name informs the user of the purpose of the list control. + Otherwise, the role alone leaves this ambiguous. For example, an author + might name the list control "Navigation control".

    +

    Often the List control itself is focusable. So long as the List control + has a visual focus indicator, that behavior might be acceptable. However, + it might provide a better user experience to deliberately have the + List itself non-focusable, and instead have focus fall to the first + List item when focus reaches that region. Otherwise, the List might + be perceived as an "extra" tab stop to some users. To enable + that behavior, set IsTabStop to + false on the List control. The List itself still provides the intended + tab navigation behavior, and is still reported and identified to accessibility + frameworks and assistive technologies, even when the List container + is not focusable. This is shown in Example 1, by setting IsTabStop as + part of a Style.

    +

    When an accessibility framework presents a List, assistive technologies + are generally expected to continue to support use of the same key behavior + as the default behavior, and to report to users that the item is a + List when it is focused. If assistive technologies use the accessibility + framework APIs for navigation, the items in the list are considered + child elements. Navigating either by spatial direction (e.g. NAVDIR_RIGHT + in MSAA) or sequential direction (e.g. NAVDIR_NEXT in MSAA) skips the + list items and goes to the spatial/next peer.

    +

    Examples

    +
    +

    Customize the behavior and appearance of a ListBox to + construct a navigation control that can be bypassed

    + +

    In this example, several properties that influence the items presentation + behavior of the Silverlight core control ListBox are + adjusted to make it suitable for a navigation control. The behavior + of this control is that when the tab sequence reaches the control, "next" or + spatial navigation continues on to other controls, rather than through + the child controls of the list's items/options. This is enabled and + properly reported because ListBox reports its accessibility + framework role as "List", uses TabNavigation = Once as + default (because it is the default, TabNavigation does not have to + be set explicitly in the markup). ListBox has default + key handling for the arrow keys (to enable traversing the choices in + the menu by keyboard-only). The control could also be visually a menu + or perhaps other user interface control metaphors, depending on how + it is visually templated and composited. Regardless of appearance, + the accessibility framework and any assistive technologies based on + that framework will treat the control as a "List". This example + is templated as a horizontally oriented toolbar-type control. The items + in this example are Button controls, but could be + templated to not appear quite as button-like, or could instead use + another focusable control for the items such as a read-only TextBox.

    + 
    <UserControl x:Class="TabNavigation.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <ListBox AutomationProperties.Name="Navigation Control">
+           <ListBox.ItemsPanel>
+               <ItemsPanelTemplate>
+                   <StackPanel Orientation="Horizontal"/>
+               </ItemsPanelTemplate>
+           </ListBox.ItemsPanel>
+           <ListBox.ItemContainerStyle>
+               <Style TargetType="Control">
+                   <Setter Property="IsTabStop" Value="False"/>
+               </Style>
+           </ListBox.ItemContainerStyle>
+           <Button>Home</Button>
+           <Button>Search</Button>
+           <Button>Tools</Button>
+           <Button>Help</Button>
+       </ListBox>
+   </StackPanel>
+   <Button>Button here to show a focusable peer control beyond the list</Button>
+</UserControl>
+
    +

    The following is an illustration of what such a control might look + like:

    +
    + + +
    Screen shot of a focusable control beyond a list of buttons
    + +
    +

    This example is shown in operation in the working example of Tab Navigation.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Press TAB key to traverse typical tab sequence within the Silverlight + application. Verify that common areas in the user interface composition + ("blocks") that are reporting the List role per this technique + can be bypassed without having to tab through each constituent part + (the "items/children" of the List).
      3. +
    3. Verify that the list children are still accessible by keyboard, + by using ARROW keys rather than TAB.
      4. +
    4. Engage an accessibility framework test tool such as UIAVerify. + Examine roles in the automation tree, and verify that the List used + for bypass behavior reports a combination of name+role that is consistent + with the behavior.
      5. +
    5. Use a screen reader to verify that name and role are reported + properly.
      6. +
    +
    +

    Expected Results

    +

    #2 and #3 are true, and either #4 OR #5 are true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL3.html b/techniques/silverlight/SL3.html new file mode 100644 index 0000000000..18198b8531 --- /dev/null +++ b/techniques/silverlight/SL3.html @@ -0,0 +1,158 @@ +Controlling Silverlight MediaElement Audio Volume

    Controlling Silverlight MediaElement Audio Volume

    ID: SL3

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to adjust the volume for media + that is played in Silverlight applications, as implemented through + incorporating the Silverlight MediaElement object. + By default, a MediaElement will start playing its + media as soon as the UI loads completely AND the media source file + is downloaded. For details, see .

    +

    At any given time, a Silverlight MediaElement is associated + with exactly one media source as specified by the Source property + URI value. That source might be audio-only, or audio-video. The Volume property + of MediaElement affects the audio playback volume + of that particular source when it is playing. The Silverlight plug-in + does not have a user option that adjusts the volume of ALL Silverlight + applications as run within it, or a standardized user interface that + is always present for all uses of MediaElement. Therefore + it is the responsibility of Silverlight application authors to provide + an adequate set of user interface controls, including volume adjustment, + whenever the Silverlight application plays media that has an audio + component.

    +

    Examples

    +
    +

    Providing a volume control and a Mute control as part + of a set of user interface controls that go with a MediaElement

    + +

    In addition to the Play Pause Stop controls, application authors can + also provide a dedicated control that changes the Volume property + of the MediaElement. The typical control for setting + a discrete volume is Slider, because Slider is + designed for input of discrete values from a range. Adjusting Volume with + a data bound Slider changes the volume of any actively + playing media, independent of the system volume or of any other audio + source controlled by Silverlight. For Volume as set with the Slider, + the Binding in XAML declares the interaction between + the control and the MediaElement, without requiring + an event handler. However, not all users will be able to interact quickly + with a Slider, particularly if they are not using + a mouse. To help these users, application authors should also include + a "Mute" control. Rather than setting Volume to + 0, application authors should instead set IsMuted to + true. Note that Volume and IsMuted values + are not directly related; if IsMuted is set to true, + that does not set Volume to 0, nor does setting Volume to + zero cause IsMuted to be set true.

    + 
    <UserControl x:Class="MediaElementControls.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  >
+   <Grid x:Name="LayoutRoot">
+       <StackPanel>
+           <MediaElement x:Name="media" Source="/xbox.wmv"
+          Width="300" Height="300" 
+          AutomationProperties.Name="Video of new Fable game for XBox"           
+       />
+           <Grid Name="UIControls">
+               <Grid.ColumnDefinitions>
+                   <ColumnDefinition Width="*" />
+                   <ColumnDefinition Width="*" />
+                   <ColumnDefinition Width="*"/>
+               </Grid.ColumnDefinitions>
+               <Grid.RowDefinitions>
+                   <RowDefinition Height="*" />
+                   <RowDefinition Height="Auto" />
+                   <RowDefinition Height="20" />
+               </Grid.RowDefinitions>
+               <Button Click="StopMedia" 
+    Grid.Column="0" Grid.Row="1" Content="Stop" />
+               <Button Click="PauseMedia" 
+    Grid.Column="1" Grid.Row="1" Content="Pause" />
+               <Button Click="PlayMedia" 
+    Grid.Column="2" Grid.Row="1" Content="Play" />
+               <Button Click="MuteMedia" 
+   Grid.Row="2" Grid.Column="0" Content="Mute" />
+               <TextBlock Name="VolumeLabel" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">Volume</TextBlock>
+               <Slider Height="20"
+           Value="{Binding Volume, Mode=TwoWay, ElementName=media}"
+           Minimum="0" Maximum="1"
+           Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2"
+               AutomationProperties.LabeledBy="{Binding ElementName=VolumeLabel}"/>
+           </Grid>
+       </StackPanel>
+   </Grid>
+</UserControl>
+
    +

    The following is the C# logic.

    + 
     private void StopMedia(object sender, RoutedEventArgs e)
+ {
+     media.Stop();
+ }
+ private void PauseMedia(object sender, RoutedEventArgs e)
+ {
+     media.Pause();
+ }
+ private void PlayMedia(object sender, RoutedEventArgs e)
+ {
+     media.Play();
+ }
+ private void MuteMedia(object sender, RoutedEventArgs e)
+ {
+    Button target = sender as Button;
+    // mute if not muted, unmute if already muted, in either case make sure the button content for text and accessibility info is updated
+    if (!media.IsMuted)
+    {
+       media.IsMuted = true;
+       target.Content = "Unmute";
+    }
+    else
+    {
+        media.IsMuted = false;
+        target.Content = "Mute";
+    }
+ }
+
    +

    This example is shown in operation in the working example of Media Element Controls.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. It is + expected that the application incorporates a MediaElement.
      2. +
    2. Check that a control is available for controlling volume and that + the Volume control controls the volume of the playing media, independently + from system volume.
      3. +
    3. Check that control is available for muting, and that the Mute + control mutes the volume of the playing media, independently from + system volume.
      4. +
    +
    +

    Expected Results

    +

    #2 OR #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL30.html b/techniques/silverlight/SL30.html new file mode 100644 index 0000000000..a382311253 --- /dev/null +++ b/techniques/silverlight/SL30.html @@ -0,0 +1,162 @@ +Using Silverlight Control Compositing and AutomationProperties.Name

    Using Silverlight Control Compositing and AutomationProperties.Name

    ID: SL30

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to properly apply Silverlight control + composition techniques that can present text and non-text in UI as + part of the same control. This technique explains the consequences + that using control composition has on how that control is reported + to the accessibility frameworks that Silverlight supports.

    +

    Silverlight control composition concepts are relevant either to Silverlight + developers who define and package a Silverlight control for use by + other Silverlight authors, or for Silverlight application authors that + use Silverlight controls in their UI but use the content properties + of such controls to include several other elements in a composite layout.

    +

    In Silverlight programming and UI definition, Silverlight authors can use control + composition to define a parent control that initiates an action. The + control can have component parts, such as text and non-text composition + pieces that display within the control and have equivalent meaning. + Silverlight authors can rely on the text component of the control to + provide any text alternative for purposes other than the accessibility + framework. However, Silverlight authors should declare alternative + text on the control that is specifically consumed by accessibility + frameworks, by setting AutomationProperties.Name as + an attribute in XAML. In most cases, this text can be the same as the + visible text in the control composition, per the definition of 'label' + in SC 4.1.2.

    +

    Note that this technique does not result in a duplication of text, + as explained in H2. + This is because the element parts of control composition are either + inherently not focusable separately, or can be specified by instance-specific + properties to behave as if they cannot be focused. The parts in Silverlight + composition are not promoted to the accessibility frameworks as parts + of an application-specific UI Automation tree, so that control composition + as an implementation detail does not interfere with the usage of controls + by Silverlight application authors. The primary source of accessibility-related + information is the specific AutomationProperties.Name property + as set on the parent control in the composition, which is set by the + application author rather than the control author.

    +

    The control author does specify the information that is reported to + accessibility frameworks as the "ClassName", which is often + used by assistive technologies for identification purposes and is appended + to any "Name" value. For example, if an application author + includes a "Widget" control, and gives it an AutomationProperties.Name value + of "Show Map", an assistive technology might identify the + element as "Show Map widget". The "Show Map" part + comes from the application author code, and the "widget" part + comes from the Widget control implementation code.

    +

    Examples

    +
    +

    Button is composed with a StackPanel that contains nontext + and text content

    + +

    In this example the TextBlock that goes with the + graphic image conveys the text information for non-accessibility purposes. + The Button has internal composition that combines + text from a non-focusable TextBlock part and an image + part. Therefore the "Pause" Text is not promoted to serve + as "Name" through built-in Button automation + peer logic. The Silverlight application author is responsible for explicitly + setting AutomationProperties.Name on the Button so + that the text equivalent is available to the accessibility framework. + This example shows the XAML UI. The logic, which might be attached + to Button with a Click handler, is + not shown.

    + 
     <Button
+   Height="20" Width="50" AutomationProperties.Name="Pause" 
+ >
+   <StackPanel Orientation="Horizontal" >
+     <Image Height="12" Width="12" Source="/icon_pause.png"/>
+     <TextBlock Text="Pause"/>
+   </StackPanel>
+ </Button>
+
    +

    This example is shown in operation in the working example of Button Nontext Text Composition.

    + +
    +
    +

    Button composed, using binding and resource references + for strings

    + +

    This example is similar to Example 1 and produces the same result + at run time. This example shows the preferred technique of using the + Silverlight data binding and resource features to ensure that the strings + for text content and accessibility are the same strings. Also, this + gets the strings out of the XAML source and makes them simpler to localize + or edit. For more information on using resource strings through binding, + see Localizing + XAML topic on MSDN.

    + 
     <Application.Resources>
+  <resx:Resources x:Key="UIResourceStrings" />
+ </Application.Resources>
+  ...
+ <Button
+   Height="20" Width="50"
+   AutomationProperties.Name="{Binding PauseUIString, Source=UIResourceStrings}" />
+ >
+   <StackPanel Orientation="Horizontal" >
+     <Image Height="12" Width="12" Source="/icon_pause.png"/>
+     <TextBlock
+       Text="{Binding PauseUIString, Source=UIResourceStrings}"/>
+   </StackPanel>
+ </Button>
+
    + +
    +

    Tests

    +
    +

    Automation tree verifier

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree, and an object’s name text alternative as part of the tree. + (For example, use UIAVerify or Silverlight Spy; see Resources links.)
      3. +
    3. Check that the AutomationProperties.Name appears + as the Name value for identification in the automation + tree, whenever a composite control that has both text and non-text + elements is encountered.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +
    +

    Screen reader

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Engage the screen reader. With focus inside the Silverlight content + area, press TAB to focus to a composite control where both text and + non-text elements are present.
      3. +
    3. Check that the Name as applied to the control + instance, along with the class name of the control, is read by the + screen reader.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL31.html b/techniques/silverlight/SL31.html new file mode 100644 index 0000000000..b55a451788 --- /dev/null +++ b/techniques/silverlight/SL31.html @@ -0,0 +1,202 @@ +Using Silverlight Font Properties to Control Text Presentation

    Using Silverlight Font Properties to Control Text Presentation

    ID: SL31

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to change the presentation / visual + appearance of text, by setting several of the font-specific properties + in the Silverlight API. Changing such properties does not change the + semantic meaning of the text, nor does it alter the representation + of the text that is available to assistive technologies through the + Silverlight support of the UIA accessibility framework. By using font + properties, it is possible to introduce a wide variety of presentation + changes to fonts that do not introduce semantic elements that interfere + with an assistive technology's view of text in the Silverlight application. + In particular, adjusting font properties will make it possible to avoid + any need for use of images of text, yet still provide a wide range + of choices for text presentation.

    +

    Silverlight font properties exist on all controls, as well as on other + text elements that are not true controls. For controls, the font properties + apply in any case where the control enables a presentation mode that + has enclosed text areas in its layout. By setting Silverlight font + properties, it is possible to adjust presentation of font features + without changing the structural connotation of that control, or the + value of any control-specific property that contains plain-text. For + example, the FontSize property can be set on a Paragraph (not + a control) or on a Button (a control, and in this + case the font size changes apply to any text displayed in the button + content area). Font properties are also inheriting properties, meaning + that if applying a font property value to a container in a relationship, + those font property values can apply to child elements in the relationship. + For example, if a FontSize is applied to a RichTextBox, + that FontSize value is used by default by all the Paragraph items + displayed in the RichTextBox.

    +

    Similar to CSS, Silverlight font properties can be grouped as a Style. + That Style can be applied to all instances of a text + element type (for example to all cases of Paragraph) + or specifically referenced as a resource that is only used by certain + instances of a text element type. Either way, the Style feature + enables the separation of presentation from semantics for text elements, + and enables workflows where content authors supply the semantic text + and design-oriented authors adjust the related Silverlight styles. + For more information on the Silverlight concept of styles, see Control + Customization on MSDN.

    +

    The following Silverlight font properties are useful to style text + and avoid the need for text in images. Links in this list refer to + the Control class version of these properties.

    +
      +
    • The FontFamily property + is used to display the code aspect in a monospace font family (specifically, + FontFamily="Courier New").
      • +
    • The FontSize property + is used to display the text in a larger size.
      • +
    • The FontStyle property + is used to display text in italics.
      • +
    • The FontWeight property + is used to set how thick or thin characters in text should be displayed.
      • +
    • The FontStretch property + is used to control the spacing of letters in text.
      • +
    • The Foreground property + is used to display the color of text or text containers.
      • +
    • The Background property + can be used to display text on a non-text background.
      • +
    +

    So long as images of text are avoided, the text within a Silverlight + text element can be reported to the UI Automation accessibility framework + that Silverlight supports. That text is reported using the same basic + text content as is used for semantic text display in the UI. In other + words, exposing that text to assistive technologies that use UIA as + a framework does not require the Silverlight application author to + resort to automation-specific override properties such as AutomationProperties.HelpText; + the automation peers for text elements report all necessary text content + to automation as a built-in behavior of the text element controls. + For more information on UI Automation and text containers, see .

    +
    +

    CSS versus Silverlight font properties

    +

    Related CSS techniques mention that users can override any page-declared + CSS styling techniques, by invoking browser-specific features. For + example, using Internet Explorer, a user can use Tools / Internet Options, + Appearance / Accessibility to override certain classifications of CSS-controlled + font properties when displaying HTML documents, or to use a user-specific + style sheet for HTML documents. No browser-level equivalent feature + exists for user alteration of Silverlight text properties in the Silverlight + content area. Instead, application authors could supply controls that + enable similar font-property changing behavior, and include those controls + in the application-specific user interface. For more information on + this technique, see .

    +
    +
    +

    Glyphs

    +

    Silverlight API includes a related text presentation API Glyphs. Glyphs is + intended for specific decorative or niche language-support scenarios. + The Glyphs API does not offer as much UIA exposure + or the ability to programmatically change typical font properties; + the main scenarios for Glyphs are to package migrated + text content from document formats, or for purely decorative text in + a font that is not commonly found on a user system and only the glyphs + actually used in the Unicode string are subsetted into the Glyphs font + payload. If addressing the WCAG criteria, authors should avoid using Glyphs API + and instead use other text containers such as TextBox, + along with a font that is supplied in the application package or known + to exist on the end user system.

    +
    +

    Examples

    +
    +

    Run time applied font properties, style, and template

    + +

    This example illustrates applying runtime changes to a font property.

    +

    This example has UI in XAML, and logic in C#. The following is the + XAML.

    + 
    <UserControl x:Class="DocumentStructure.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <UserControl.Resources>
+       <Style x:Key="NewStyle" TargetType="Control">
+           <Setter Property="FontFamily" Value="Arial"/>
+           <Setter Property="FontSize" Value="30"/>
+           <Setter Property="Height" Value="40"/>
+       </Style>
+   </UserControl.Resources>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+   <RichTextBox IsReadOnly="True" Name="rtb" FontFamily="Algerian" FontSize="20">
+           <Paragraph>Call me Ishmael. Some years ago--never mind how long precisely--having little or no money in my purse, 
+           and nothing particular to interest me on shore, I thought I would sail about a little 
+and see the watery part of the world. It is a way I have of driving off the spleen and 
+regulating the circulation. Whenever I find myself growing grim about the mouth; whenever 
+it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before 
+coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my 
+<Hyperlink NavigateUri="http://en.wiktionary.org/wiki/hypo">hypos</Hyperlink>
+get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into 
+the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can. 
+This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself 
+upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, 
+almost all men in their degree, some time or other, cherish very nearly the same 
+feelings towards the ocean with me.
+           </Paragraph>
+           <Paragraph>There now is your
+               <Hyperlink 
+               NavigateUri="https://en.wikipedia.org/wiki/New_York_Harbor">insular city of the Manhattoes</Hyperlink>
+, belted round by wharves as Indian isles by coral reefs--commerce surrounds it 
+with her surf. Right and left, the streets take you waterward. Its extreme downtown is the 
+battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours 
+previous were out of sight of land. Look at the crowds of water-gazers there.
+           </Paragraph>
+           <Paragraph>Circumambulate the city of a dreamy Sabbath afternoon. 
+Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?
+--Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men 
+fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; 
+some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving 
+to get a still better seaward peep. But these are all landsmen; of week days pent up in lath 
+and plaster--tied to counters, nailed to benches, clinched to desks. How 
+then is this? Are the green fields gone? What do they here?
+           </Paragraph>
+       </RichTextBox>
+       <Button Name="swapper" Click="swapper_Click" Width="220">Swap styles</Button>
+   </StackPanel>
+</UserControl>
+
    +

    The following is C# code:

    + 
           private void swapper_Click(object sender, RoutedEventArgs e)
+       {
+           rtb.Style = this.Resources["NewStyle"] as Style;
+       }
+
    +

    This example is shown in operation in the working example of Document Structure.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Test that application of font properties as enabled in application + UI changes presentation, but does not change semantic meaning of + text.
      3. +
    3. Close the browser. Repeat the test with an accessibility framework + test tool running. There should be no difference in the structure + or relationships in the accessibility view beyond the presentation + changes.
      4. +
    +
    +

    Expected Results

    +

    #2 and #3 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL32.html b/techniques/silverlight/SL32.html new file mode 100644 index 0000000000..97dc7d219c --- /dev/null +++ b/techniques/silverlight/SL32.html @@ -0,0 +1,286 @@ +Using Silverlight Text Elements for Appropriate Accessibility Role

    Using Silverlight Text Elements for Appropriate Accessibility Role

    ID: SL32

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to choose a Silverlight text container + that provides appropriate behavior and accessibility roles for different + types of text content. How those roles interact with existing assistive + technologies that are interpreting Silverlight under the larger concept + of being an "HTML control part" is also a factor in which + Silverlight text container should be used in an application's composition.

    +

    Text containers can identified by role to accessibility frameworks, + and each type of Silverlight text container uses a different role. + Application authors should choose text containers that combine the + desired behavior in the user interface with an accessibility role that + can be consumed by existing assistive technology implementations.

    +

    The Silverlight core libraries define the following classes that are + specifically intended as text containers:

    + +
    +

    UI Automation programmatic access

    +

    For programming information that is relevant for how Silverlight application + authors produce the application, each text container has its own object + model/API. That API is documented on MSDN, specifically for each class TextBox; RichTextBox; TextBlock.) + However, rather than using the Silverlight-specific object models, + most assistive technologies that are capable of reporting on Silverlight + will choose to use UI Automation (or MSAA) to obtain information about + the Silverlight elements in general. Text containers within the Silverlight + content are identified through UIA accessibility roles. This is because + the assistive technologies can use UI Automation to query for ANY relevant + text items from the content (and chrome) of the user agent / browser + host, not just those that come from Silverlight. That can include the + HTML content, items created from scripting, CSS or other plugin-internal + object models and so on. In other words, text from Silverlight is integrated + into the overall UI Automation view of the user agent host as the top-level + application in a platform view. Different types of "text" in + a general sense might appear as different UI Automation patterns, as + is described below.

    +
    +
    +

    TextBox

    +

    A TextBox within the Silverlight content area is + reported to UI Automation as an Edit role (through MSAA, as Editable + Text).

    +

    Edit controls are expected to implement the Value + pattern for UIA, so that the value of the edit area can be queried + or set by a client. Assistive technologies can use this value as + a text-string value for screen readers or other purposes.

    +

    In typical user interface design, a form with an input field also + includes a label or other explanatory text that is proximally close + to the input field. In order to maintain proper reading order, the + label should typically appear immediately before the input field. This + general model should also be used for Silverlight user interface design. + For more information on labeling for TextBox controls, + see .

    +
    +
    +

    RichTextBox

    +

    A RichTextBox within the Silverlight content area + is reported to UI Automation and MSAA as a Document role.

    +

    A RichTextBox can either be set to be a read-only + control, or left as a read-write control. In the latter case, users + can insert a text cursor and make changes to the text. It is more common + in Silverlight programming to set the RichTextBox to + be read-only; in this scenario the reason for using RichTextBox is + because TextBlock did not offer the range of text + formatting options that are possible from a RichTextBox.

    +

    In UIA, a document is generally expected to support the Text + pattern for UI Automation. However, to read the text from a RichTextBox, + the assistive technology does not necessarily have to implement code + that handles the entirety of the information that the Text pattern + reports.

    +
    +
    +

    More about the Text pattern

    +

    The Text pattern provides APIs to iterate over the internal structure + of a document and return text ranges. Each such text range can be queried + for specific properties, and can return its plain text string value + to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs. + The following is a snippet of a Silverlight-specific UI Automation + tree utility to give a general idea of the APIs involved. Note that + these are not specifically Silverlight APIs; they are .NET Framework + APIs. .NET Framework or Windows Automation APIs are generally what + is used for programming a UI Automation client, which runs on a platform + runtime rather than the Silverlight runtime. Using the Text pattern + is generally what is necessary in order for an assistive technology + to obtain a comprehensive view of the "value" for a document + role object.

    + 
    private void FindTheTextPatterns_Click(object sender, RoutedEventArgs e)
+{
+   if (allSilverlight != null && allSilverlight.Count>0)
+   {
+       //for simplicity just processing item 0, not assuming more than one SL control
+       //on the page because this app controls the page being loaded
+       AutomationElementCollection documentsList = allSilverlight[0].FindAll(TreeScope.Descendants,
+           new PropertyCondition(AutomationElement.ControlTypeProperty,ControlType.Document)
+   );
+   for (int j=0; j< documentsList.Count;j++) {
+       TextPattern targetTextPattern = 
+         documentsList[j].GetCurrentPattern(TextPattern.Pattern) as TextPattern;
+       if (targetTextPattern!=null) {
+           TextPatternRange tr = targetTextPattern.DocumentRange;
+           MessageBox.Show(tr.GetText(Int16.MaxValue));
+       }
+   }
+}
+private void GetAllSilverlight()
+{
+   allSilverlight = this._clientAppRootInstance.FindAll(TreeScope.Descendants,
+      new PropertyCondition(AutomationElement.ClassNameProperty, "MicrosoftSilverlight"));
+}
+
    +

    MSAA has only limited possibilities for interacting with a Document + role, and MSAA code for attempting to do so is not shown.

    +
    +
    +

    TextBlock

    +

    + TextBlock is reported as a Text role in UI Automation. TextBlock has + several important characteristics:

    +
      +
    • A TextBlock is always read-only; only the application + author can declare the text, users cannot change it.
      • +
    • A TextBlock is not considered to be a true control + in the Silverlight object model (it is not a class derived from Control). + The practical implications of this to accessibility scenarios is + that a TextBlock is not in the default tab sequence, + cannot be manually added to any tab sequence, and cannot be keyboard-focused + either programatically or by the user.
      • +
    • + TextBlock has a deliberately limited range of + block / span formatting options. If the application author desires + a wider range of formatting options, for example supporting a "Paragraph" metaphor + for blocks of text, a read-only RichTextBox should + be used instead.
      • +
    +

    If the user relies solely on navigating a Silverlight application + using the TAB sequence, such navigation will skip over any TextBlock in + the interface. This could have implications for how users who use screen + readers can interact with the Silverlight content. Screen readers typically + read text only from the currently focused element in cases where the + user is moving through the TAB sequence or changing focus within the + application, and thus cannot read the text from a TextBlock in + such a mode. However, most screen readers also have modes for reading + text that is not necessarily focusable. These are generally the same + modes that screen readers use for a conventional non-interactive HTML + document text. For example, some screen readers support a mode that + reads text by line, or by word. These modes can read text from a TextBlock.

    +
    +

    Examples

    +
    +

    Structure from a container that has non-semantic role + in UI Automation, and TextBlock for text

    + +

    If viewed as a UI Automation tree, the StackPanel and Grid do + not exist explicitly in the tree view, because they do not serve a + semantic role (only a presentation role). Rather, the tree consists + of the items that report some kind of semantic control type. The semantic + children of the containers are still reported in the order that they + were declared, when viewed as children of the next semantic container + upwards in the tree, and despite the containers themselves being abstracted + out of the tree. This defines the reading order. This example is a + large block of text with intentionally simple formatting, where the + only formatting is to represent paragraphs as separate TextBlock elements + to support an adaptive layout, but no Run blocks within.

    +

    When viewed with assistive technologies that represent the contents, + each TextBlock is a control type of Text. Screen readers + can use document reading modes such as virtual cursor modes to read + the content from each element and each element's content, following + the same reading order as is declared in the XAML. For example, in + JAWS 12, readers can read out this text container line by line using + (Jaws Key)+DownArrow. It is actually JAWS that determines the line + length, because the line length otherwise is defined only by the adaptive + layout at runtime, which is not reported to UIA.

    + 
      <StackPanel x:Name="LayoutRoot" Background="White">
+          <TextBlock>Call me Ishmael. Some years ago--never mind how long precisely--
+having little or no money in my purse, and
+nothing particular to interest me on shore, I thought I would sail about a little 
+and see the watery part of the world. It is a way I have of driving off the spleen 
+and regulating the circulation. Whenever I find 
+myself growing grim about the mouth; whenever it is a damp, drizzly November in 
+my soul; whenever I find myself involuntarily pausing before coffin warehouses, 
+and bringing up the rear of every funeral I meet;
+and especially whenever my hypos get such an upper hand of me, that it requires a strong moral 
+principle to prevent me from
+deliberately stepping into the street, and methodically knocking people's hats off--then, 
+I account it high time to get to sea as
+soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato 
+throws himself 
+upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, 
+almost all men in their degree, some time or other, cherish very nearly the same feelings towards the 
+ocean with me.
+          </TextBlock>
+          <TextBlock>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles 
+          by coral reefs--
+commerce surrounds it with her surf. Right and left, the streets take you waterward. 
+Its extreme downtown is the battery, where
+that noble mole is washed by waves, and cooled by breezes, which a few hours previous 
+were out of sight of land. Look at the crowds of water-gazers there.
+          </TextBlock>
+          <TextBlock>Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook 
+          to Coenties Slip, and from thence, by Whitehall, northward.
+What do you see?--Posted like silent sentinels all around the town, stand thousands 
+upon thousands of mortal men fixed in ocean
+reveries. Some leaning against the spiles; some seated upon the pier-heads; 
+some looking over the bulwarks of ships from China; 
+some high aloft in the rigging, as if striving to get a still better seaward peep. 
+But these are all landsmen; of week days pent
+up in lath and plaster--tied to counters, nailed to benches, clinched to desks. 
+How  then is this? Are the green fields gone? What do they here?
+          </TextBlock>
+  </StackPanel>
+
    + +
    +
    +

    Text containers and their UIA representation

    + +

    The following example is intended as sample XAML to view in an accessibility + framework viewer, to see the various names, roles, and patterns for + obtaining value.

    + 
       <StackPanel x:Name="LayoutRoot">
+       <TextBox Text="This is a TextBox"/>
+       <RichTextBox>
+           <Paragraph>This is a RichTextBox.</Paragraph>
+       </RichTextBox>
+       <TextBlock Text="This is a TextBlock"/>
+   </StackPanel>
+
    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To see + UI Automation, use Microsoft Windows as platform.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree. (For example, use UIAVerify or Silverlight Spy; see Resources + links.)
      3. +
    3. Verify that TextBox elements in the Silverlight + user interface have the Edit role, that RichTextBox elements + have the Document role, and TextBlock has Text role + in UI Automation.
      4. +
    4. Verify that the text content can be programmatically determined + by techniques that are appropriate for that role.
      5. +
    +
    +

    Expected Results

    +

    #3 and #4 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL33.html b/techniques/silverlight/SL33.html new file mode 100644 index 0000000000..cfa2f2fa31 --- /dev/null +++ b/techniques/silverlight/SL33.html @@ -0,0 +1,218 @@ +Using Well-Formed XAML to Define a Silverlight User Interface

    Using Well-Formed XAML to Define a Silverlight User Interface

    ID: SL33

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the characteristics of the + XAML language to support basic parsing requirements that both applications + and accessibility frameworks rely upon. This technique explains the + role of XAML in the overall Silverlight development and application + architecture, in particular for defining the elements that make up + a Silverlight user interface. This technique also present some basic + facts about XAML as a language; more information of this nature is + also included in .

    +

    XAML is a markup language for object instantiation. XAML can be incorporated + into a technology such as Silverlight. A specific XAML vocabulary can + be defined by a technology such as Silverlight, and the vocabulary + can be extended by anyone that provides suitable backing code. For + example, a Silverlight application author can define a custom class, + and the application author or potentially other Silverlight application + authors can use XAML to instantiate instances of the custom class.

    +

    XAML has a published + language specification.

    +

    XAML does not necessarily declare the entirety of the object tree + that a Silverlight client runtime loads, but XAML typically declares + the majority of the objects/elements that represent the Silverlight + application's user interface. The objects and values that are used + for accessibility scenarios are often closely related to the standard + user interface, and thus accessibility-related properties are typically + declared in XAML rather than in code, even though setting the values + in code is technically possible.

    +

    For more information on XAML in Silverlight, see Silverlight + XAML Overview on MSDN.

    +
    +

    XAML and XML

    +

    XAML is based on XML, and shares many of its language features. Some + of the language features that are directly relevant to the stated intent + of SC4.1.1 and to 4.1.1 related techniques include:

    +
      +
    • Well-formedness: The definition of well-formed XAML is the same + as the XML definition. XAML processors, including the Silverlight + runtime XAML parser, will block loading XAML that is not well formed.
      • +
    • Duplicate attributes: Unless specially configured for scenarios + such as design-time support, XAML processors will block loading XAML + where elements contain duplicate attributes.
      • +
    • Quote matching: mismatched quote matching for attribute values + in XAML constitutes XAML that is not well formed.
      • +
    +

    Some XAML language features that are analogous to XML but have some + technology-specific differences include:

    +
      +
    • Identifiers: XAML defines a Name directive, which + is analogous to xml:id in that Name serves + as the unique identifier of an element. However, XAML defines an + additional concept of a XAML namescope, which permits a XAML document + to contain multiple XAML namescopes as a factoring technique. Thus, + identical Name values are permitted in a XAML document + so long as each is defined in a separate XAML namescope. XAML namescopes + are associated with elements, such that the extent of each XAML namescope + is understood by XAML processors.
      • +
    • Schemas and vocabularies: A notable difference between XAML and + XML is that a XAML vocabulary is not typically represented in existing + XML schema definition formats such as XSD or DTD. XAML includes inheritance + and reference features that cannot adequately be expressed in XSD + or other existing XML schema representation formats. This affects + the "elements are nested according to their specifications" consideration + of SC4.1.1. XAML definitely has the ability to enforce nesting restrictions + as represented by a XAML vocabulary. However, XAML validity for a + vocabulary is deliberately fluid, in order to support extension by + user code. XAML validity is determined by a combination of a XAML + processor, a XAML concept known as a XAML schema context, and the + code that backs the XAML and defines any objects being instantiated + as a parsing result. Typically, design time tools such as Microsoft + Visual Studio can adequately duplicate the runtime validity characteristics + of a XAML vocabulary. Using these tools, application authors can + both verify XAML validity as well as receive design-time information + for how to correct any XAML validity errors.
      • +
    +
    +
    +

    XAML parsing and HTML parsing

    +

    In the Silverlight implementation, XAML is like HTML in that it is + loaded and parsed just-in-time. Silverlight XAML is not precompiled + to binary or MSIL (the language-neutral CLR runtime format). Instead,Silverlight + XAML is transmitted or stored as plain text, either loose or packaged + as resources in a library. Thus Silverlight XAML is human readable + as well as machine readable.

    +

    However, unlike HTML, Silverlight XAML is only intended to be loaded + and interpreted by the Silverlight runtime, rather than multiple possible + user agents that each implement an HTML engine. HTML is a language + where the behavior is also specified. In contrast, XAML is a language + for referencing constructs that are defined in runtime libraries, and + the functional specification of the XAML language itself is minimal + (intrinsics; language rules; primitive types). Layout, appearance, + type-member sets, roles, etc. are all left up to specific frameworks + and vocabularies that use XAML. Behavior associated with a given XAML + construct is based on type definitions made in a runtime library. For + Silverlight XAML, the types are from Silverlight core libraries, but + often the definitions come from libraries that are available to the + Silverlight runtime as part of an application's packaging for distribution.

    +

    XAML is generally speaking strict, and will raise parsing errors if + XAML contains elements that are not recognized. Such parsing errors + generally present the information in the XAML from resulting in any + objects being created, which in turn prevents a Silverlight application + from running. This is different from typical (non-xHTML) HTML, where + implementations are permitted to contain nonrecognized elements or + attributes and ignore them.

    +
    +

    Examples

    +
    +

    XAML in design tools for Silverlight

    + +

    A developer utilizes features in their Silverlight XAML authoring + tool to ensure that:

    +
      +
    • XAML is well formed
      • +
    • XAML is valid according to Silverlight parser and all reference + assemblies
      • +
    • XAML Names are unique in namescope
      • +
    • XAML has no duplicate attributes
      • +
    +
    +

    More about design tools and XAML

    +

    Silverlight XAML is able to be loaded by design tools for Silverlight. + In the design tool, the XAML is interpreted much like the runtime interprets + it, in order to show the visual representation of the Silverlight application. + In addition, the design tool might implement design surfaces in which + the user interface can be changed, and typically provides a way to + save any changes made in the tool back into the loaded XAML.

    +

    At design time, tools such as Microsoft Visual Studio or Microsoft + Expression might provide opportunities to correct any XAML errors before + the Silverlight application is compiled and packaged for deployment. + This might be implemented by performing static analysis of the XAML, + by forwarding the design tool's own parser errors as it renders the + design surface, or by forwarding linking errors that are identified + by a precompile step (for example, missing event handlers raise a XAML + error from precompile). This behavior is sometimes identified as a design + mode behavior in Microsoft documentation and other documentation + about Visual Studio or specific tools.

    +

    Regardless of how a given XAML file behaves while being interacted + with in a design mode, it is the Silverlight runtime XAML parser on + each client installation that is the ultimate determinant of whether + the XAML is valid or invalid.

    +
    + +
    +
    +

    Silverlight application consumer

    + +

    A consumer views a Silverlight application that is hosted in an HTML + page. If the Silverlight application has valid XAML, the Silverlight + content loads, and the fact that the XAML-based UI loaded at all is + assurance that:

    +
      +
    • XAML is well formed
      • +
    • XAML is valid
      • +
    • XAML validity is partially based on correct type mapping of all + elements referenced in XAML, according to Silverlight XAML parser + and all reference assemblies included by that application
      • +
    • XAML Names are unique in namescope
      • +
    • XAML has no duplicate attributes
      • +
    • XAML-defined properties that are relevant for assistive technology + (for example AutomationProperties.Name as described + by other Silverlight techniques) are available
      • +
    + +
    +

    Tests

    +
    +

    Pass case

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. That + application is known to consume Silverlight XAML.
      2. +
    2. Verify that the application runs correctly and displays user interface.
      3. +
    +
    +

    Expected Results

    +

    #2 is true.

    +
    +
    +

    Fail case

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. That + application is known to consume Silverlight XAML, and the XAML is + known to be deliberately invalid.
      2. +
    2. Verify that the application did not run.
      3. +
    +
    +

    Expected Results

    +
      +
    1. #2 is true.
      2. +
    +

    Note that it is common that an error message is displayed to users + in HTML, which is implemented by handling the JavaScript OnError event + emitted by the Silverlight plugin. XAML parse errors are forwarded + to JavaScript errors and can be handled in this way. However, it is + also possible that the application is production-ready, and deliberately + does not expose any JavaScript errors, whether Silverlight managed + code errors or not. If seeing the specific error is important, the + test might need to be run against a preproduction or debug version + of the application.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL34.html b/techniques/silverlight/SL34.html new file mode 100644 index 0000000000..ed4d521e1f --- /dev/null +++ b/techniques/silverlight/SL34.html @@ -0,0 +1,264 @@ +Using the Silverlight Default Tab Sequence and Altering Tab Sequences + With Properties

    Using the Silverlight Default Tab Sequence and Altering Tab Sequences + With Properties

    ID: SL34

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the default Silverlight + tab sequence, or alternatively to apply the options that Silverlight + application authors can use for altering the tab sequence. Application + authors might alter the tab sequence in cases where the default tab + sequence is not desirable for some reason, and those reasons might + vary per application or application scenario. The tab sequence can + be altered in order to create a meaningful sequence in the tab order, + so that assistive technologies that rely on traversal of focusable + elements can use and determine the meaningful sequence.

    +

    Silverlight uses structured definitions for defining its user interface + presentations, where the declaration order is significant because it + becomes the structure of the run-time visual tree. The structured definitions + also define the layout and presentation structure in most cases. The + structured definition concept is described in more detail in .

    +

    The Silverlight development platform attempts to create an overall + system where the logical order of how elements are defined in XAML + and code, and then presented in a user interface, will also match a + logical tab sequence and logical reading order when presented to the + user. In many cases, a Silverlight application author can write an + application without necessarily worrying about the tab sequence, can + test the tab sequence during a verification and testing phase of development, + and will not need to set any specific properties to adjust the tab + sequence. As a broad generalization, a Silverlight tab sequence will + be constructed so that it traverses elements left to right, and top + to bottom, and will behave similarly to how HTML would behave if the + HTML analogs of Silverlight elements were constructed and presented + in the same way. However, there are specific Silverlight controls that + deliberately alter the tab sequence, or whose elements are made keyboard-accessible + through a keyboard navigation technique other than TAB. For more information, + see Focus + Overview on MSDN.

    +
    +

    How Silverlight implements tab sequence concepts

    +

    The Silverlight programming model defines a Control class + that is a base class of many of the practical controls that produce + a Silverlight application user interface. One of the behaviors of the Control class + is that only a Control can receive keyboard focus + as a discrete element within the Silverlight content area.

    +

    When a Silverlight application user interface is constructed from + the visual tree, a default tab sequence for all Silverlight content + is also constructed, using the same principles of order that were used + by the visible layout. This default tab sequence is usually adequate + as a tab sequence that supports users that press the TAB key to traverse + the UI. The same TAB sequence and/or the focusable state of controls + is also used by many assistive technologies or modes of assistive technologies + to construct the representation of the interface for the Silverlight + content.

    +

    For cases where developers decide that the default tab sequence is + not adequate, the developer can take one of two approaches for changing + the tab sequence:

    +
      +
    • Change other properties of the control where a change to the tab + sequence happens as a secondary effect.
      • +
    • Reorder the tab sequence directly.
      • +
    +
    +
    +

    Changing control properties

    +
      +
    • Setting the Visibility property of a control + to Collapsed causes the control to no longer render + in the UI. As a secondary effect, that control is removed from the + tab sequence.
      • +
    • Setting the IsEnabled property of a control to + false causes the control to no longer be focusable by keyboard or + clickable by the mouse. In many cases, the visual appearance of the + control changes also, through a theme style. For example, the control + may appear as gray rather than black. As a secondary effect, that + control is removed from the tab sequence.
      • +
    +
    +
    +

    Changing specific tab properties

    +
      +
    • Setting the IsTabStop property of a control to + false causes the control to no longer be focusable by keyboard or + programmatic focus, and that control is removed from the tab sequence.
      • +
    • Setting the TabIndex property of a control to + a specific index causes the control to be inserted at that position + in the tab sequence. The default value of TabIndex is + Single.MaxValue, therefore any non-default value promotes that control + to be first in an otherwise default tab sequence. More typically, + authors would specify a TabIndex for any controls + that are involved in a deliberate segment of tab order re-ordering.
      • +
    +
    +
    +

    Tab order and language

    +

    Left-to-right is the default only for languages that use left-to-right + reading order. For languages that use right-to-left reading order, + right-to-left is also the default tab order as implemented by Silverlight + runtime behavior. That language preference is declared by the acting CultureInfo. + For more information on CultureInfo, see .

    +
    +

    Examples

    +
    +

    Default tab order, based on ordering in the StackPanel

    + +

    In this example, a StackPanel has a natural layout + order of top-to-bottom, and that will also be the tab order of each StackPanel child + element (FirstName, then LastName).

    + 
       <StackPanel x:Name="LayoutRoot" Background="White">
+       <StackPanel Orientation="Horizontal">
+           <TextBlock Name="lbl_FirstName">First name</TextBlock>
+           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_FirstName}" Name="tbFirstName" Width="100"/>
+       </StackPanel>
+       <StackPanel Orientation="Horizontal">
+           <TextBlock Name="lbl_LastName">First name</TextBlock>
+           <TextBox AutomationProperties.LabeledBy="{Binding ElementName=lbl_LastName}" Name="tbLastName" Width="100"/>
+       </StackPanel>
+   </StackPanel>
+
    +

    This example is shown in operation in the working example of Tab Sequence.

    + +
    +
    +

    Tab order, modified by TabIndex

    + +

    A form is marked up using a data table that includes the fields of + the groom in the first column and the fields of the bride in the second + column. The order in the content is row by row but the author feels + it is more logical for users to navigate the form column by column. + This way, all the groom's criteria can be filled in before moving on + to the bride's criteria. The TabIndex attributes of + the Silverlight elements are used to specify a tab order that navigates + column by column. This example specifically illustrates how changing + tab order can change the meaningful sequence.

    + 
     <UserControl x:Class="TabSequence.MainPage"
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ >
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <TextBlock>he first column contains the search criteria 
+ of the groom, the second column the search criteria of 
+ of the bride</TextBlock>
+       <Grid>
+       <Grid.RowDefinitions>
+         <RowDefinition/>
+         <RowDefinition/>
+         <RowDefinition/>
+         <RowDefinition/>
+       </Grid.RowDefinitions>
+       <Grid.ColumnDefinitions>
+         <ColumnDefinition/>
+         <ColumnDefinition/>
+         <ColumnDefinition/>
+       </Grid.ColumnDefinitions>
+       <TextBlock>Search criteria</TextBlock>
+       <TextBlock Grid.Column="1">Groom</TextBlock>
+       <TextBlock Grid.Column="2">Bride</TextBlock>
+       <TextBlock Grid.Row="1">First name</TextBlock>
+       <TextBox Grid.Row="1" Grid.Column="1" TabIndex="1"/>
+       <TextBox Grid.Row="1" Grid.Column="2" TabIndex="4"/>
+       <TextBlock Grid.Row="2">Last name</TextBlock>
+       <TextBox Grid.Row="2" Grid.Column="1" TabIndex="2"/>
+       <TextBox Grid.Row="2" Grid.Column="2" TabIndex="5"/>
+       <TextBlock Grid.Row="3" >Place of birth</TextBlock>
+       <TextBox Grid.Row="3" Grid.Column="1" TabIndex="3"/>
+       <TextBox Grid.Row="3" Grid.Column="2" TabIndex="6"/>
+       </Grid>
+   </StackPanel>
+ </UserControl>
+
    +

    This example is shown in operation in the working example of Tab Sequence TabIndex.

    + +
    +
    +

    Tab order, modified by changing runtime Control properties

    + +

    In this example, a radio button choice in a form controls whether + certain other fields in the form are relevant or not relevant. The + current radio button selection toggles the IsEnabled property + in such fields to enable or disable them based on how the user selected + the preceding logical element, which also affects whether the fields + appear in the further tab sequence. The following is UI definition + in XAML.

    + 
    <UserControl x:Class="TabSequence.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <StackPanel x:Name="LayoutRoot" Background="White">
+       <TextBlock>Registration</TextBlock>
+       <Grid>
+       <Grid.RowDefinitions>
+         <RowDefinition/>
+         <RowDefinition/>
+         <RowDefinition/>
+         <RowDefinition/>
+       </Grid.RowDefinitions>
+       <Grid.ColumnDefinitions>
+         <ColumnDefinition/>
+         <ColumnDefinition/>
+         <ColumnDefinition/>
+       </Grid.ColumnDefinitions>
+           <StackPanel Orientation="Horizontal">
+               <RadioButton GroupName="Registration" Checked="RadioButton_CheckedG">Guest</RadioButton>
+               <RadioButton GroupName="Registration" Checked="RadioButton_CheckedC">Custom</RadioButton>
+           </StackPanel>
+               <TextBlock Grid.Row="1">First name</TextBlock>
+           <TextBox x:Name="tb_fn" IsEnabled="false" Grid.Row="1" Grid.Column="1" />
+           <TextBlock Grid.Row="2">Last name</TextBlock>
+           <TextBox  x:Name="tb_ln" IsEnabled="false" Grid.Row="2" Grid.Column="1" />
+       </Grid>
+   </StackPanel>
+</UserControl>
+
    +

    The following is event handler code.

    + 
           private void RadioButton_CheckedC(object sender, RoutedEventArgs e)
+       {
+           tb_fn.IsEnabled = true;
+           tb_ln.IsEnabled = true;
+       }
+       private void RadioButton_CheckedG(object sender, RoutedEventArgs e)
+       {
+           tb_fn.IsEnabled = false;
+           tb_ln.IsEnabled = false;
+       }
+
    +

    This example is shown in operation in the working example of Tab Sequence Enabled.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Engage the screen reader. Press the TAB key to traverse the sequence + of elements inside the Silverlight content area.
      3. +
    3. Verify that the order in which elements are traversed in a tab + sequence is also the expected order of the elements as they are presented + visually, particularly in such cases where the order of each element + is significant per SC + 1.3.2.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL35.html b/techniques/silverlight/SL35.html new file mode 100644 index 0000000000..c2dfdf3258 --- /dev/null +++ b/techniques/silverlight/SL35.html @@ -0,0 +1,304 @@ +Using the Validation and ValidationSummary APIs to Implement Client + Side Forms Validation in Silverlight

    Using the Validation and ValidationSummary APIs to Implement Client + Side Forms Validation in Silverlight

    ID: SL35

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to use the Silverlight Validation API. + The Validation API associates the validation logic with form input + elements that properly support accessible text both for the initial + entry and for any error identification and suggestion that is displayed + in the user interface.

    +

    Application authors can either associate Validation.Errors output + with specific UI elements, include an initially hidden ValidationSummary user + interface element, or both. The example shown in this technique uses + both ValidationSummary and Validation.Errors. + The ValidationSummary is the most appropriate technique + for providing text feedback after a form submission attempt, because + assistive technologies pick it up as a discrete focusable element in + the interface representation. The Validation.Errors technique + is perhaps a better cognitive user experience for sighted users, because + it presents the specific error suggestions in closer proximity to the + input items that are in error.

    +

    This technique relies on several Silverlight features: AutomationProperties, + the Name property for identifying specific UI elements, + the Validation and ValidationSummary API, + the ElementName variation of Silverlight data binding, and the general + behavior of TextBox elements.

    +
    +

    Contrast for validation states of the Label control

    +

    Silverlight version 4's default visual styles have a bug where the + colors used to indicate an invalid field entry by changing the color + of the foreground text do not satisfy the 4.5:1 contrast ratio per + SC 1.4.1. To correct for this visual bug, application authors should + copy the control template for the Label control, and + adjust the color used for the validation state. This is shown in Example + 1; the resource "LabelStyle1" was generated by copying + the default Label style using Microsoft Expression + Blend. Then, the value was changed in the copied template, and the + changed template was referenced and included in the application. The + specific changed line is indicated by a comment in the Example 1 sample + markup.

    +
    +

    Examples

    +
    +

    Two form fields with validation on Submit, and an error + identification/suggestion system and UI on the client side

    + +

    In this example, the form fields correspond to a data object that + implements a view model. Silverlight uses the view model and data annotations + to generate some of its UI, notably the names of the fields are bound + to the original view model names from the data. The ValidationSummary + API is defined in a "Client SDK" library System.Windows.Controls.Data.Input.dll, + which is included as part of the project and the distributable.

    +

    This example has a UI defined in XAML and logic defined in C#. The + following is the XAML UI.

    + 
    <UserControl x:Class="AccessibleValidation.MainPage"
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+ xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
+<UserControl.Resources>
+ <Style x:Key="LabelStyle1" TargetType="sdk:Label">
+ <Setter Property="IsTabStop" Value="False"/>
+ <Setter Property="HorizontalContentAlignment" Value="Left"/>
+ <Setter Property="Template">
+  <Setter.Value>
+   <ControlTemplate TargetType="sdk:Label">
+    <Grid>
+     <VisualStateManager.VisualStateGroups>
+      <VisualStateGroup x:Name="CommonStates">
+       <VisualState x:Name="Normal"/>
+       <VisualState x:Name="Disabled"/>
+      </VisualStateGroup>
+      <VisualStateGroup x:Name="ValidationStates">
+       <VisualState x:Name="Valid"/>
+       <VisualState x:Name="Invalid">
+        <Storyboard>
+         <ColorAnimation Duration="0" To="#FFF00000"
+         Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
+         Storyboard.TargetName="ContentControl" d:IsOptimized="True"/>
+         //above is the line where color was adjusted from default Red to FFF00000, 
+         //to satisfy the 4.5:1 contrast requirement
+        </Storyboard>
+       </VisualState>
+      </VisualStateGroup>
+      <VisualStateGroup x:Name="RequiredStates">
+       <VisualState x:Name="NotRequired"/>
+       <VisualState x:Name="Required">
+         <Storyboard>
+          <ObjectAnimationUsingKeyFrames Duration="0" 
+          Storyboard.TargetProperty="FontWeight" 
+          Storyboard.TargetName="ContentControl">
+           <DiscreteObjectKeyFrame KeyTime="0" Value="SemiBold"/>
+          </ObjectAnimationUsingKeyFrames>
+         </Storyboard>
+        </VisualState>
+       </VisualStateGroup>
+      </VisualStateManager.VisualStateGroups>
+      <Border BorderBrush="{TemplateBinding BorderBrush}" 
+      BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
+      CornerRadius="2" Padding="{TemplateBinding Padding}">
+       <ContentControl x:Name="ContentControl" Cursor="{TemplateBinding Cursor}" 
+         ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
+         Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}"
+         FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" 
+         FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
+         HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+         IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalAlignment}" 
+         VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+      </Border>
+     </Grid>
+    </ControlTemplate>
+   </Setter.Value>
+  </Setter>
+ </Style>
+</UserControl.Resources>
+ <Grid x:Name="LayoutRoot" Background="White" Margin="10">
+   <Grid.RowDefinitions>
+     <RowDefinition Height="Auto"/>
+     <RowDefinition Height="Auto"/>
+     <RowDefinition Height="Auto"/>
+     <RowDefinition Height="Auto"/>
+     <RowDefinition Height="Auto"/>
+   </Grid.RowDefinitions>
+   <Grid.ColumnDefinitions>
+     <ColumnDefinition Width="Auto"/>
+     <ColumnDefinition Width="200"/>
+     <ColumnDefinition Width="Auto"/>
+   </Grid.ColumnDefinitions>
+   <TextBlock Text="Validating Form" FontSize="16" FontWeight="Bold"
+     Grid.Column="1" HorizontalAlignment="Center" />
+   <sdk:ValidationSummary x:Name="ErrorSummary" IsTabStop="True"
+     Grid.Row="1" Grid.ColumnSpan="2" Margin="3" />
+   <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
+     Grid.Row="2" Margin="3" HorizontalAlignment="Right" Style="{StaticResource LabelStyle1}"/>    
+   <TextBox x:Name="NameTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
+     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit, 
+     NotifyOnValidationError=True, ValidatesOnExceptions=True}"
+     Grid.Column="1" Grid.Row="2" Margin="3" />
+   <sdk:DescriptionViewer Target="{Binding ElementName=NameTextBox}" 
+     Grid.Column="2" Grid.Row="2" />
+   <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
+     Grid.Row="3" Margin="3" HorizontalAlignment="Right" Style="{StaticResource LabelStyle1}"/>
+   <TextBox x:Name="AgeTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
+     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit, 
+     NotifyOnValidationError=True, ValidatesOnExceptions=True}"  
+     Grid.Column="1" Grid.Row="3" Margin="3" />
+   <sdk:DescriptionViewer Target="{Binding ElementName=AgeTextBox}" 
+     Grid.Column="2" Grid.Row="3" />
+   <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click"
+     Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
+ </Grid>
+</UserControl>
+
    +

    The following is the C# logic for the page. Note the call to Focus + in the logic; many assistive technologies use focus to determine + what area of the interface to report to the user. If code calls Focus + to reference the error summary once it is completed, the assistive + technology can report the error summary immediately.

    + 
           public MainPage()
+       {
+           InitializeComponent();
+           LayoutRoot.DataContext = new Product();
+       }
+       // Commits text box values when the user presses ENTER.
+       private void TextBox_KeyDown(object sender, 
+           System.Windows.Input.KeyEventArgs e)
+       {
+           if (e.Key == System.Windows.Input.Key.Enter) (sender as TextBox)
+               .GetBindingExpression(TextBox.TextProperty).UpdateSource();
+       }
+       private void SubmitButton_Click(object sender, System.Windows.RoutedEventArgs e)
+       {
+           NameTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
+           AgeTextBox.GetBindingExpression(TextBox.TextProperty).UpdateSource();
+           if (ErrorSummary.Errors.Count > 0) ErrorSummary.Focus();
+           }
    +

    The following is the data class. Note how much of the validation + logic is defined within this view model, rather than as part of Silverlight + UI logic.

    + 
      public class Product 
+   {
+       private string nameValue;
+       private const string nameMessage = "Must be 10 characters or less.";
+       [Display(Name = "Username", Description = "Required. " + nameMessage)]
+       [StringLength(10, ErrorMessage = nameMessage)]
+       [Required(ErrorMessage = "Required.")]
+       public string Name
+       {
+           get { return nameValue; }
+           set
+           {
+               if (nameValue != value)
+               {
+                   Validator.ValidateProperty(value, new ValidationContext(
+                       this, null, null) { MemberName = "Name" });
+                   nameValue = value;
+               }
+           }
+       }
+       private string ageValue;
+       private const string ageMessage = "Must be in the 5 to 120 range.";
+       [Display(Description = ageMessage)]
+       [Range(5, 120, ErrorMessage = ageMessage)]
+       [RegularExpression("\\d*", ErrorMessage = "Must be a number.")]
+       public string Age
+       {
+           get { return ageValue; }
+           set
+           {
+               if (ageValue != value)
+               {
+                   Validator.ValidateProperty(value, new ValidationContext(
+                       this, null, null) { MemberName = "Age" });
+                   ageValue = value;
+               }
+           }
+       }
+
    +

    The following image is a screen shot of this simple UI, after two + invalid values are entered in the form and Submit is activated:

    +
    + + +
    Form with invalid values
    + +
    +

    The following image is a screen shot of the UIAVerify tree view of + this same application. Note the "Text" role items that appear + as adjacent peer elements, which describe the validation errors. This + Text is actually coming from sdk:DescriptionViewer, and in the visible + UI in the screenshot is not currently visible. This text would be visible + if any of the following occurs:

    +
      +
    • the user hovers the mouse over the red triangle in the input field + corner
      • +
    • the user hovers over the "info i" icon
      • +
    • the user clicks (or tabs to) the relevant field, which focuses + it
      • +
    +
    + + +
    UIAVerify tree view of form with invalid values
    + +
    +

    This example is shown in operation in the working example of Accessible Validation.

    +
    +

    Validation style for Label controls

    +

    The default validation style for the Invalid state of Label does + not have adequate contrast by default. Application authors can restyle Label with + a new template that has a 4.5:1 contrast.

    +
    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. The application + is expected to contain form fields, and a Submit pattern for form + interaction as described in .
      2. +
    2. Navigate through the items of a form until an editable field is + read. Enter a value that triggers the validation.
      3. +
    3. Navigate to Submit button and activate it to attempt to submit + the form.
      4. +
    4. Verify that a Validation Summary now appears, and is focusable.
      5. +
    5. Verify that the Validation Summary provides enough information + to correct any error.
      6. +
    6. Navigate back to input elements that have validation issues. Correct + the errors as suggested.
      7. +
    7. Tab to Submit button. Press ENTER to resubmit.
      8. +
    8. Verify that Validation Summary is no longer displayed and that + the screen reader does not focus to/read any further validation information.
      9. +
    +
    +

    Expected Results

    +

    #4, #5, and #8 are true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL4.html b/techniques/silverlight/SL4.html new file mode 100644 index 0000000000..a9cbfee90f --- /dev/null +++ b/techniques/silverlight/SL4.html @@ -0,0 +1,186 @@ +Declaring Discrete Silverlight Objects to Specify Language Parts + in the HTML DOM

    Declaring Discrete Silverlight Objects to Specify Language Parts + in the HTML DOM

    ID: SL4

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is use the HTML Lang attribute on + the object tag to describe each Silverlight plug-in instance on the + HTML hosting page as a "part" that has a different language. + Assistive technologies that use HTML Lang as a determinant of language + of parts can thus treat all Silverlight content as using that HTML + Lang-declared language.

    +

    Most assistive technologies that are capable of determining Language + for Web content will use the HTML Lang tag value as the determinant + of the language of the page. Assistive technologies would also use + HTML Lang tag values for the language of parts. HTML Lang is not specifically + reported in accessibility frameworks. Assistive technologies would + typically access the HTML DOM to get this information. This technique + specifically addresses this known situation regarding how ATs obtain + Language information from HTML rather than from accessibility frameworks + that otherwise report other aspects of HTML content.

    +

    In order to support different language parts that each contain Silverlight + content, authors declare one Silverlight object tag per continuous + language part region in the HTML. For example, the following HTML is + a simplication of HTML markup for a page that contains two Silverlight + content areas, the first declaring Lang as English (en), the second + declaring Lang as German (de):

    + 
         <body>
+       <object type="application/x-silverlight-2" lang="en">
+       </object>
+       <object type="application/x-silverlight-2" lang="de">
+       </object>
+     </body>
+
    +

    To support communication between different Silverlight plug-in instances + that are hosted on the same HTML page, application authors can use + various techniques, including the following

    +
      +
    • System.Windows.Messaging APIs: this is the simplest technique, + and this is shown in Example 1
      • +
    • Using a shared business object, and exchanging information by + having each Silverlight instance reference two-way data binding to + that business object's properties.
      • +
    • Exchanging information through the HTML DOM and declaring properties + of one or both instances as Scriptable by the DOM.
      • +
    +
    +

    Silverlight runtime language determination

    +

    Regardless of how HTML Lang is declared on the defining object tags, + many aspects of how Silverlight works with language and culture information + at run time are not determined by HTML Lang, and are instead determined + by the operating system and which culture that operating system is + running. For more information, see Understanding + Language/Culture Properties as Used by Silverlight Applications and + Assistive Technologies.

    +
    +

    Examples

    +
    +

    Two Silverlight object tags, each with different HTML + Lang, to support a simple language-translator application as a Web + page

    + +

    The Visual Studio solution for this example has a total of 4 project + components:

    +
      +
    • The Web project that declares the HTML or ASP page that shows + the framework of how the two Silverlight object tags exist on a page. + This is where the HTML Lang is actually set.
      • +
    • A project for the English user control, a simple TextBox.
      • +
    • A project for a German user control, also a simple TextBox.
      • +
    • A library with a static translation function
      • +
    +

    In this example, the English user control implements a LocalMessageSender, + which sends asynchronous messages to the German user control. The German + user control has a LocalMessageReceiver, which is set to listen as + soon as the control is instantiated. When a message is received, the + German control calls a function of the translation library, and displays + translated text.

    +

    The following is the HTML page (some infrastructure and parameters + omitted for clarity):

    + 
    <html xmlns="http://www.w3.org/1999/xhtml" >
+<body>
+
+    <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>
+
+    <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>
+
+</body>
+</html>
+
    +

    The following is the XAML for the English user control:

    + 
    <UserControl x:Class="SilverFish.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="20" 
+>
+   <Grid x:Name="LayoutRoot" Background="White">
+       <TextBox AcceptsReturn="False" Language="en-us"
+       Name="EnglishTranslationBox" 
+       LostFocus="EnglishTranslationBox_LostFocus"/>
+   </Grid>
+</UserControl>
+
    +

    The following is the code-behind for the English user control:

    + 
       public partial class MainPage : UserControl
+   {
+       private LocalMessageSender messagesender;
+       public MainPage()
+       {
+           InitializeComponent();
+       }
+       private void EnglishTranslationBox_LostFocus(object sender, RoutedEventArgs e)
+       {
+           messagesender = new LocalMessageSender("receiver");
+           messagesender.SendAsync((sender as TextBox).Text);
+       }
+   }
+
    +

    The following is the code-behind for the German user control (the + XAML is minimal; the main relevant point is that it contains a TextBox target + named GermanTranslationBox). The code invokes the translation function + found in a separate library. The translation function is not shown, + it simply takes an English string and returns a German translation.

    + 
       public partial class MainPage : UserControl
+   {
+       public MainPage()
+       {
+           InitializeComponent();
+           LocalMessageReceiver lmr = new LocalMessageReceiver("receiver");
+           lmr.MessageReceived += new EventHandler<MessageReceivedEventArgs>(lmr_MessageReceived);
+           try
+           {
+               lmr.Listen();
+           }
+           catch (ListenFailedException) {}
+       }
+       void lmr_MessageReceived(object sender, MessageReceivedEventArgs e)
+       {
+           if (e.Message!="") {
+               String translated;
+               translated = Translator.TranslateThat(e.Message);
+               GermanTranslationBox.Text = translated;
+               GermanTranslationBox.Focus();
+           }
+       }
+   }
+
    +

    This example is shown in operation in the working example of SilverFish.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references multiple Silverlight object tags, each with different + HTML Lang values.
      2. +
    2. Verify that language settings through HTML Lang on object tags + are respected by assistive technologies that can use HTML Lang values + for language of parts determination.
      3. +
    +
    +

    Expected Results

    +

    #2 gives expected results.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL5.html b/techniques/silverlight/SL5.html new file mode 100644 index 0000000000..a40d5966eb --- /dev/null +++ b/techniques/silverlight/SL5.html @@ -0,0 +1,237 @@ +Defining a Focusable Image Class for Silverlight

    Defining a Focusable Image Class for Silverlight

    ID: SL5

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to wrap the Silverlight Image class + inside a UI container class that is focusable. If the image is focusable, + users who use the TAB sequence to navigate content while the assistive + technology is active, and/or assistive technologies that construct + navigation structures that are based on the TAB sequence, can both + detect the image in navigation. The assistive technology can then associate + alternative text for that image within the navigation structure, and + report the information to the user.

    +

    Many existing assistive technologies do not construct initial navigation + views that are derived from UI Automation information if it is coming + from a non-focusable element in a Silverlight user interface. This + is particularly true if the assistive technology is in a navigation + mode that is specifically intended to help users enter information + into a form or similar interactive interface element; an example of + this situation is the Forms Mode of the JAWS screen reader.

    +

    + Image is + an example of a Silverlight element that is not focusable. This technique + and the example therein are intended to circumvent the possible omission + of a nonfocusable Silverlight Image element from certain + navigation views in existing assistive technology implementations. + The Silverlight Image is wrapped with a display/viewer + control class that is focusable. This image-wrapping control is initially + presented in assistive technology representations of a Silverlight + user interface that use only focusable elements when constructing the + assistive technology's representation of the application.

    +

    The image wrapper class uses the AutomationProperties.Name property + to provide a short text alternative for the contained Image, + so that the alternative text can be read or otherwise presented by + assistive technologies. The Silverlight API AutomationProperties.Name directly + sets Name in the UI Automation tree. The properties + in the UI Automation tree are reported to assistive technologies, when + the assistive technology implements behavior that acts as a UI Automation + client. Name is one of the accessibility framework + properties that most assistive technologies present in some way, for + purposes of both name and value information, and setting Name is + the common technique for exposing text alternatives for any other Control class + (for example, for a button with an image, as shown in the technique ).

    +

    This technique is intended for cases where application authors deliberately + do not want a visible image caption for the image to be part of the + user interface, and the image is a part of a larger interactive user + interface control or page. Otherwise, if there is a visible caption, + authors can use .

    +

    Examples

    +

    The two examples are intended to be used together, if an application + is both defining and consuming the focusable image control.

    +
    +

    Defining the FocusableImage XAML template and C# code + behavior

    + +

    Silverlight supports a control development model whereby the visual + appearance of a control is largely defined in XAML, and the behavior + of a control (such as its event handling and hookups to services) are + implemented in a managed code language such as C#. The following is + the XAML template, which includes a visual state that shows visually + when the control is focused in UI.

    + 
    <ResourceDictionary
+xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+xmlns:local="clr-namespace:ImageEquivalent">
+ <Style TargetType="local:FocusableImage">
+   <Setter Property="Template">
+    <Setter.Value>
+      <ControlTemplate TargetType="local:FocusableImage">
+        <Grid>
+          <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="FocusStates">
+              <VisualState x:Name="Focused">
+                <Storyboard>
+                  <ColorAnimation  
+ Storyboard.TargetName="focusborder"
+ Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
+ Duration="0" To="Blue"/>
+                </Storyboard>
+              </VisualState>
+              <VisualState x:Name="Unfocused"/>
+            </VisualStateGroup>
+          </VisualStateManager.VisualStateGroups>
+          <Border
+            x:Name="focusborder"
+            BorderThickness="4"
+            BorderBrush="Transparent">
+            <Image
+             Margin="2" Opacity="10"
+             Source="{TemplateBinding Source}"/>
+         </Border>
+       </Grid>
+    </ControlTemplate>
+    </Setter.Value>
+   </Setter>
+ </Style>
+</ResourceDictionary>
+
    +

    The following is the C# class definition and logic. The logic includes + invoking a default automation peer on creation, and loading the template + as defined in the previous XAML example through the Silverlight "generic.xaml" resource + convention for custom controls.

    + 
    namespace ImageEquivalent
+{
+   public class FocusableImage : Control
+   {
+       protected override System.Windows.Automation.Peers.AutomationPeer OnCreateAutomationPeer()
+       {
+           return new FrameworkElementAutomationPeer(this);
+       }
+       public FocusableImage()
+       {
+           this.DefaultStyleKey = typeof(FocusableImage);
+       }
+       public ImageSource Source
+       {
+           get { return (ImageSource)this.GetValue(SourceProperty); }
+           set { this.SetValue(SourceProperty,value); }
+       }
+       public static DependencyProperty SourceProperty = DependencyProperty.Register(
+         "Source",
+         typeof(ImageSource),
+         typeof(FocusableImage),
+         null);
+       Boolean _Focused;
+       void ChangeState()
+       {
+           if (_Focused)
+           {
+               VisualStateManager.GoToState(this,"Focused",false);
+           }
+           else
+           {
+               VisualStateManager.GoToState(this,"Unfocused",false);
+           }
+       }
+       protected override void OnGotFocus(RoutedEventArgs e)
+       {
+           base.OnGotFocus(e);
+           this._Focused = true;
+           ChangeState();
+       }
+       protected override void OnLostFocus(RoutedEventArgs e)
+       {
+           base.OnGotFocus(e);
+           this._Focused = false;
+           ChangeState();
+       }
+   }
+}
+
    +

    This example is shown in operation in the working example of Focusable Image.

    + +
    +
    +

    Using the FocusableImage class in UI and applying AutomationProperties.Name

    + +

    Now that the image is wrapped by a focusable control, you can instantiate + an instance of the wrapper UI inside a Silverlight layout container, + specify AutomationProperties.Name at the level of + the wrapper control’s tag, and have that text serve as the alternative + text for the referenced source image file.

    + 
       <StackPanel
+   xmlns:local="clr-namespace:ImageEquivalent;assembly=FocusableImage"
+   >
+   <local:FocusableImage
+     Height="300" Width="400
+     AutomationProperties.Name="Diagram of secret lair"
+     Source="/diagram_lair.png" />
+   </StackPanel>
+
    + +
    +

    Tests

    +
    +

    Automation Tree

    +

    Procedure

    +
      +
    1. Open the test HTML page in a Silverlight-supported useragent host; + to use UI Automation, use Microsoft Windows as platform.
      2. +
    2. Use the tab sequence inside the Silverlight content area to focus + the control.
      3. +
    3. Using an accessibility framework verification tool, check that + the string content is promoted as the default Name applied + to the control.
      4. +
    +
    +

    Accessibility framework verification tools typically show the + entirety of an automation tree for a given application, and in fact + will show the tree for all applications running on the Windows client + machine. Focusing the control as in #2 is thus not strictly speaking + necessary. However, manually focusing using the application interface + is often a faster way to step into the automation tree as opposed to + having to open an extensive series of nested nodes starting from the + browser host application root. Whether this functionality exists depends + on which accessibility framework verification tool is being used for + testing.

    +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +
    +

    Screen Reader

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To use + UI Automation, use Microsoft Windows as platform.
      2. +
    2. Engage the screen reader. Move focus to the control (for example, + use the tab sequence).
      3. +
    3. Check that the Name applied to the image is read + by the screen reader.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL6.html b/techniques/silverlight/SL6.html new file mode 100644 index 0000000000..1b086413b7 --- /dev/null +++ b/techniques/silverlight/SL6.html @@ -0,0 +1,187 @@ +Defining a UI Automation Peer for a Custom Silverlight Control

    Defining a UI Automation Peer for a Custom Silverlight Control

    ID: SL6

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to create an AutomationPeer class + for a custom Silverlight control. The AutomationPeer exposes + accessibility properties of the control in a way that abstracts the + Silverlight technology specifics of the control model and maps information + to UI Automation concepts, so that these properties can be consumed + by the UI Automation accessibility framework.

    +

    The AutomationPeer concept is part of the overall architecture design + of the UI Automation system. The peer represents a deliberate abstraction + of the control, such that a client can obtain pattern-based information + about the specific purpose and capability of a control without knowing + its implementation-specific object model or having to resort to using + a framework-specific object model API. Also, the peers run in a different + process than the controls they represent, which has performance and + security advantages. For more information on UI Automation architecture, + see UI + Automation Overview on MSDN.

    +

    Creating a custom Silverlight control is one way that Silverlight + application authors can create user interface components either for + their own application, or as a packaged redistributable that provides + the control UI for third parties. Creating an automation peer for a + custom control reports control-specific information to the UI Automation + accessibility framework, and enables a custom control to participate + in all of the same techniques involving UI Automation that can be used + for a control that is distributed in the core Silverlight run time. + Assistive technologies can use the UI Automation accessibility framework + to discover the name and role of the user interface component, and + can get and set values by accessing UI Automation patterns. UI Automation + thus supports extensibility, while maintaining a discovery system for + names, roles and values of UI components.

    +

    Control authors associate a peer with a class by implementing a method + override for the class implementation. Control authors declare name + and role through properties that are general to any UI Automation peer. + Control authors expose the means to get and set values by choosing + to support one or more patterns that are usually associated with a + role. For example, a control in the role of "Button" would + typically support an "Invoke" pattern. A consumer of UI Automation + could check whether the pattern was supported and then call the pattern-based + method Invoke, which would activate the button without + any device input events being produced or required.

    +

    By convention, controls and their automation peers share a naming + pattern. For example, if a control is named Spinner, its automation + peer is named SpinnerPeer. However, the actual wiring for the class-peer + association is made in the control code by overriding OnCreateAutomationPeer. + Thus it is necessary to have access to the control code in order to + associate a new peer class implementation with that control.

    +

    In addition to properties, automation peers can also expose methods + as part of the implemented UI Automation control pattern. For example, + a peer implementing the Value pattern can provide an implementation + of the SetValue method. The SetValue method + can be called by a UI Automation client in order to programmatically + set the value of the owner control. The functionality exposed by the + implementation of a control pattern can be accessed either by automation-based + testing, or by assistive technologies.

    +

    Examples

    +
    +

    SimpleNumericUpDown control and its peer

    + +

    The example implements a very simple Silverlight custom control named + SimpleNumericUpDown. The control is a templateable control, meaning + that the UI is defined in a XAML file that serves as the default UI, + but any consumer of the control can change the visual appearance by + applying a new template. Nevertheless, the basic accessibility characteristics + of the control can be shaped by the control author, and can apply even + for cases where the visible UI is noticably different. This separation + between design-implementation and code-behavior is one reason for the + peer-owner design in UI Automation. The majority of the example shows + the C# code, including the following :

    +
      +
    • Associating the peer with the class.
      • +
    • Defining the peer, and basic information such as the class name.
      • +
    • Reporting which patterns the peer supports. In this case the peer + supports a Value pattern.
      • +
    +

    Control definition class:

    + 
       public class SimpleNumericUpDown : Control
+   {
+       public SimpleNumericUpDown()
+       {
+           this.DefaultStyleKey = typeof(SimpleNumericUpDown);
+       protected override System.Windows.Automation.Peers.AutomationPeer OnCreateAutomationPeer()
+       {
+           return new SimpleNumericUpDownAutomationPeer(this);
+       }
+ // templating and event handlers omitted
+       public static DependencyProperty NumericValueProperty = DependencyProperty.Register(
+           "NumericValue",
+           typeof(Int32),
+           typeof(SimpleNumericUpDown),
+           new PropertyMetadata(0)
+           );
+       public Int32 NumericValue
+       {
+           get { return (Int32)this.GetValue(NumericValueProperty); }
+           set {this.SetValue(NumericValueProperty,value);}
+       }
+   }
+
    +

    Automation peer definition:

    + 
       public class SimpleNumericUpDownAutomationPeer : FrameworkElementAutomationPeer, IValueProvider
+   {
+       private SimpleNumericUpDown OwnerControl { get { return (SimpleNumericUpDown)Owner; } }
+       public SimpleNumericUpDownAutomationPeer(SimpleNumericUpDown owner)
+           : base(owner) {}
+       //peer overrides
+       protected override string GetClassNameCore()
+       {
+           return "SimpleNumericUpDown";
+       }
+       protected override AutomationControlType GetAutomationControlTypeCore()
+       {
+           return AutomationControlType.Spinner;
+       }
+       public override object GetPattern(PatternInterface patternInterface) {
+           if (patternInterface == PatternInterface.Value)
+           {
+               return this;
+           }
+           return base.GetPattern(patternInterface);
+       }
+       // Value pattern implementation
+       String IValueProvider.Value
+       {
+           get { return OwnerControl.NumericValue.ToString(); }
+       }
+       bool IValueProvider.IsReadOnly {get{return false;}}
+       void IValueProvider.SetValue(string value)
+       {
+           OwnerControl.NumericValue = Convert.ToInt32(value);
+       }
+
    +

    This example is shown in operation in the working example of Simple Numeric UpDown control.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To see + UI Automation, use Microsoft Windows as platform.
      2. +
    2. Use a verification tool that is capable of showing the full automation + tree, and an object’s UI Automation properties and patterns as part + of the tree. (For example, use UIAVerify or Silverlight Spy; see + Resources links.) Select the item in the automation tree that is + accessing the relevant custom automation peer implementation.
      3. +
    3. Examine the set of properties exposed in the tree. Check that + name is reported by Name, that the class name is reported as ClassName, + and that there is a role as reported by the value of ControlType.
      4. +
    4. If the control is expected to report a value, check that the value + is reported in the tree somehow. (Exactly which property reports + the value varies depending on the control function and pattern; for + more information, see Windows + Automation API).
      5. +
    5. Check whether a control pattern is reported in the tree. If a + control pattern is reported, test the methods of that pattern using + facilities in the verification tool. Verify that invoking the methods + has changed the corresponding read only property values in the tree.
      6. +
    +
    +

    Expected Results

    +

    #3, #4, and #5 (if applicable) are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL7.html b/techniques/silverlight/SL7.html new file mode 100644 index 0000000000..09c3f167a7 --- /dev/null +++ b/techniques/silverlight/SL7.html @@ -0,0 +1,263 @@ +Designing a Focused Visual State for Custom Silverlight Controls

    Designing a Focused Visual State for Custom Silverlight Controls

    ID: SL7

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to build custom visual states for + custom controls that include visible focus indicators in the templates + and parts.

    +

    The default Silverlight core controls all indicate some type of visible + focus indication, through their default templates. For more information + on how Silverlight controls will generally supply a default visual + focus indicator, see Focus + Overview on MSDN.

    +

    Silverlight control skinning is enabled through a deliberate separation + of visible user interface design and control logic in the Silverlight + control model. Control authors expect that application authors might + reskin their control. But control authors should provide an initial + default set of states, templates, etc. so that application authors + have a good baseline of functionality to compare with their customization. + Defining visible focus states for all control parts is an example of + such baseline functionality. In order to make the visual focus state + customizable, the visual state should be associated with a name. Ideally + that name should have a human-readable meaning that hints at its purpose, + but the real reason for the name is that it connects the XAML-defined + template (which control consumers can change) with the control logic + defined by the control author (which control consumers cannot change). + Also, the visual names and groups in the XAML should be attributed + on the control class, to assist design tools. The best resource for + general information about Silverlight control customization is Silverlight + documentation on MSDN.

    +
    +

    Component Parts

    +

    Some controls are created by assembling various component parts that + are already defined as controls either by the Silverlight run time + libraries or by third parties. That scenario is not really what this + technique is about, because in that case the focus behavior is already + defined by the component's template, and the control author can re-use + that behavior as-is or reskin it but still through the same named state + definition. This technique specifically addresses how to define a control + where the interactive surface has mouse and keyboard handling defined + at a lower level for the control as a whole. The actual focus region + is defined by the control author in that case, and the focus indicator + is also defined to match the behavior visually and functionally.

    +
    +
    +

    Design for Focus Indicators

    +

    The general design principles for visual focus indicators are that + the indicators should apply a visual change to the focus region's exterior + margin. A common pattern is to deliberately define the visuals for + the control with a pre-existing blank margin for its layout slot; that + way when the focus indicator is applied, the focus indicator can fill + that margin.

    +

    The actual graphic for the visual focus indicator is typically a border + or shaped frame of a solid color brush with at least 1 pixel line thickness. + The color used for the border stands out visually from the underlying + control background or other elements of the control. The contrast between + brush for visual focus and the remainder of control should be a contrast + difference that is visible to users who do not distinguish the hue + of colors, but can distinguish the lightness/value. In many cases the + border is rectangular, to go along with the control's layout slot. + However, if the control's basic shape is a non-rectangular shape, sometimes + the focus indicator is designed to make a border around that shape. + An example of a default Silverlight control that is round and applies + an exterior round border as a focus indicator is a RadioButton.

    +

    Most focus indicator designs change only the border and do not change + the main area of the control. One reason for this is that changes to + the main control are typically reserved for other interactive states + that also have a visual indicator. Specifically, controls need a visual + state that indicates that the mouse is over the control (this is termed + either MouseOver or Hover state). Controls that support activation + also have a visual state that provides feedback for activation. For + example, the default Silverlight RepeatButton changes + its Background gradient on the button field to be + darker blue value when the mouse is over the button, and changes to + an even darker value blue when the button is activated (either by clicking + the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton). + To see this behavior in a live sample, see RepeatButton + sample on MSDN.

    +
    +
    +

    Logic for Focus Indicators

    +

    Typical logic is that the border to indicate focus is present in the + default template design, but with an initial value of Visibility=Collapsed. + Then, a visual state for focus is defined with a name that properly + indicates its purpose as text (example: "Focused"). In addition, + a state is needed that undoes whatever changes were applied for focus, + once focus moves to another element (for example, "Unfocused"). + For example, if the "Focused" state sets the value Visibility=Visible + on some element, the "Unfocused" state sets that value to + Collapsed again. Silverlight's visual state system also provides a + way to group related states with a factoring name (for example, "FocusStates"). + For more information on state names and state groups in Silverlight + visual states, as well as learning how these states define a control + contract that any control consumers should follow if they reskin that + control, see Customizing + the Appearance of an Existing Control by Using a ControlTemplate on + MSDN.

    +

    The visual state system is designed to support visual transitions + to states, and for that reason the visual state system is closely coupled + with the Silverlight animation system. By animating the transition, + the visual appearance changes over a time interval. Typically, if transitions + are used, the time interval is short, one second or less. In the case + of focus indicators, it is typical to not use transitions and to instead + make a discrete change; otherwise, the state change might be interpreted + by users as a lag in interface response from their system.

    +

    The states themselves are designed in XAML, but are loaded and unloaded + through logic that the control author defines as part of their control + code. The control author does this by handling the appropriate events + that occur while the event scope applies to their control. For example, + to apply the "Focused" state, the control author handles + the GotFocus + event. Rather than handle the event directly, the more common pattern + is to override a virtual method that acts as a prewired event handler, OnGotFocus. + The centralized logic for visual state changes is the method GoToState, + with one of the parameters to pass representing the XAML name of the + correct state to load from the XAML templates. Examples for all of + the APIs discussed here are available in the MSDN topic Creating + a New Control by Creating a ControlTemplate.

    +
    +
    +

    Focus in Silverlight

    +

    Focus in Silverlight is equivalent to the larger user interface and + application concept of keyboard focus. The element that has focus is + the element within the Silverlight object tree and programming model + that has first chance to process the Silverlight key events. As a more + tangible example that is user-centric, if a TextBox has + keyboard focus, then when the user presses keys on the keyboard, the + characters associated with the user's pressed keys (or possibly input + that is enabled by an assistive technology that can substitute for + key strokes) will appear in the TextBox. A user interface + element in Silverlight can obtain keyboard focus in one of three ways:

    +
      +
    1. The user uses the Silverlight tab sequence to traverse into the + Silverlight content and to focus a specific control.
      2. +
    2. The Silverlight application's logic calls the Focus() method programmatically + to force focus to a control.
      3. +
    3. The user performs some other action, for example uses the mouse + to click on a control. That control's specific logic handles the + Silverlight input event and uses that event as stimulus to call Focus() + on that control. The difference between this case and the above case + is that the behavior is typically built-in to that control's runtime + behavior, and does not require each application author to call Focus() + in application code.
      4. +
    +
    +

    Examples

    +
    +

    Visible focus indicator as a style and state

    + +

    The following is the XAML that defines the basic (normal) control + template. This control is simple: it has a yellow circle graphic, which + overlays a red circle edge when the control is focused. The circle + edge is defined by the "FocusVisual" element in the composition, + and is initially Visibility=Collapsed (the expected visual state prior + to being focused).

    + 
    <ResourceDictionary
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+   xmlns:local="clr-namespace:FocusVisualCustomControl"
+>
+   <Style TargetType="local:SampleControl">
+       <Setter Property="Template">
+           <Setter.Value>
+               <ControlTemplate TargetType="local:SampleControl">
+                   <Grid x:Name="ControlRoot">
+                       <Ellipse x:Name="CoinGraphic"
+                         Fill="Orange"
+                         Width="{TemplateBinding Width}"
+                         Height="{TemplateBinding Height}"
+                       />
+                       <Ellipse x:Name="FocusVisual"
+                         Visibility="Collapsed"
+                         Stroke="Red"
+                         StrokeThickness="1"
+                         Width="{TemplateBinding FrameworkElement.Width}"
+                         Height="{TemplateBinding FrameworkElement.Height}"
+                       />
+                   </Grid>
+               </ControlTemplate>
+           </Setter.Value>
+       </Setter>
+   </Style>
+</ResourceDictionary>
+
    +

    The following is the specific visual state portion. Note how the + visual state includes an ObjectAnimation with discrete + keyframes for hard transition between Visible and Collapsed, targeting + the element "FocusVisual" in the composition shown in the + previous XAML.

    + 
                           <VisualStateManager.VisualStateGroups>
+                           <VisualStateGroup x:Name="FocusStates">
+                               <VisualState x:Name="Unfocused"/>
+                               <VisualState x:Name="Focused">
+                                   <Storyboard>
+                                       <ObjectAnimationUsingKeyFrames
+                                         Storyboard.TargetName="FocusVisual" 
+                                         Storyboard.TargetProperty="Visibility" Duration="0">
+                                           <DiscreteObjectKeyFrame KeyTime="0">
+                                               <DiscreteObjectKeyFrame.Value>
+                                                   <Visibility>Visible</Visibility>
+                                               </DiscreteObjectKeyFrame.Value>
+                                           </DiscreteObjectKeyFrame>
+                                       </ObjectAnimationUsingKeyFrames>
+                                   </Storyboard>
+                               </VisualState>
+                           </VisualStateGroup>
+                       </VisualStateManager.VisualStateGroups>
+
    +

    The following is control logic in the control class that responds + to the focus-related events and switches visual states in response. + In this particular example, "Unfocused" is a state without + a definition. Switching to the definitionless state has the effect + of reverting to the default state, which in the case of this design + is intentional. Alternatively, authors could make specific template + changes that revert any animation that applied to the focused state.

    + 
           protected override void OnGotFocus(RoutedEventArgs e)
+       {
+           base.OnGotFocus(e);
+           VisualStateManager.GoToState(this, "Focused", false);
+       }
+       protected override void OnLostFocus(RoutedEventArgs e)
+       {
+           base.OnLostFocus(e);
+           VisualStateManager.GoToState(this, "Unfocused", false);
+       }
+
    +

    This example is shown in operation in the working example of Visual Focus Indicator.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Using a keyboard, tab to the element where focus characteristics + are being examined.
      3. +
    3. Check that the background, border, or other noticable visual indicator + of the element changes color.
      4. +
    4. Check that the changes in color for the background, border, or + other noticable visual indicator are removed when the element loses + focus.
      5. +
    +
    +

    Expected Results

    +

    #3 and #4 are true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/SL8.html b/techniques/silverlight/SL8.html new file mode 100644 index 0000000000..fb59ece8b1 --- /dev/null +++ b/techniques/silverlight/SL8.html @@ -0,0 +1,241 @@ +Displaying HelpText in Silverlight User Interfaces

    Displaying HelpText in Silverlight User Interfaces

    ID: SL8

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to provide a long text alternative + that replaces content when a short text alternative is not sufficient + for a given user, and the user specifically requests that the application + should provide more context or more information through the application + user interface. The technique could also apply for providing a long + text alternative for a nontext object, for example for an image that + contains a level of detail that is difficult to capture in a standard + visible-in-UI image caption.

    +

    Silverlight supports a UI Automation property named HelpText, + to connote its possible usage to provide imperative instructions for + interactive elements. HelpText is not always forwarded + to users by existing assistive technologies, which is an issue discussed + in the technique . + Rather than relying on a particular assistive technology's support + for enabling users to access the UIA HelpText, application + authors can introduce user interface elements into their design that + databind directly to the HelpText property, but where + the interface element is not necessarily displayed by default. An interface + update might be designed to occur if the application user specifically + activates a "Get Help" action that is presented in the initial + user interface.

    +

    This technique emphasises a "HelpText" model as a factoring + practice. Silverlight application authors can use the HelpText as + a data source that centralizes such information, because it already + exists and has that intended purpose in accessibility frameworks. For + example, the HelpText could be shown in a tooltip, + a popup, a separate user interface element that is deliberately rendered + in close proximity, etc. For accessibility support, a recommended display + option for HelpText is to add or dynamically alter + a Silverlight text element in the primary user interface. Silverlight + supports an adaptive layout metaphor. Adding text to the runtime elements + in the application generally causes an interface redraw, which in turn + informs assistive technologies (through UIA properties and events) + that content might have changed.

    +

    To set the UIA HelpText in Silverlight, you set the + attached property AutomationProperties.HelpText. AutomationProperties.HelpText can + be set in code, but is typically set in XAML that defines a Silverlight + UI.

    +
    +

    HelpText and Tooltip

    +

    The same information that is used for AutomationProperties.HelpText long + text alternatives could also be useful to sighted users. In this case, + the same text could be displayed in a Silverlight ToolTip control. + The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in + conjunction is because the Tooltip information is + not introduced into the runtime accessibility framework information + set by UI Automation, because that information set does not anticipate + the mouse action triggers that cause tooltips to display. In Silverlight + programming, a useful technique for sharing the same resource is to + combine the Silverlight data binding feature with the .NET Framework + embedded resource feature. For more information on combining Silverlight + data binding and resources for common string sources, see How + to Make XAML Content Localizable.

    +
    +

    Examples

    +
    +

    Displaying a long text alternative for an Image with + XAML

    + +

    Application authors can specify the AutomationProperties.HelpText attribute + on the Image element. The value provided for the attribute + should be a meaningful long text alternative for the image content. + The value of AutomationProperties.HelpText should + augment rather than duplicate any AutomationProperties.Name or + an associated Label or LabeledBy caption. + One or both of these is also typically specified to provide the basic + (short-text) accessibility support for an image.

    + 
    <StackPanel x:Name="imgContainer">
+ <Image
+   Height="400" Width="600"
+   Source="/office.png"
+   x:Name="imgOffice"
+   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.”/>
+ <sdk:Label x:Name="lblimgOffice" Target="{Binding ElementName=imgOffice}">Diagram of standard office layout</sdk:Label>
+ <Button x:Name="HelpButton" Click="HelpButton_Click">Provide text-only alternative description of the previous image</Button>
+</StackPanel>
+
    +

    The following event handler removes the Help button and replaces + it in UI with a TextBox that displays the long text + alternative.

    + 
           private void HelpButton_Click(object sender, RoutedEventArgs e)
+       {
+           imgContainer.Children.Remove(HelpButton);
+           TextBox tb = new TextBox();
+           tb.IsReadOnly=true;
+           tb.Text = AutomationProperties.GetHelpText(imgOffice);
+           imgContainer.Children.Add(tb);
+           tb.Focus();
+       }
+
    + +
    +
    +

    Using HelpText to augment existing form labels, to provide + long text instructions

    + +

    This example provides instructions for two form fields. The same text + is also displayed for mouse users as a Tooltip and + the AutomationProperties.HelpText string is used as + a common source for both display options. In this example, the form + submission does not perform client-side validation (although server-side + validation following a data round trip might still exist, or validation + could be added similar to the technique shown in ).

    +

    The following is the XAML UI:

    + 
    <UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
+   x:Class="HelpTextAndToolTip.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+       <Grid x:Name="LayoutRoot" Background="White" Margin="10">
+           <Grid.RowDefinitions>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+               <RowDefinition Height="Auto"/>
+           </Grid.RowDefinitions>
+           <Grid.ColumnDefinitions>
+               <ColumnDefinition Width="Auto"/>
+               <ColumnDefinition Width="200"/>
+               <ColumnDefinition Width="Auto"/>
+           </Grid.ColumnDefinitions>
+           <TextBlock Text="Form With Tooltips" FontSize="16" FontWeight="Bold"
+     Grid.Column="1" HorizontalAlignment="Center" />
+           <sdk:Label x:Name="NameLabel" Target="{Binding ElementName=NameTextBox}"
+     Grid.Row="2" Margin="3"/>
+           <TextBox x:Name="NameTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=NameLabel}"
+     Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
+     Grid.Column="1" Grid.Row="2" Margin="3"
+                    AutomationProperties.HelpText="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
+           <ToolTipService.ToolTip>
+               <ToolTip Content="{Binding NameTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
+           </ToolTipService.ToolTip>
+           </TextBox>
+           <sdk:Label x:Name="AgeLabel" Target="{Binding ElementName=AgeTextBox}"
+     Grid.Row="3" Margin="3" HorizontalAlignment="Right"/>
+           <TextBox x:Name="AgeTextBox" 
+     AutomationProperties.Name="{Binding Content, ElementName=AgeLabel}" 
+     Text="{Binding Age, Mode=TwoWay, UpdateSourceTrigger=Explicit}"  
+     Grid.Column="1" Grid.Row="3" Margin="3"
+    AutomationProperties.HelpText="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}">
+           <ToolTipService.ToolTip>
+               <ToolTip Content="{Binding AgeTextBoxToolTipString,Source={StaticResource TooltipStrings}}" />
+           </ToolTipService.ToolTip>
+       </TextBox>
+       <StackPanel Orientation="Horizontal">
+           <Button x:Name="SubmitButton" Content="Submit" Click="SubmitButton_Click" Grid.Column="1" Grid.Row="4" Width="50" Margin="3" />
+           <Button x:Name="HelpButton" Click="HelpButton_Click">Get Help</Button>
+       </StackPanel>
+       </Grid>
+</UserControl>
+
    +

    The following is the resource definition in app.xaml:

    + 
           <ResourceDictionary>
+           <resources:Resource1 x:Key="TooltipStrings"/>
+       </ResourceDictionary>
+
    +

    The generated resource code that defines the "Resource1" class + is not shown here because it is mostly infrastructure that is produced + by a generation task in Visual Studio. For more information about + embedded resources in Silverlight, see Resources + Overview on MSDN. The resources here contain just two strings:

    +
      +
    • NameTextBoxToolTipString: Must be 10 characters or less. Required.
      • +
    • AgeTextBoxToolTipString Must be a value between 0 and 120. Required.
      • +
    +

    The following is the event handler code, which changes the interface.

    + 
           private void HelpButton_Click(object sender, RoutedEventArgs e)
+       {
+           AgeLabel.Content = AgeLabel.Content + ": " + AutomationProperties.GetHelpText(AgeTextBox);
+           NameLabel.Content = NameLabel.Content + ": " + AutomationProperties.GetHelpText(NameTextBox);
+           NameTextBox.Focus();
+       }
+
    +

    Note the call to Focus() - this puts the screen reader focus on + the first form element so that the added text can be read. The very + same text source as used for the Tooltip is added + programmatically to the existing Label controls.

    +

    After the Get Help button is clicked, the visual appearance of the + application is modified:

    +
    + + +
    Before activating Get Help
    + +
    +
    + + +
    After activating Get Help
    + +
    +

    This example is shown in operation in the working example of HelpText and Tooltip.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag. To see + UI Automation, use Microsoft Windows as platform.
      2. +
    2. For a control where this technique is used to provide a long text + alternative, verify that an identifiable and usable "Get Help" control + is present in the initial user interface or assistive technology + representation of that interface.
      3. +
    3. Verify that activating the "Get Help" control changes + the user interface, and the changed user interface now displays or + reports long text alternatives that better address the user's information + needs.
      4. +
    4. If using a screen reader, verify that the long text alternative + can be read aloud.
      5. +
    +
    +

    Expected Results

    +

    #2 and #3 are true. If testing with a screen reader, #4 is true.

    +
    +

    Resources

    + + + +
    diff --git a/techniques/silverlight/SL9.html b/techniques/silverlight/SL9.html new file mode 100644 index 0000000000..d8751d4337 --- /dev/null +++ b/techniques/silverlight/SL9.html @@ -0,0 +1,307 @@ +Handling Key Events to Enable Keyboard Functionality in Silverlight

    Handling Key Events to Enable Keyboard Functionality in Silverlight

    ID: SL9

    Technology: silverlight

    Type: Technique

    When to Use

    +
      +
    • Microsoft Silverlight, versions 3 and greater
      • +
    • Silverlight managed programming model and Silverlight XAML
      • +
    +

    Description

    +

    The objective of this technique is to handle key events in a Silverlight + application and enable application-specific keyboard functionality + in a Silverlight application. The keyboard functionality might relate + to a particular element of the Silverlight application user interface, + or might be a handler for global key events within the application, + such as an application-wide access key.

    +

    In Silverlight, application authors handle user input by attaching + event handlers for input events. The input events are implemented on + a class that is a base element in the Silverlight class hierarchy, + such that all Silverlight UI elements can be the source of an input + event if the user interacts with them. Typically, the event handler + names are specified in XAML, although it is also possible to wire events + in code. The implementation of the handlers for the Silverlight managed + code programming model is always done in C# or Visual Basic code.

    +

    The most commonly used input events are the following:

    +
      +
    • + KeyUp, KeyDown - these are the + key events. Which key is pressed is determined by event parameters + passed to the handler.
      • +
    • + MouseEnter, MouseOver, MouseLeave +
      • +
    • + MouseLeftButtonDown, MouseLeftButtonUp, MouseRightButtonDown, MouseRightButtonUp +
      • +
    +

    Other forms of input that Silverlight supports include touch devices + (with mouse promotion for cases where the application runs on devices + that do not have touch input modes) and a related inking mode. For + any UI interaction that uses mouse input or these other input modes, + Silverlight application authors can write a parallel key event handler + to provide users the keyboard equivalent.

    +

    Also, the Silverlight event system and control model combine to enable + behavior whereby a mouse event and a keyboard event can be treated + as the same event and can be handled by a common event handler. Using + this technique, Silverlight authors can facilitate keyboard functionality + in custom controls or as override behavior to existing Silverlight-supplied + controls, and provide equivalence for mouse events or events that are + specific to other input devices. Silverlight authors can also use controls + that already have a keyboard equivalence as a built-in behavior.

    +

    The parallel key event handler case, and the built-in behavior case, + are each shown in one of the examples.

    +

    All input events report a specific source that is communicated to + handler code as an event parameter, so that the application author + can identify which element in their Silverlight UI was being interacted + with, and the application can perform an action that is relevant to + that user input. In the case of mouse events, the event source is the + element that the mouse pointer is over at the time. In the case of + key events, the event source is the element that has focus. The element + that has focus is visually indicated so that the user knows which element + they are interacting with (see ). Assistive technologies + often have parallel conventions whereby the user is made aware of which + element is visually focused and is the current input scope presented + by the assistive technology,

    +
    +

    Silverlight core control built-in keyboard functionality

    +

    The following is a list of the Silverlight-supplied controls that + have some level of key equivalence as a built-in behavior. In these + cases, it is not necessary to add a specific Key event handler; you + can handle the event and/or rely on the built-in key handling as listed.

    +
      +
    • + Button (SPACE and ENTER) - raises Click event.
      • +
    • Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE + and ENTER) - raises Click event.
      • +
    • + TextBox (ENTER, unless in a mode where the TextBox + accepts multiple lines) - moves focus to next control, treated like + a TAB
      • +
    • + ListBox (various keys) - see OnKeyDown + Method.
      • +
    • + ComboBox (arrow keys ) - traverse list choices + as control UI if popup area displayed.
      • +
    • + RichTextBox (various keys ) - enable edit mode + operations; see RichTextBox + Overview.
      • +
    • + Slider (arrow keys ) - increment/decrement values.
      • +
    +
    +
    +

    Browser hosts and keyboard events

    +

    Silverlight is hosted as a plug-in inside a browser host. The Silverlight + run-time only receives the input events that the browser host forwards + to hosted plug-ins through a browser-specific program access layer. + Occasionally the browser host receives input that the browser host + itself handles in some way, and does not forward the keyboard event. + An example is that a Silverlight application hosted by an Internet + Explorer browser host on Windows operating system cannot detect a press + of the ALT key, because Internet Explorer processes this input and + performs the action of bringing keyboard focus to the Internet Explorer + menu bar. Silverlight authors might need to be aware of browser-specific + input handling models and not rely on key events for keys that are + essentially reserved for use by a browser host. For more information, + see Keyboard + Support.

    +
    +
    +

    Other event models

    +

    This technique specifically discusses event handling for the Silverlight + managed programming model. However, Silverlight also supports parallel + models for event handling, either through a Silverlight run-time feature + or due to Silverlight's role as a plug-in within a script-capable browser + host. For example, events from the HTML DOM can be handled by JavaScript + at HTML scope for the overall Silverlight plug-in; this uses the browser + host as script processor and the Silverlight run-time is not directly + involved. Or, HTML DOM events can be handled through an HTML bridge + that calls into Silverlight application code. These event models can + potentially be used to provide keyboard equivalence, but it is generally + more convenient to use the managed code model as described in this + technique. For more information on other event models in Silverlight, + see Events + Overview for Silverlight.

    +
    +

    Examples

    +

    Two examples are given. The first example is for the scenario of a + Silverlight application author that is simply incorporating an existing + control into their application design, and is taking advantage of mouse-keyboard + equivalence that is already defined by certain Silverlight core controls. + The second example is from the perspective of a control author, or + at least that of a Silverlight application author that intends to encapsulate + behavior in a custom Silverlight control and use it in their own application. + For this second example, the control will handle the general Silverlight + input event KeyUp, in order to check for input from + key(s) that are designated to have a specific input meaning for that + control.

    +
    +

    Built-in keyboard equivalence for core Silverlight controls

    + +

    This example pertains to cases where the control that handles key + events is focusable (through the tab sequence, etc.) and where an existing + Silverlight control behavior provides the keyboard equivalence In this + example, a Silverlight UI includes a Button element. + For sighted users, or users that generally use the mouse to interact + with UI, a typical way to interact with the button is to position the + mouse pointer over the element, and click the left mouse button. However, + the Button also supports a built-in key handling behavior, + whereby either the SPACE or ENTER keys are treated as an equivalent + action to clicking the button with a mouse. The requirement for this + interaction is that the Button must have keyboard + focus at the point in time that SPACE or ENTER are pressed. The Button might + gain focus because the user pressed the TAB key to move through the + tab sequence, or some equivalent action enabled by assistive technology. + In terms of the programming experience, the Silverlight application + author does not have to separately handle KeyDown for + this case. Within the Button control built-in code, + the special case of SPACE or ENTER keys pressed while a Button has + focus invokes the button’s Click event. Then the Silverlight + application author can simply handle Click without + differentiating whether the input action was a mouse click or a keyboard + equivalent. The following is the entire XAML UI.

    + 
    <UserControl x:Class="BuiltInKeyEquivalence.MainPage"
+   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+>
+   <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
+       <Button Name="button1"
+   AutomationProperties.Name="Equivalence test"
+   Height="20" Width="150"
+   Click="button1_Click">Click me, or press SPACE!</Button>
+   </Grid>
+</UserControl>
+
    +

    The following is the C# logic.

    + 
       private void button1_Click(object sender, RoutedEventArgs e)
+   {
+       MessageBox.Show("You clicked a button ... or maybe you hit the space bar ... or ENTER ... it's all the same to me.");
+   }
+   private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
+   {
+       System.Windows.Browser.HtmlPage.Plugin.Focus();
+    }
+
    +

    This example is shown in operation in the working example of built-in keyboard equivalents.

    + +
    +
    +

    Keyboard events for a custom control, keyboard equivalence

    + +

    In this example, a new Silverlight custom control named SimpleNumericUpDown + uses a control template that includes two buttons. To provide keyboard + equivalence for the buttons, an event handler is defined by the control + class code. The event handler invokes the action in response to certain + accelerator keys, where these actions are equivalent to clicking the + button composition parts of the control with a mouse. The following + is the default XAML template.

    + 
    <ControlTemplate TargetType="local:SimpleNumericUpDown">
+  <Border Background="{TemplateBinding Background}"
+          BorderBrush="{TemplateBinding BorderBrush}"
+          BorderThickness="{TemplateBinding BorderThickness}" Name="controlFrame">
+      <Grid>
+          <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="*"/>
+              <ColumnDefinition Width="30"/>
+          </Grid.ColumnDefinitions>
+          <TextBox x:Name="valueBox" Text="{Binding NumericValue, RelativeSource={RelativeSource TemplatedParent}}"/>
+          <StackPanel Grid.Column="1">
+              <Button Name="minusButton">-</Button>
+              <Button Name="plusButton">+</Button>
+          </StackPanel>
+      </Grid>
+  </Border>
+</ControlTemplate>
+
    +

    The following C# code shows the event handlers. Also, the code includes + the event-wiring technique that is used whenever a Silverlight control + author implements a templateable control. This technique enables + the separation of UI appearance (which can be overridden) from the + input event-handling behavior (which is implemented by the control + author).

    + 
       public class SimpleNumericUpDown : Control
+   {
+       public SimpleNumericUpDown()
+       {
+           this.DefaultStyleKey = typeof(SimpleNumericUpDown);
+       }
+       
+       public override void OnApplyTemplate()
+       {
+           base.OnApplyTemplate();
+           Button plusButton = GetTemplateChild("plusButton") as Button;
+           Button minusButton = GetTemplateChild("minusButton") as Button;
+           Border controlFrame = GetTemplateChild("controlFrame") as Border;
+           plusButton.Click += new RoutedEventHandler(Increment);
+           minusButton.Click += new RoutedEventHandler(Decrement);
+           controlFrame.KeyUp += new KeyEventHandler(Handle_Accelerators);
+       }
+       private void Increment(object sender, RoutedEventArgs e)
+       {
+           this.NumericValue += 1;
+       }
+       private void Decrement(object sender, RoutedEventArgs e)
+       {
+           this.NumericValue -= 1;
+       }
+       private void Handle_Accelerators(object sender, KeyEventArgs e)
+       {
+           switch (e.Key)
+           {
+               case (Key.Left):
+                   this.NumericValue -= 1; 
+                   e.Handled=true;
+                   break;
+               case (Key.Right):
+                   this.NumericValue += 1; 
+                   e.Handled=true;
+                   break;
+               default: break;
+           }
+       }
+       public Int32 NumericValue //definition omitted in this example
+   }
+
    +

    This example is shown in operation in the working example of custom keyboard events.

    + +
    +

    Tests

    +

    Procedure

    +
      +
    1. Using a browser that supports Silverlight, open an HTML page that + references a Silverlight application through an object tag.
      2. +
    2. Press TAB key to move keyboard focus to various element parts + of the user interface.
      3. +
    3. Verify that any user interface actions that exist for a given + element part each have a keyboard equivalent.
      4. +
    +
    +

    Expected Results

    +

    #3 is true.

    +
    +

    Resources

    + + + +
    \ No newline at end of file diff --git a/techniques/silverlight/img/AfterTooltipForm.png b/techniques/silverlight/img/AfterTooltipForm.png new file mode 100644 index 0000000000..df701dca31 Binary files /dev/null and b/techniques/silverlight/img/AfterTooltipForm.png differ diff --git a/techniques/silverlight/img/BeforeTooltipForm.png b/techniques/silverlight/img/BeforeTooltipForm.png new file mode 100644 index 0000000000..fafdb228d5 Binary files /dev/null and b/techniques/silverlight/img/BeforeTooltipForm.png differ diff --git a/techniques/silverlight/img/default_button_focus.png b/techniques/silverlight/img/default_button_focus.png new file mode 100644 index 0000000000..c02c82b85e Binary files /dev/null and b/techniques/silverlight/img/default_button_focus.png differ diff --git a/techniques/silverlight/img/encoder_scr.png b/techniques/silverlight/img/encoder_scr.png new file mode 100644 index 0000000000..72257bc4a1 Binary files /dev/null and b/techniques/silverlight/img/encoder_scr.png differ diff --git a/techniques/silverlight/img/highconafter.png b/techniques/silverlight/img/highconafter.png new file mode 100644 index 0000000000..a727566d38 Binary files /dev/null and b/techniques/silverlight/img/highconafter.png differ diff --git a/techniques/silverlight/img/highconbefore.png b/techniques/silverlight/img/highconbefore.png new file mode 100644 index 0000000000..fbc2f7a135 Binary files /dev/null and b/techniques/silverlight/img/highconbefore.png differ diff --git a/techniques/silverlight/img/listboxbar.png b/techniques/silverlight/img/listboxbar.png new file mode 100644 index 0000000000..5195535866 Binary files /dev/null and b/techniques/silverlight/img/listboxbar.png differ diff --git a/techniques/silverlight/img/newfontsize.png b/techniques/silverlight/img/newfontsize.png new file mode 100644 index 0000000000..e6a45fcb24 Binary files /dev/null and b/techniques/silverlight/img/newfontsize.png differ diff --git a/techniques/silverlight/img/originalfontsize.png b/techniques/silverlight/img/originalfontsize.png new file mode 100644 index 0000000000..5e1dee9f58 Binary files /dev/null and b/techniques/silverlight/img/originalfontsize.png differ diff --git a/techniques/silverlight/img/popup_keys.png b/techniques/silverlight/img/popup_keys.png new file mode 100644 index 0000000000..ecd4299c70 Binary files /dev/null and b/techniques/silverlight/img/popup_keys.png differ diff --git a/techniques/silverlight/img/reskinned_button_focus.png b/techniques/silverlight/img/reskinned_button_focus.png new file mode 100644 index 0000000000..30acbb40f4 Binary files /dev/null and b/techniques/silverlight/img/reskinned_button_focus.png differ diff --git a/techniques/silverlight/img/uiatree_simplepeerforwarding.png b/techniques/silverlight/img/uiatree_simplepeerforwarding.png new file mode 100644 index 0000000000..da01718d35 Binary files /dev/null and b/techniques/silverlight/img/uiatree_simplepeerforwarding.png differ diff --git a/techniques/silverlight/img/validating_screenshot.png b/techniques/silverlight/img/validating_screenshot.png new file mode 100644 index 0000000000..9a11136556 Binary files /dev/null and b/techniques/silverlight/img/validating_screenshot.png differ diff --git a/techniques/silverlight/img/validating_uia.png b/techniques/silverlight/img/validating_uia.png new file mode 100644 index 0000000000..a9327f32cd Binary files /dev/null and b/techniques/silverlight/img/validating_uia.png differ 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": + "Microsoft ended support for Silverlight in 2021, and authors are encouraged to use HTML for accessible web content." +} diff --git a/techniques/smil/SM6.html b/techniques/smil/SM6.html index ade2f38f7a..51c9d0ecc0 100644 --- a/techniques/smil/SM6.html +++ b/techniques/smil/SM6.html @@ -18,10 +18,10 @@

    When to Use

    Description

    The objective of this technique is to provide a way for people who are blind - able to access the material. With this technique a description of the video or otherwise have trouble seeing the video in audio-visual material to be - in the audio-visual material.

    + 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.

    Examples

    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/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/change-on-request.html b/understanding/20/change-on-request.html index 91d1a87c4c..d01acbbe3d 100644 --- a/understanding/20/change-on-request.html +++ b/understanding/20/change-on-request.html @@ -65,8 +65,7 @@

    Benefits of Change on Request

  • -

    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. +

    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:

    diff --git a/understanding/20/consistent-identification.html b/understanding/20/consistent-identification.html index 3433232f21..2276ad2103 100644 --- a/understanding/20/consistent-identification.html +++ b/understanding/20/consistent-identification.html @@ -26,7 +26,7 @@

    Intent of Consistent Identification

    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 accessible name) + different labels (or, more generally, a different accessible name) 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. diff --git a/understanding/20/images-of-text.html b/understanding/20/images-of-text.html index ce11a97a41..9096c2bba3 100644 --- a/understanding/20/images-of-text.html +++ b/understanding/20/images-of-text.html @@ -1,34 +1,33 @@ - + Understanding Images of Text

    Understanding Images of Text

    - +

    In brief

    Goal
    Users can adjust how text is presented.
    What to do
    Use text instead of pictures of text.
    -
    Why it's important
    People cannot alter how text looks in images.
    +
    Why it's important
    People cannot alter how text looks in images.
    - +

    Intent of Images of Text

    - - +

    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.

    - +

    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 @@ -40,52 +39,43 @@

    Intent of Images of Text

    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.

    - +

    Images of text can also be used where it is possible for users to customize the image of text to match their requirements.

    - -

    The definition of image of text contains the note: Note: This does not include text that is part of a picture that contains significant + +

    The definition of images of text 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.

    - + +

    The Success Criterion is intended to address situations where images of text are used rather than text. Where images of text are used in addition to 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 1.4.9 Images of Text (No Exception), which applies to all images of text, regardless of whether or not they are used in addition to text.

    +

    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. -

    - -

    See also - 1.4.9: Images of Text (No Exception). + the output.

    - - + +

    See also 1.4.9 Images of Text (No Exception).

    +

    Benefits of Images of Text

    - -
      -
    • People with low vision (who may have trouble reading the text with the authored font family, size and/or color).
      • -
    • People with visual tracking problems (who may have trouble reading the text with the authored line spacing and/or alignment).
      • -
    • People with cognitive disabilities that affect reading.
      • -
    -
    - +

    Examples of Images of Text

    -
    Styled Headings
    Rather than using bitmap images to present headings in a specific font and size, an @@ -130,139 +120,54 @@

    Examples of Images of Text

    Customizable font settings in images of text
    A Web site allows users to specify font settings and all images of text on the site are then provided based on those settings.
    +
    The text in an image is also provided as text.
    +
    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.
    -
    - +

    Resources for Images of Text

    - - -
    - +

    Techniques for Images of Text

    - -

    Sufficient Techniques for Images of Text

    - - -
    - +

    Additional Techniques (Advisory) for Images of Text

    - -
    -

    CSS Techniques

    - -
    -
    - +

    Failures for Images of Text

    - -
    -
    - diff --git a/understanding/20/info-and-relationships.html b/understanding/20/info-and-relationships.html index a70e2520d6..04aaeacb66 100644 --- a/understanding/20/info-and-relationships.html +++ b/understanding/20/info-and-relationships.html @@ -575,7 +575,9 @@

    Failures for Info and Relationships

    • - +
  • + +
    • diff --git a/understanding/20/keyboard.html b/understanding/20/keyboard.html index 0e82e59d14..c779848171 100644 --- a/understanding/20/keyboard.html +++ b/understanding/20/keyboard.html @@ -245,7 +245,7 @@

    Additional Techniques (Advisory) for Keyboard

      -
    • Using XHTML role, state, and value attributes if repurposing static elements as interactive +
    • Using WAi-ARIA role, state, and value attributes if repurposing static elements as interactive user interface components (future link) AND Adding keyboard-accessible actions to static HTML elements diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html index fac5608a1f..8da1eca98a 100644 --- a/understanding/20/labels-or-instructions.html +++ b/understanding/20/labels-or-instructions.html @@ -92,7 +92,7 @@

      Examples of Labels or Instructions

      correct abbreviation.
      • -
    • A field for entering a date contains initial text which indicates the correct format +
    • A field for entering a date has text instructions to indicate the correct format for the date.
      • diff --git a/understanding/20/link-purpose-in-context.html b/understanding/20/link-purpose-in-context.html index 8d8ed0d0a8..4c7533ba7c 100644 --- a/understanding/20/link-purpose-in-context.html +++ b/understanding/20/link-purpose-in-context.html @@ -228,12 +228,6 @@

      Sufficient Techniques for Link Purpose (In Context)

      -
    • - - Using scripting to change control labels - -
      • -
    • @@ -365,12 +359,6 @@

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

    -
  • - - Combining adjacent image and text buttons for the same resource - -
    • -
  • Identifying the purpose of a link using link text combined with the preceding heading diff --git a/understanding/20/link-purpose-link-only.html b/understanding/20/link-purpose-link-only.html index 9007b3d65d..e22b02ce94 100644 --- a/understanding/20/link-purpose-link-only.html +++ b/understanding/20/link-purpose-link-only.html @@ -203,12 +203,6 @@

    Sufficient Techniques for Link Purpose (Link Only)

    • -
  • - - Using scripting to change control labels - -
    • - @@ -270,12 +264,6 @@

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

    -
  • - - Combining adjacent image and text buttons for the same resource - -
    • -
  • Supplementing link text with the title attribute diff --git a/understanding/20/name-role-value.html b/understanding/20/name-role-value.html index 18e09ad1ad..94cf35f6fd 100644 --- a/understanding/20/name-role-value.html +++ b/understanding/20/name-role-value.html @@ -1,51 +1,41 @@ - + Understanding Name, Role, Value

    Understanding Name, Role, Value

    -

    In brief

    Goal
    People using assistive technology understand all components.
    What to do
    Give components correct names, roles, states, and values.
    -
    Why it's important
    Assistive technology only works well when code is done properly.
    +
    Why it's important
    Assistive technology only works well when code is done properly.
    -
    -

    Intent of Name, Role, Value

    - -

    The intent of this Success Criterion is to ensure that Assistive Technologies (AT) can gather appropriate information about, activate (or set) and keep up to date on the status of user interface controls in the content.

    -

    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)

    -

    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 and appropriate information to assistive technologies and allow themselves to be controlled by assistive technologies.

    -

    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 WAI-ARIA, or the relevant platform standards. Another factor to consider is whether there is sufficient - accessibility support - with assistive technologies to convey the information as specified. + accessibility support with assistive technologies to convey the information as specified.

    -

    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 @@ -53,48 +43,32 @@

    Intent of Name, Role, Value

    been selected, or whether a collapsible tree view or accordion is expanded or collapsed.

    -
    -

    Success Criterion 4.1.2 requires a programmatically determinable name for all user 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.

    -
    - -

    Benefits of Name, Role, Value

    - -
      -
    • 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.
      • -
    -
    -

    Examples of Name, Role, Value

    -
    Accessible APIs
    A Java applet uses the accessibility API defined by the language.
    -
    -

    Resources for Name, Role, Value

    - - -
    -

    Techniques for Name, Role, Value

    - -

    Sufficient Techniques for Name, Role, Value

    - -
    -

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

    - -
    -
    -

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

    -
      -
    • -

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

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

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

    - -
    -
    -

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

    - -
    -
    -

    Additional Techniques (Advisory) for Name, Role, Value

    -
    -

    Failures for Name, Role, Value

    - - -
    -
    - diff --git a/understanding/20/on-input.html b/understanding/20/on-input.html index 53df875028..66223c97b6 100644 --- a/understanding/20/on-input.html +++ b/understanding/20/on-input.html @@ -37,7 +37,7 @@

    Intent of On Input

    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.

    diff --git a/understanding/20/page-titled.html b/understanding/20/page-titled.html index f5ddc0c76a..a6c1f16ed8 100644 --- a/understanding/20/page-titled.html +++ b/understanding/20/page-titled.html @@ -98,13 +98,10 @@

    Examples of Page Titled

    that it will be displayed in the title bar of the user agent.
    A document collection
    -

    The title of Understanding WCAG 2.1 - is "Understanding WCAG 2.1."

    +

    The title of Understanding WCAG 2.2 is "Understanding WCAG 2.2".

      -
    • The introduction page has the title "Introduction to Understanding WCAG 2.0."
      • -
    • Major sections of the document are pages titled "Understanding Guideline X" and "Understanding - Success Criterion X." -
      • +
    • The Introduction to Understanding WCAG page has the title "Introduction to Understanding WCAG".
      • +
    • Major sections of the document collection are pages titled "Understanding Guideline X" and "Understanding Success Criterion X."
    • Appendix A has the title "Glossary."
    • Appendix B has the title "Acknowledgements."
    • Appendix C has the title "References."
      • diff --git a/understanding/20/parsing.html b/understanding/20/parsing.html index 3f83699b1f..ae72ef4d58 100644 --- a/understanding/20/parsing.html +++ b/understanding/20/parsing.html @@ -158,6 +158,14 @@

      Sufficient Techniques for Parsing

      +
    • + + Ensuring that + Web pages are well-formed + + +
      • +
    • diff --git a/understanding/20/pronunciation.html b/understanding/20/pronunciation.html index 870fc52470..7f671e03ac 100644 --- a/understanding/20/pronunciation.html +++ b/understanding/20/pronunciation.html @@ -82,7 +82,7 @@

    Examples of Pronunciation

    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.
    Showing the reading of the words by ruby element
    -
    Web content using XHTML 1.1 provides kana (phonetic syllabary characters) written +
    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.
    Providing sound files of the pronunciation
    @@ -154,7 +154,7 @@

    Sufficient Techniques for Pronunciation

  • - Using the ruby element (XHTML 1.1) + Using the ruby element
    • diff --git a/understanding/20/resize-text.html b/understanding/20/resize-text.html index 899450df9f..2fc1cadaf2 100644 --- a/understanding/20/resize-text.html +++ b/understanding/20/resize-text.html @@ -20,30 +20,35 @@

    In brief

    Intent of Resize Text

    - - +

    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.

    The scaling of content is primarily a user agent responsibility. User agents that satisfy - UAAG 1.0 Checkpoint 4.1 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. + UAAG 1.0 Checkpoint 4.1 + 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.

    + +

    Content satisfies the Success Criterion if it can be scaled up to 200% using at least one text scaling + mechanism supported by user agents.

    + -

    If the author is using a technology whose user agents do not provide zoom support, - the author is responsible for providing this type of functionality directly or for - providing content that works with the type of functionality available in the user agent. - If the user agent doesn't provide zoom functionality but does let the user change the +

    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.

    @@ -62,7 +67,7 @@

    Intent of Resize Text

    can be accessed, is provided to the user in some way besides the fact that it is truncated.

    -

    Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up +

    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, @@ -77,7 +82,7 @@

    Intent of Resize Text

    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.

    @@ -87,7 +92,6 @@

    Intent of Resize Text

    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. -

    @@ -101,254 +105,149 @@

    Intent of Resize Text

    1.4.3: Visual Presentation.

    -

    Benefits of Resize Text

    -
      -
    • This Success Criterion helps people with low vision by letting them increase text size in content so that they can read it. -
      • -
    -

    Examples of Resize Text

    - - +
      -
    • 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, they can read the larger text. All the information on the page is still displayed when the larger font is used for the text. -
      • -
    • 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. -
      • -
    • - Users with a zoom function in their user agent 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.
      • -
    -

    Resources for Resize Text

    - - + -

    Techniques for Resize Text

    - - +
    -

    Sufficient Techniques for Resize Text

    - - - -

    Additional Techniques (Advisory) for Resize Text

    - - -

    Failures for Resize Text

    - - -
    diff --git a/understanding/20/three-flashes-or-below-threshold.html b/understanding/20/three-flashes-or-below-threshold.html index e0de2ab4f2..9fa345e15f 100644 --- a/understanding/20/three-flashes-or-below-threshold.html +++ b/understanding/20/three-flashes-or-below-threshold.html @@ -53,7 +53,7 @@

    Intent of Three Flashes or Below Threshold

    represents the central vision portion of the eye, where people are most susceptible to photo stimuli.)

    -

    With the proliferation of devices of varying screen sizes (from small hand-helds to large living room displays), as well as the adoption of CSS pixels 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.

    +

    With the proliferation of devices of varying screen sizes (from small hand-helds to large living room displays), as well as the adoption of CSS pixels 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.

    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.

    diff --git a/understanding/20/timing-adjustable.html b/understanding/20/timing-adjustable.html index 8889700473..088983cb0a 100644 --- a/understanding/20/timing-adjustable.html +++ b/understanding/20/timing-adjustable.html @@ -45,7 +45,7 @@

    Intent of Timing Adjustable

    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.

    -

    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 carousels. 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 2.2.2 Pause, Stop, Hide.

    +

    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 carousels. 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 2.2.2 Pause, Stop, Hide.

    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.

    diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index e71b9d3b53..2f913938dd 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -30,7 +30,7 @@

    Intent of Use of Color

    another visual means ensures users who cannot see color can still perceive the information.

    -

    Color is an important asset in design of Web content, enhancing its aesthetic appeal, +

    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 limited-color or diff --git a/understanding/20/visual-presentation.html b/understanding/20/visual-presentation.html index 73bd6dcc73..e3c7cc7f4c 100644 --- a/understanding/20/visual-presentation.html +++ b/understanding/20/visual-presentation.html @@ -17,12 +17,10 @@

    In brief

    - - +

    Intent of Visual Presentation

    -

    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 @@ -69,13 +67,12 @@

    Intent of Visual Presentation

    together, so that it is difficult for them to locate word boundaries.

    -

    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. +

    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.

    The scaling of content is primarily a user agent responsibility. User agents that @@ -111,12 +108,11 @@

    Intent of Visual Presentation

    -
    +

    Benefits of Visual Presentation

    - - +

    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. @@ -127,22 +123,17 @@

    Benefits of Visual Presentation

      -
    • People with some cognitive disabilities can read text better when they select their own foreground and background color combinations.
      • -
    • 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.
      • -
    • People with some cognitive disabilities can read text more easily when the spacing between words is regular.
      • -
    -
    @@ -156,318 +147,219 @@

    Examples of Visual Presentation

    Examples of glyphs include "A", "→" (an arrow symbol), and "さ" (a Japanese character).

    -

    Resources for Visual Presentation

    - - -

    Techniques for Visual Presentation

    - -

    Sufficient Techniques for Visual Presentation

    - -

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

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

    Additional Techniques (Advisory) for Visual Presentation

    - -

    Failures for Visual Presentation

    - - -
    diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html index 4f92d73997..d5b51b9378 100644 --- a/understanding/21/animation-from-interactions.html +++ b/understanding/21/animation-from-interactions.html @@ -30,19 +30,18 @@

    Intent

    How can a website reduce the chances of triggering a vestibular disorder? 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.

    What about movement caused by a user scrolling a page? 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.

    - -
    -

    Benefits

    -
      -
    • Vestibular Disorder -
        -
      • 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.
        • -
      • 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."
        • -
      -
      • -
    -
    +
    +

    Benefits

    +
      +
    • Vestibular Disorder +
        +
      • 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.
        • +
      • 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."
        • +
      +
      • +
    +

    Examples

      @@ -85,16 +84,6 @@

      Sufficient

    • Gx: Allowing users to set a preference that prevents animation.
    - diff --git a/understanding/21/character-key-shortcuts.html b/understanding/21/character-key-shortcuts.html index 7e17048398..d5a2fe6f88 100644 --- a/understanding/21/character-key-shortcuts.html +++ b/understanding/21/character-key-shortcuts.html @@ -15,62 +15,61 @@

    In brief

    What to do
    Ensure character-only shortcut keys can be turned off or modified.
    Why it's important
    Character-key shortcuts are easy to accidentally trigger, especially with speech input.
    -

    Intent

    -

    The intent of this Success Criterion 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 — whose means of input is 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. -

    -

    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. Accesskeys are also not affected because they include modifier keys.

    -

    Background on the mechanics of speech input:

    -

    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.

    -

    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.

    -

    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.

    -

    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.

    -

    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.

    -
    -

    Benefits

    -
      -
    • 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.
      • -
    • 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.
      • -
    • Allowing all 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.
      • -
    -
    +

    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.

    +
    +

    Even though this Success Criterion refers to character keys, 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 ? (question mark) symbol is accessed using Shift+/ (forward slash key next to the right-hand Shift key). On a UK keyboard, in Windows, the é (lowercase "e" with an acute accent) requires the use of AltGr+e. 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.

    +
    +
    +

    The Success Criterion also applies to situations where a shortcut is based on a sequence of character keys – for example, pressing G and then A 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 character keys.

    +
    +

    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. Accesskeys are also not affected because they are generally (depending on the user agent) activated using modifier keys.

    +

    Background on the mechanics of speech input

    +

    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.

    +

    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.

    +

    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.

    +

    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.

    +

    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.

    +
    +

    Benefits

    +
      +
    • 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.
      • +
    • 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.
      • +
    • Allowing all 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.
      • +
    +

    Examples

    - -

    Disable Shortcuts

    -

    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.

    +

    Disable Shortcuts

    +

    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.

    - -

    Alternate Control

    - -

    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.

    +

    Alternate Control

    +

    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.

    - -
    +

    Resources

    Web apps that use character-key shortcuts and allow users to disable and/or change these shortcuts:

    -
      -
    • Gmail
      • -
    • WordPress
      • -
    -

    Videos of speech user trouble with single character key shortcuts:

    - -
    +
      +
    • Gmail
      • +
    • WordPress
      • +
    +

    Videos of speech user trouble with single character key shortcuts:

    + +

    Techniques

    -

    Sufficient

    +

    Sufficient

    diff --git a/understanding/21/concurrent-input-mechanisms.html b/understanding/21/concurrent-input-mechanisms.html index 302c9f6534..eae3199d8e 100644 --- a/understanding/21/concurrent-input-mechanisms.html +++ b/understanding/21/concurrent-input-mechanisms.html @@ -26,7 +26,7 @@

    Intent

    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.

    -

    Benefits

    +

    Benefits

    • Users can interact with web content with whichever input mechanism is preferred and available to them.
    • Users may switch between input mechanisms when they desire or the circumstances require it.
      • diff --git a/understanding/21/identify-changes.html b/understanding/21/identify-changes.html deleted file mode 100644 index 5e8c1e65a8..0000000000 --- a/understanding/21/identify-changes.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - WCAG 2.0 Understanding Page - - - -

      Understanding {Shortname}

      -
      -

      Intent

      -

      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.

      -
      -

      Benefits

      -

      This explains how following the success criterion benefits particular types of users with disabilities.

      -
        -
      • Benefit
        • -
      -
      -
      -
      -

      Examples

      -

      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.

      -
        -
      • Example
        • -
      -
      -

      Example

      -
      -
      -
      -

      Resources

      -

      -
        -
      • Resource
        • -
      -
      -
      -

      Techniques

      -
      -

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

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

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

      -
      -
      -

      Sufficient

      -

      Techniques that are sufficient to meet the Guideline or Success Criterion.

      -
      -

      Situation

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

      Advisory

      -

      Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.

      -

      Same template as sufficient techniques.

      -
      -
      -

      Failure

      -

      Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.

      -

      Same template as sufficient techniques.

      -
      -
      - - \ No newline at end of file diff --git a/understanding/21/identify-purpose.html b/understanding/21/identify-purpose.html index 3fd00abcba..faa9c70320 100644 --- a/understanding/21/identify-purpose.html +++ b/understanding/21/identify-purpose.html @@ -7,7 +7,6 @@

      Understanding Identify Purpose

      -

      In brief

      @@ -15,26 +14,18 @@

      In brief

      What to do
      Use code to indicate the meaning of all controls and other key information, where available.
      Why it's important
      Some people with cognitive disabilities may not understand a control's purpose from the name alone.
      -
      -

      Intent

      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.

      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.

      -

      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).

      -

      Identifying regions of the page allows people to remove or highlight regions with their user agent.

      -

      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.

      -

      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.)

      - -
      +

    Benefits

    -

    People who benefit have many different cognitive disabilities including:

    • Memory
      • @@ -42,14 +33,12 @@

      Benefits

    • Language-related
    • Executive function and decision making.
    -

    Meeting this Success Criterion helps users who need extra support or a familiar interface, including the need for:

    • Symbols and graphics with which users are familiar
    • Fewer features and less cognitive overload
    • Keyboard shortcuts
    -

    Examples

    @@ -61,12 +50,11 @@

    Examples

    Resources

    -
    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-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/interruptions-minimum.html b/understanding/21/interruptions-minimum.html deleted file mode 100644 index f493e03deb..0000000000 --- a/understanding/21/interruptions-minimum.html +++ /dev/null @@ -1,91 +0,0 @@ - - - - - Understanding Interruptions (Minimum) - - - -

    Understanding Interruptions (Minimum)

    -
    -

    Intent

    -

    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.

    -

    Where a site may generate interruptions, the user must be able to postpone or suppress them, such that:

    -
      -
    • Popups and other interruptions can be easily delayed or turned off [Editor: do we need a definition for popup?]
      • -
    • Media events can be easily delayed or turned off [Editor: how is this different from Pause, Hide, Stop?]
      • -
    • Chat functions can be easily turned off and on again
      • -
    • Non-critical messages can easily be turned off and on again
      • -
    -

    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.

    -

    Other potential distractions are covered by existing WCAG Success Criteria Pause, Stop, Hide, Audio Control, Three Flashes or Below Threshold, Low or No Background Audio, Timing Adjustable. 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.

    - -
    -
    -

    Benefits

    -
      -
    • 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 Distraction Issue paper
      • -
    • 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.
      • -
    • Avoiding changes in content that are not initiated by the user can help ensure users complete the primary task intended by the author.
      • -
    -
    -
    -

    Examples

    -
    -

    Popus can be turned off by the user

    -

    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.

    -
    -
    -

    Chat functions can be disabled

    -

    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.

    -
    -
    -

    Status updates can be turned off by the user

    -

    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.

    -
    -
    - -
    -

    Resources

    - -
    -
    -

    Techniques

    -
    -

    Sufficient

    -

    Techniques that are sufficient to meet the Guideline or Success Criterion.

    -
    -

    Situation

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

    Advisory

    -

    Techniques that are not sufficient by themselves to meet the Guideline or Success Criterion.

    -

    Same template as sufficient techniques.

    -
    -
    -

    Failure

    -

    Techniques that document conditions that would cause the page not to meet the Guideline or Success Criterion, even if sufficient techniques are also used.

    -

    Same template as sufficient techniques.

    -
    -
    - - \ No newline at end of file diff --git a/understanding/21/label-in-name.html b/understanding/21/label-in-name.html index fbcc27f26b..87e2fbd3c5 100644 --- a/understanding/21/label-in-name.html +++ b/understanding/21/label-in-name.html @@ -21,11 +21,11 @@

    In brief

    Intent

    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.

    -

    Most controls are accompanied by a visible text label. Those same controls have a programmatic name, also known as the Accessible Name. 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.

    +

    Most controls are accompanied by a visible text label. Those same controls have a programmatic name, also known as the accessible name. 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.

    Note that where a visible text label does not exist for a component, this Success Criterion does not apply to that component.

    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.

    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.

    -

    Note that when a user interface component lacks an accessible name — a failure of 4.1.2 Name, Role, Value — and has a visible text label, then it also fails this Success Criterion.

    +

    Note that when a user interface component lacks an accessible name — a failure of 4.1.2 Name, Role, Value — and has a visible text label, then it also fails this Success Criterion.

    Identifying label text for components

    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.

    @@ -90,19 +90,6 @@

    Text in parentheses

    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.

    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 & 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 required attribute or by using aria-required="true". The allowed data formatting could be surfaced by being referenced using the aria-describedby) attribute.

    - - -
    -

    Benefits

    - -
      -
    • headings and instructions
      • -
    • group labels for sets of components (i.e., used with legend/fieldset or with role of group or radiogroup)
      • -
    -

    Such textual information may constitute part of the component's description. 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 labels for the purpose of this Success Criterion.

    -

    It is important to note that the specification allows authors to override the name calculated through native semantics. Both aria-label and aria-labelledby 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, aria-label should be avoided or used carefully, and aria-labelledby should be used as a supplement with care.

    -

    Finally, aria-describedby 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 aria-describedby 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.

    -
    @@ -138,7 +125,6 @@

    Sufficient Techniques

    Advisory Techniques

    -

    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.

    • G162: Positioning labels to maximize predictability of relationships
    • If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)
      • diff --git a/understanding/21/motion-actuation.html b/understanding/21/motion-actuation.html index 6eef73291f..17bc240c0a 100644 --- a/understanding/21/motion-actuation.html +++ b/understanding/21/motion-actuation.html @@ -28,16 +28,13 @@

      Intent of this Success Criterion

      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.

      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.

      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.

      - - -
      -

      Benefits

      - -
        -
      • 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.
        • -
      • Other users will benefit in situations where they are unable to move their devices.
        • -
      -
      +
    +
    +

    Benefits

    +
      +
    • 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.
      • +
    • Other users will benefit in situations where they are unable to move their devices.
      • +

    Examples of Success Criterion 2.6.1

    diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index 6d44df442d..41b2edee6f 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -54,14 +54,14 @@

    Boundaries

    Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border. -
    A button without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.
    +
    Pass: A button without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.

    Adjacent colors

    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.

    Standard text input with a label, white internal and external background with a dark border. -
    A standard text input with a grey border (#767676) and white adjacent color outside the component
    +
    Pass: A standard text input with a grey border (#767676) and white adjacent color outside the component

    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).

    @@ -70,22 +70,21 @@

    Adjacent colors

    A text box with a dark background and light border, with a white background. -
    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.
    +
    Pass: 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.

    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.

    A purple box with a light grey check. -
    A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).
    +
    Pass: A customized checkbox with light grey check (#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).

    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.

    -
    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. -
    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 contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.
    +
    Pass: 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 contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.
    @@ -96,14 +95,12 @@
    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. -
    - 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. +
    Pass: 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.
    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. -
    - 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. +
    Fail: 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 (#FFF000) to white contrast ratio of 1.2:1.
    @@ -124,33 +121,30 @@
    Three blue buttons, the middle has a thick yellow outline well inside the border of the button. -
    - The internal yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. +
    Pass: The internal yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9).
    - Three blue buttons on a white background, the middle has a light yellow outline outside of the botton's non-focused boundary. -
    - The external yellow indicator (#FFFF00) does not contrast with the white background (#FFF) which the component is on, failing the criterion. + Three blue buttons on a white background, the middle has a light yellow outline outside of the button's non-focused boundary. +
    Fail: The external yellow indicator (#FFFF00) does not contrast with the white background (#FFF) which the component is on.
    - Three blue buttons on a white background, the middle has a dark green outline outside of the botton's non-focused boundary. + Three blue buttons on a white background, the middle has a dark green outline outside of the button's non-focused boundary.
    - The external green indicator (#008000) does contrast with the white background (#FFF) which the component is on, passing the criterion. 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. There is a AAA criterion in WCAG 2.2 that addresses this aspect, Focus Appearance. + Pass: The external green indicator (#008000) does contrast with the white background (#FFF) 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. There is a AAA criterion in WCAG 2.2 that addresses this aspect, Focus Appearance.
    -

    Although the figure above with a dark outline passes non-text contrast, it is not a good indicator unless it is very thick. There is a criterion in WCAG 2.2 that addresses this aspect, Focus Appearance.

    If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.

    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.
    - The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9), passing the criterion. + Pass: The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9).
    @@ -159,21 +153,21 @@
    Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button.
    - The border of the control changes from blue (#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component therefore fails non-text contrast. + Fail: The border of the control changes from blue (#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component.
    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.
    - An inner border of dark green (#008000) does contrast with the black border, but does not contrast with the blue component background, therefore fails non-text contrast. + Fail: An inner border of dark green (#008000) does contrast with the black border, but does not contrast with the blue component background.
    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.
    - An inner border of white contrasts with the black border and the blue component background, therefore passes non-text contrast. + Pass: An inner border of white contrasts with the black border and the blue component background.
    @@ -182,17 +176,24 @@
    Three blue buttons, the center button is a lighter blue than the others.
    - The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color. + Not in scope: The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color.
    +
    +

    Hover states

    +

    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.

    + +

    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.

    +
    +
    -

    User Interface Component Examples

    +

    User Interface Component Examples

    For designing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.

    @@ -200,14 +201,14 @@

    User Interface Component Examples

    - - + + - + @@ -216,40 +217,40 @@

    User Interface Component Examples

    - + - + - + - + - + - + @@ -268,18 +269,36 @@

    User Interface Component Examples

    - - - + + + +
    - User Interface Component Examples + Passing User Interface Component Examples
    Type Examples
    Link TextDefault link text is in the scope of 1.4.3 Contrast (Minimum), and the underline is sufficient to indicate the link.Link textThe browser's default link text color is covered by 1.4.3 Contrast (Minimum). 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. A browser-default styled link, blue with an underline.
    Default focus style Links are required to have a visible focus indicator by 2.4.7 Focus Visible. 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).A browser-default styled link, with a black dotted outline around the link.A browser-default styled link, with a solid mid-blue outline around the link.
    Buttons
    Text input (minimal)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.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. A label with a text input shown by a bottom border and faint grey background.
    Text inputWhere a text-input has an indicator such as a complete border (#767676), that indicator must meet 3:1 contrast ratio.Where a text-input has an indicator such as a complete border (#767676), that indicator must meet 3:1 contrast ratio. A label with a text input shown by a complete border.
    Text input focus styleA 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 does provide a sufficiently strong visual indication.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 does provide a sufficiently strong visual indication. A label with a text input with a faint gray outline and a visible cursor/caret.
    Text input using background colorText 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).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). A label with a text input shown by a dark blue page background, and white box.
    Toggle buttonThe 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.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. Dark blue oval toggle button with light blue internal indicator.
    Dropdown indicatorThe 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).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). Button with the word Menu, and a down-arrow icon next to it.
    Black square border with a tick inside, and a text label.
    Checkbox - FailThe 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.Grey box on a white background with a black tick in the middle.Checkbox - Subtle hover styleA 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 (#DEDEDE). 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.Checkbox with a black border and a circular grey background next to a text label.
    + +

    The following are examples that have insufficient contrast.

    + + + - - - + + + + + + + + + + + + + - - + + @@ -318,7 +337,7 @@

    Graphical Objects

    - @@ -330,7 +349,7 @@

    Graphical Objects

    - @@ -407,11 +426,11 @@

    Infographics

    -

    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.

    +

    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.

    @@ -443,7 +462,7 @@

    Essential Exception

    Testing Principles

    -

    A summary of the high-level process for finding and assessing non-text graphics on a web page:

    +

    A summary of the high-level process for finding and assessing non-text content on a web page:

    • Identify each user-interface component (link, button, form control) on the page and:
        @@ -451,7 +470,7 @@

        Testing Principles

      • Test those contrast indicators in each state.
      • -
    • 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: +
    • 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:
      • Check the contrast of the graphical object against its adjacent colors;
      • If there are multiple colors and/or a gradient, choose the least contrasting area to test;
        • diff --git a/understanding/21/orientation.html b/understanding/21/orientation.html index fe4698bc46..33f6c2b967 100644 --- a/understanding/21/orientation.html +++ b/understanding/21/orientation.html @@ -42,14 +42,13 @@

        Locking a device to an orientation

        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).

        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.

        - -
        -

        Benefits

        -
          -
        • Users with dexterity impairments, who have a mounted device will be able to use the content in their fixed orientation.
          • -
        • 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.
          • -
        -
        +
    +
    +

    Benefits

    +
      +
    • Users with dexterity impairments, who have a mounted device will be able to use the content in their fixed orientation.
      • +
    • 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.
      • +

    Examples

    diff --git a/understanding/21/pointer-cancellation.html b/understanding/21/pointer-cancellation.html index 15f71271ad..78519394d1 100644 --- a/understanding/21/pointer-cancellation.html +++ b/understanding/21/pointer-cancellation.html @@ -56,13 +56,13 @@

    Down-Event

    -
    -

    Benefits

    -
      -
    • Makes it easier for all users to recover from hitting the wrong target.
      • -
    • 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.
      • -
    • Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.
      • -
    +
    +

    Benefits

    +
      +
    • Makes it easier for all users to recover from hitting the wrong target.
      • +
    • 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.
      • +
    • Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.
      • +

    Examples

    @@ -72,12 +72,6 @@

    Examples

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

    Resources

    -
      -
    • Resource
      • -
    -

    Techniques

    diff --git a/understanding/21/pointer-gestures.html b/understanding/21/pointer-gestures.html index d25296ebcc..1d935f749d 100644 --- a/understanding/21/pointer-gestures.html +++ b/understanding/21/pointer-gestures.html @@ -73,15 +73,14 @@

    Challenges for people with disabilities

    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).

    This Success Criterion does not apply 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.

    - -
    -

    Benefits

    -
      -

    • Users who cannot (accurately) perform path-based pointer gestures - on a touchscreen, or with a mouse - will have alternative means for operating the content.

      • -

    • 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.

      • -

    • 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.

      • -
    -
    +
    +
    +

    Benefits

    +
      +

    • Users who cannot (accurately) perform path-based pointer gestures - on a touchscreen, or with a mouse - will have alternative means for operating the content.

      • +

    • 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.

      • +

    • 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.

      • +

    Examples

    diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index 67d00db5ec..a03d1f481f 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -14,7 +14,7 @@

    In brief

    Goal
    Content can be enlarged without increasing line length.
    What to do
    Make lines of text reflow within the viewport.
    -
    Why it's important
    People who need bigger text find it difficult if they must scroll to read long lines.
    +
    Why it's important
    People who need bigger text find it difficult if they must scroll to read long lines.
    @@ -23,55 +23,55 @@

    Intent of this Success Criterion

    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.

    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.

    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.

    -
    +

    How reflow works

    -

    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.

    +

    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.

    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.

    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.

    -
    -
    +
    +

    Viewing distance and display resolution

    -

    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.

    +

    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.

    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.
    A letter of the same CSS pixel size on different displays with different resolutions

    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.

    -
    -
    +
    +

    Visibility and availability of content

    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.

    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.

    -
    -
    +
    +

    Content exceptions for reflow

    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 is possible to have these elements stay within the bounds of viewport even as other content zooms to 400% (see advisory techniques).

    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.

    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.

    -
    -
    +
    +

    Responsive web design and other ways to meet this Success Criterion

    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 Conformance for WCAG 2.1).

    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.

    -
    -
    -

    Avoiding scrolling in horizontally and vertically written languages

    +
    +
    +

    Avoiding scrolling in horizontally and vertically written languages

    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.

    -
    +
    -

    The relation of Reflow to the Success Criterion 1.4.4 Resize Text

    -

    The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. Success Criterion 1.4.4 Resize Text 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 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.

    +

    The relation of Reflow to the Success Criterion 1.4.4 Resize Text

    +

    The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. Success Criterion 1.4.4 Resize Text 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.

    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.

    -
    +

    Browsers on mobile operating systems

    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.

    Mobile user agents can 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.

    -
    +
    -

    Benefits

    +

    Benefits

    • 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.
    @@ -116,13 +116,13 @@

    Sufficient Techniques

    Advisory Techniques

    -
      -
    • C34
      • -
    • CSS, Fitting images to the viewport;
      • -
    • CSS, Reflowing simple data tables (Potential future technique)
      • -
    • CSS, Fitting data cells within the width of the viewport (Potential future technique)
      • -
    • Mechanism to allow mobile view at any time (Potential future technique)
      • -
    +
      +
    • C34
      • +
    • CSS, Fitting images to the viewport;
      • +
    • CSS, Reflowing simple data tables (Potential future technique)
      • +
    • CSS, Fitting data cells within the width of the viewport (Potential future technique)
      • +
    • Mechanism to allow mobile view at any time (Potential future technique)
      • +

    Failures

    diff --git a/understanding/21/status-messages.html b/understanding/21/status-messages.html index 014e30b4d7..f202bbd64e 100644 --- a/understanding/21/status-messages.html +++ b/understanding/21/status-messages.html @@ -31,14 +31,13 @@

    Intent of this Success Criterion

    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 about 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 Status Message Examples below.

    This Success Criterion specifically addresses scenarios where new content is added to the page without changing the user's context. Changes of context, 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 Examples of Changes That Are Not Status Messages below.

    - -
    -

    Benefits

    +
    +
    +

    Benefits

      -
    • 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.
      • -
    • 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 not 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.
      • -
    -
    +
  • 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.
    • +
  • 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 not 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.
    • +

    Examples of Success Criterion 3.2.6

    diff --git a/understanding/21/target-size-enhanced.html b/understanding/21/target-size-enhanced.html index 35887b9c4b..6690225d7c 100644 --- a/understanding/21/target-size-enhanced.html +++ b/understanding/21/target-size-enhanced.html @@ -3,7 +3,7 @@ Understanding Target Size (Enhanced) - +

    Understanding SC 2.5.5 Target Size (Enhanced)

    @@ -31,18 +31,16 @@

    Intent

    Equivalent targets: 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.

    Inline: 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.

    -
    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.

    -
    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.

    User Agent Control: 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.

    Essential: 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.

    -

    Benefits

    +

    Benefits

    • Users who use a mobile device where touch screen is the primary mode of interaction
    • Users with mobility impairments, such as hand tremors
      • @@ -55,20 +53,26 @@

      Benefits

    Examples

    -
      -
    • Example 1: Buttons
      Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.
      • -
    • Example 2: Equivalent target
      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.
      • -
    • Example 3: Anchor Link
      The target is an in-page link and the target is less than 44 by 44 CSS pixels.
      • -
    • Example 4: Text Link in a paragraph
      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.
      • -
    • Example 5: Text Link in a sentence
      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.
      • -
    • Example 6: Footnote
      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.
      • -
    • Example 7: Help icon
      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.
      • -
    +
    +
    Example 1: Buttons
    +
    Three buttons are on-screen and the touch target area of each button is 44 by 44 CSS pixels.
    +
    Example 2: Equivalent target
    +
    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.
    +
    Example 3: Anchor Link
    +
    The target is an in-page link and the target is less than 44 by 44 CSS pixels.
    +
    Example 4: Text Link in a paragraph
    +
    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.
    +
    Example 5: Text Link in a sentence
    +
    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.
    +
    Example 6: Footnote
    +
    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.
    +
    Example 7: Help icon
    +
    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.
    +

    Resources

    -

    • Apple touch target size recommendations
    • Windows UWP Guidelines for touch targets
      • @@ -83,7 +87,6 @@

      Techniques

      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 Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

      Sufficient

      -

      Techniques that are sufficient to meet the Guideline or Success Criterion.

      • Ensuring that targets are at least 44 by 44 CSS pixels.
        • @@ -92,14 +95,12 @@

        Sufficient

      Advisory

      -

      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.

      • Ensuring inline links provide sufficiently large activation target.

      Failure

      -

      The following are common mistakes that are considered failures of Success Criterion 2.5.5 by the WCAG Working Group.

      • Failure of Success Criterion 2.5.5 due to target being less than 44 by 44 CSS pixels.
      diff --git a/understanding/21/text-spacing.html b/understanding/21/text-spacing.html index 77b6c1f708..8d15e5f89d 100644 --- a/understanding/21/text-spacing.html +++ b/understanding/21/text-spacing.html @@ -65,7 +65,7 @@

      Text Cut Off

      Vertical text cut off is a failure.
      Heading text truncated vertically. -

      In Figure 2 the last portion of text is cut off in 3 side-by-side headings. The 1st heading should read "A cog in the wheel." But it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The 2nd heading should read "A penny for your thoughts". But it reads "A penny for your". The 3rd should read "Back to the drawing board." But it reads "Back to the drawi".

      +

      In Figure 2 the last portion of text is cut off in three side-by-side headings. The first heading should read "A cog in the wheel", but it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The second heading should read "A penny for your thoughts". But it reads "A penny for your". The third should read "Back to the drawing board." But it reads "Back to the drawi".

      Horizontal text cut off is a failure.
      3 side-by-side headings with truncated text. @@ -73,7 +73,7 @@

      Text Cut Off

      Text Overlap

      -

      In Figure 3 the last 3 words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." But the words "You are invited to share ideas" are obscured and unreadable.

      +

      In Figure 3 the last three words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." However, the words "You are invited to share ideas" are obscured and unreadable.

      Overlapping text is a failure.
      Heading text overlaps part of paragraph text. @@ -115,15 +115,15 @@

      Languages and Scripts

      Results

      No adverse effects occurred. The following are the specific findings:

      -
      Character Spacing
      +
      Character Spacing
      Individual characters in words remained intact though they were spaced a bit further apart.
      -
      Word Spacing
      -
      Words were spaced farther apart. In languages that do not have words (e.g. Japanese) applying word spacing had no effect. This is expected.
      +
      Word Spacing
      +
      Words were spaced further apart. In languages that do not have words (e.g., Japanese) applying word spacing had no effect. This is expected.
      Line Height
      Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.

      As previously discussed, the ability to read text with adjusted spacing is a user responsibility. This is true no matter the language.

      -

      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.

      +

      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.

      diff --git a/understanding/22/consistent-help.html b/understanding/22/consistent-help.html index f4bcbf851a..f0bb522d29 100644 --- a/understanding/22/consistent-help.html +++ b/understanding/22/consistent-help.html @@ -150,8 +150,7 @@

      Resources

      diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html index 55f6a535a8..5426fd0a9e 100644 --- a/understanding/22/focus-appearance.html +++ b/understanding/22/focus-appearance.html @@ -38,9 +38,8 @@

      Intent of Focus Appearance

      adequate contrast against the background in each of its states, Focus Appearance requires sufficient contrast for the focus indicator itself.

      -

      For sighted people with mobility impairments who use a keyboard or a device that utilizes the keyboard interface (such as a switch or - voice input), knowing the current point of focus is very important. Visible focus must also meet the needs +

      For sighted people with mobility impairments who use a keyboard or a device that utilizes the keyboard interface + (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.

      A keyboard focus indicator can take different forms. This Success Criterion encourages the use of a solid @@ -594,9 +593,8 @@

      Focus indicator around only the subcomponent

      Where something with focus is not a user interface component

      Some pages contain very large editing regions, such as web implementations of word processors and code editors. Unlike a textarea element, which is a user interface component, these large - editing regions do not typically meet the definition of user interface - components; they are not "perceived by users as a single control for a distinct function." + editing regions do not typically meet the definition of user interface components; + 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 @@ -675,8 +673,7 @@

      Modifying the focus indicator background

      Altering the body element's background-color attribute is one way of altering the pixels directly adjacent to the indicator in most implementations. However, specifying a value of white (#FFFFFF) does not nullify this - exception since, as established in the third note of the contrast ratio definition, the + exception since, as established in the third note of the contrast ratio definition, the default ("unspecified") color is assumed to be white.

      diff --git a/understanding/intro.html b/understanding/intro.html index 0ccbf90ac6..f4c29f8a8d 100644 --- a/understanding/intro.html +++ b/understanding/intro.html @@ -8,7 +8,7 @@

      Introduction to Understanding WCAG 2

      Understanding WCAG 2 is an essential guide to understanding and using "Web Content Accessibility Guidelines 2". 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.

      This is not an introductory document. It is a detailed technical description of the guidelines and their success criteria. See Web Content Accessibility Guidelines (WCAG) Overview for an introduction to WCAG, supporting technical documents, and educational material.

      Understanding WCAG 2 is organized by guideline. There is an Understanding Guideline X.X 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.

      -

      The Understanding Guidelines X.X section is then followed by a Understanding success criterion X.X.X section for each success criterion of that guideline. These sections each contain:

      +

      The Understanding Guidelines X.X section is then followed by an Understanding success criterion X.X.X section for each success criterion of that guideline. These sections each contain:

      • The success criterion as it appears in WCAG 2

        @@ -89,7 +89,7 @@

        The Guidelines

    Success Criteria

    -

    Under each guideline, there are success criteria that describe specifically what must be achieved in order to conform 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.

    +

    Under each guideline, there are success criteria that describe specifically what must be achieved in order to conform 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.

    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.

    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.

    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.

    diff --git a/understanding/toc.html b/understanding/toc.html deleted file mode 100644 index 37f2094881..0000000000 --- a/understanding/toc.html +++ /dev/null @@ -1,176 +0,0 @@ -
    -

    Perceivable

    -
    -

    1.1 Text Alternatives

    - -
    -
    -

    1.2 Time-based Media

    - -
    -
    -

    1.3 Adaptable

    - -
    -
    -

    1.4 Distinguishable

    - -
    -
    -
    -

    Operable

    -
    -

    2.1 Keyboard Accessible

    - -
    -
    -

    2.2 Enough Time

    - -
    -
    -

    2.3 Seizures and Physical Reactions

    - -
    - -
    -

    2.5 Input Modalities

    - -
    -
    -
    -

    Understandable

    -
    -

    3.1 Readable

    - -
    -
    -

    3.2 Predictable

    - -
    -
    -

    3.3 Input Assistance

    - -
    -
    -
    -

    Robust

    -
    -

    4.1 Compatible

    - -
    -
    -
    -

    Other Understanding documents

    - -
    \ No newline at end of file diff --git a/understanding/understanding-template.html b/understanding/understanding-template.html index 40e50750b2..f73ba2b723 100644 --- a/understanding/understanding-template.html +++ b/understanding/understanding-template.html @@ -9,13 +9,13 @@

    Understanding SC #.#.#

    Intent

    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.

    -
    -

    Benefits

    -

    This explains how following the success criterion benefits particular types of users with disabilities.

    -
      -
    • Benefit
      • -
    -
    +
    +
    +

    Benefits

    +

    This explains how following the success criterion benefits particular types of users with disabilities.

    +
      +
    • Benefit
      • +

    Examples

    @@ -73,4 +73,4 @@

    Failure

    - \ No newline at end of file + 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/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 @@ - + -Using role=alert to Identify Errors - +Using ARIA live regions or role=alert to identify errors + + + + - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 59ec422cfa..0000000000 --- a/working-examples/silverlight-alternative-audio-channel/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - AlternativeAudioChannel - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 4d76dfd998..0000000000 --- a/working-examples/silverlight-application-level-key-handling/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ApplicationLevelKeyHandling - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 @@ - - - 0.683757839154774 - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\flower.jpg - 0 - 0.248322147651007 - 0.426006666529119 - 0.447427293064877 - 1 - - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\guy_by_the_beach.jpg - 0.284513295996183 - 0 - 0.445908699115547 - 0.447427293064877 - 2 - - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\tree_blossoms.jpg - 0.564602007381454 - 0.328859060402685 - 0.435397992618546 - 0.447427293064877 - 3 - - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\licorice.jpg - 0.22022604281128 - 0.552572706935123 - 0.437066526416967 - 0.447427293064877 - 4 - - - \ 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 @@ - - - 0.683757839154774 - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\flower.jpg - 0 - 0.248322147651007 - 0.426006666529119 - 0.447427293064877 - 1 - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\guy_by_the_beach.jpg - 0.284513295996183 - 0 - 0.445908699115547 - 0.447427293064877 - 2 - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\tree_blossoms.jpg - 0.564602007381454 - 0.328859060402685 - 0.435397992618546 - 0.447427293064877 - 3 - - - C:\Documents and Settings\samlan\My Documents\Expression\Deep Zoom Composer Projects\sampleProject\source images\licorice.jpg - 0.22022604281128 - 0.552572706935123 - 0.437066526416967 - 0.447427293064877 - 4 - - \ 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 @@ - - - - - - - - - - - - - - - - - - - - - \ 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 @@ - - - - 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 @@ - - - - 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 @@ - - - - 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 @@ - - - - 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 828e843598..0000000000 --- a/working-examples/silverlight-automation-properties-help-text/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - AutomationPropertiesHelpText - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 818b770671..0000000000 --- a/working-examples/silverlight-basic-submit-button/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - BasicSubmitButton - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 c902bfea87..0000000000 --- a/working-examples/silverlight-browser-zoom/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - BrowserZoom - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 99f4c48c80..0000000000 --- a/working-examples/silverlight-built-in-key-equivalence/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - BuiltInKeyEquivalence - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 e025c5be68..0000000000 --- a/working-examples/silverlight-button-nontext-text-composition/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ButtonNontextTextComposition - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 e025c5be68..0000000000 --- a/working-examples/silverlight-button-text-alternative/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ButtonNontextTextComposition - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 3ef66b4927..0000000000 --- a/working-examples/silverlight-by-animation-font-size/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - StyleSwitcherFontSize - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 c5a1810961..0000000000 --- a/working-examples/silverlight-document-structure/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - DocumentStructure - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 50db03cfaa..0000000000 --- a/working-examples/silverlight-focus-visual-custom-control/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - FocusVisualCustomControl - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 33196379c3..0000000000 --- a/working-examples/silverlight-focusable-image/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ImageEquivalent - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 c9628068bd..0000000000 --- a/working-examples/silverlight-help-text-and-tool-tip/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - HelpTextAndToolTip - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 9b156ee74e..0000000000 --- a/working-examples/silverlight-high-contrast/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - HighContrast - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 5aaad0f1c4..0000000000 --- a/working-examples/silverlight-labels/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Labels - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 a9ec32dda8..0000000000 --- a/working-examples/silverlight-lang-properties/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - LangProperties - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 7008514e47..0000000000 --- a/working-examples/silverlight-media-element-controls-auto-play/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - MediaElementControlsAutoPlay - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 024274a6a4..0000000000 --- a/working-examples/silverlight-media-element-controls/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - MediaElementControls - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 bf803f2fd0..0000000000 --- a/working-examples/silverlight-media-timeline-markers/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - MediaTimelineMarkers - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 a60826e289..0000000000 --- a/working-examples/silverlight-pause-bouncy-ball/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - PauseBouncyBall - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 f722567bb1..0000000000 --- a/working-examples/silverlight-programmatic-focus/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ProgrammaticFocus - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 bb48bc31d2..0000000000 --- a/working-examples/silverlight-replace-audio-with-transcript/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - ReplaceAudioWithTranscriptText - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - diff --git a/working-examples/silverlight-silver-fish/index.html b/working-examples/silverlight-silver-fish/index.html deleted file mode 100644 index c85cb61d54..0000000000 --- a/working-examples/silverlight-silver-fish/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - SilverFish - - -
    -
    - - - -
    -
    -
    - - - - - - 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 b802078e6f..0000000000 --- a/working-examples/silverlight-simple-numeric-up-down/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - KeysNumericUpDown - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 3e16fa56aa..0000000000 --- a/working-examples/silverlight-simple-peer-forwarding/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - SimplePeerForwarding - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 ead18ca39d..0000000000 --- a/working-examples/silverlight-stop-animation/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - StopAnimation - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 3ef66b4927..0000000000 --- a/working-examples/silverlight-style-switcher-font-size/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - StyleSwitcherFontSize - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 d1d8bec4f1..0000000000 --- a/working-examples/silverlight-tab-navigation/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - TabNavigation - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 65bb846cfd..0000000000 --- a/working-examples/silverlight-tab-sequence-enabled/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - TabSequenceEnabled - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 619eb974cd..0000000000 --- a/working-examples/silverlight-tab-sequence-tab-index/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - TabSequence_TabIndex - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 558c6fb5e1..0000000000 --- a/working-examples/silverlight-tab-sequence/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - TabSequence - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 fbbd229150..0000000000 --- a/working-examples/silverlight-visible-focus-template/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - VisibleFocusTemplate - - - - - -
    -
    - - - - - - - - Get Microsoft Silverlight - -
    - - - 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 @@ + + + + Sticky footer is hiding focused elements + + + +
    +

    Sticky footer is hiding focused elements

    +
    +

    This demo page is crafted to illustrate Example 1: Sticky footer of the failing technique F110: Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements.

    +

    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.

    +

    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.

    +
    +
    +

    You will rejoice to hear that no disaster 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.

    +

    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 foretaste of those icy climes. Inspirited by this wind of promise, my daydreams 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 heavenly bodies 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.

    +

    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.

    +

    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 temple 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.

    +

    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.

    +

    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 enticement 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.

    +

    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.

    +

    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.

    +

    Farewell, my dear, excellent Margaret. Heaven shower down blessings on you, and save me, that I may again and again testify my gratitude for all your love and kindness.

    +
    + +
    +
    + + +
    + + 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 @@ + + + + Sticky header is hiding focused elements + + + + +
    + + +
    +
    +

    Sticky header is hiding focused elements

    +
    +

    This demo page is crafted to illustrate Example 1: Sticky header of the failing technique F110: Failure of Success Criterion 2.4.11 due to a sticky footers or headers hiding focused elements.

    +

    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.

    +

    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.

    +
    +
    +

    You will rejoice to hear that no disaster 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.

    +

    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 foretaste of those icy climes. Inspirited by this wind of promise, my daydreams 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 heavenly bodies 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.

    +

    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.

    +

    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 temple 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.

    +

    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.

    +

    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 enticement 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.

    +

    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.

    +

    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.

    +

    Farewell, my dear, excellent Margaret. Heaven shower down blessings on you, and save me, that I may again and again testify my gratitude for all your love and kindness.

    +
    + +
    + + + diff --git a/xslt/generate-techniques-toc.xslt b/xslt/generate-techniques-toc.xslt deleted file mode 100644 index b9b361ee23..0000000000 --- a/xslt/generate-techniques-toc.xslt +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - ARIA Techniques - Client-Side Script Techniques - CSS Techniques - Common Failures - Flash Techniques - General Techniques - HTML Techniques - PDF Techniques - Server-Side Script Techniques - Silverlight Techniques - SMIL Techniques - Plain-Text Techniques - - -

    - - § -

    -
      - - - -
    -     - - -
  • - : -
    • -     - -     \ No newline at end of file diff --git a/xslt/generate-techniques.xslt b/xslt/generate-techniques.xslt deleted file mode 100644 index 14564e9cb9..0000000000 --- a/xslt/generate-techniques.xslt +++ /dev/null @@ -1,636 +0,0 @@ - - - - - - techniques/ - output/ - technique-assocations.xml - ../guidelines/wcag.xml - - - - - - - -
    -
    - -
    -
    -     - - - - - - - - - - : - - an unwritten technique - - - - - - - - - - - : - - - - - - - - Sufficient to meet - Advisory for - a Failure of - - - - - - - , if combined with - - - - - and - - - - , using a more specific technique. - - - - - when used with - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -]]> - - - - - - - - - -
    - -
    - - -
    - - - - - - - - -
    - -
    - - - - - -     - - -
    -

    - About this Technique -

    -
    - -
    -
    -     - - - - - <xsl:value-of select="$meta/@id"/>: <xsl:value-of select="//html:h1"/> | WAI | W3C - - - - -

    Technique :

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

    This technique is - - - - and - - .

    -     - - -

    This technique is .

    -     - -

    This technique is not referenced from any Understanding document.

     -     - - - - - -

    Note: 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.

    -     - -

    Note: Microsoft has stopped updating and distributing Silverlight, and authors are encouraged to use HTML for accessible web content.

    -     -     -     - - - - - -
    -

    Applicability

    - - - - - - - - - -

    Content using WAI-ARIA.

    -     - -

    Content using client-side script (JavaScript, ECMAScript).

    -     - -

    Content using technologies that support CSS.

    -     - - -

    Content implemented in Adobe Flash.

    -     - -

    Content implemented in any technology.

    -     - -

    Content structured in HTML.

    -     - -

    Content implemented in Adobe Tagged PDF.

    -     - -

    Content modified by the server before being sent to the user.

    -     - -

    Content implemented in Microsoft Silverlight.

    -     - -

    Content implemented in Synchronized Multimedia Integration Language (SMIL).

    -     - -

    Content implemented in plain text, including Markdown and similar formats, without use of a structure technology.

    -     -     -     -     - - - - -
    -
    Note
    -

    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.

    -
    -     - -
    -
    Note
    -

    Microsoft has stopped updating and distributing Silverlight, and authors are encouraged to use HTML for accessible web content.

    -
    -     -     - - - - - - - - - - - - - - - - - ( - - Sufficient - Advisory - Failure - - - , together with - - - - - and - - - - using a more specific technique - - - - when used with - - - - - ) - - - - - - - - - - - - -

    This technique relates to:

    -
      - -
      • -       -
    -     - -

    This technique relates to .

    -     -

    This technique is not referenced from any Understanding document.

     -     -
    -     - - - - - - -
    -

    Description

    - -
    -     - - Missing or incomplete description section in - -     -     - - - - - -
    -

    Examples

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

    Other sources

    -

    No endorsement implied.

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

    Tests

    - -
    -     - - Missing or incomplete tests section in - -     -     - - - - - -
    -

    Test Rules

    -

    The following are Test Rules related to this Technique. 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 Understanding Test Rules for WCAG Success Criteria.

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

    - -     -     - - - - - Procedure - - - - - - - - Expected Results - - - - - - - - Example - - - : - - - - - - -

    - -     -     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -     diff --git a/xslt/generate-understanding-toc.xslt b/xslt/generate-understanding-toc.xslt deleted file mode 100644 index 0bba678ceb..0000000000 --- a/xslt/generate-understanding-toc.xslt +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - -
    -

    Other Understanding documents

    -
      - -
    -
    -     -     - - -
    -

    - -
    -     - - -
    -

    - - - - -

    -
      - -
    -
    -     - - -
  • - - - - -
    • -     - - -
    • -     - -     \ No newline at end of file diff --git a/xslt/generate-understanding.xslt b/xslt/generate-understanding.xslt deleted file mode 100644 index ca98a8e5d4..0000000000 --- a/xslt/generate-understanding.xslt +++ /dev/null @@ -1,1140 +0,0 @@ - - - - - - input/understanding/ - output/ - - - - - - Guideline - Success Criterion - - - - - - - : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  • - - - Part of Guideline: - - - - - -
    • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -     - - - - - - - - - - - - - - - - -     -     - - - - - - -
  • - -
    • -
  • - - - - -
      - - -
    • - - -
      • -       - -
    • - - -
      • -       - - -
    • - - -
      • -       -
    -     -
    • -
  • - - -
    • -     - - - - - - - - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - - - - - - - - - - - context - - - - - - - - - - - - - Next - next - - - - - - - Next - next - - - - - - - Next - next - - - - - - - Next - next - - - - - - - Next - next - - - - - - - Next - next - - - - - - - - - - - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - Previous - previous - - - - - - - - - - - - context - - - - - - - - - - - - Next - next - - - - - - - Next - next - - - - - - - - - - - - - - - Guideline - SC - - - - - - - - - - - - - - - - - - : - - - - - - - - - - - - - - -
    -
    - -
    -
    -     - - - - - - - - - - - - - - - - - -
    -

    Success Criteria for this Guideline

    - -
    -     - - - - - Guideline - Success Criterion - - - - - - - (Level ) - : - - - -
    -

    Note

    - - - -
    -     - - - -

    - - - -

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

    Key Terms

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

    Test Rules

    -

    The following are Test Rules for certain aspects of this Success Criterion. 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 Understanding Test Rules for WCAG Success Criteria.

    - -
    -     -     - - - - - - - - Unable to find term "" in " ()"; key terms list will be incomplete. - - - - - - - - - - - - - - - -
    -
    -     - - - - - - - - - - - - - - - - - - -]]> - - - - - - <xsl:apply-templates select="//html:title"/> - <xsl:text> | WAI | W3C</xsl:text> - - - - - - - -
    - -
    -

    - - (Level ) -

    - - - -
    -

    - - Guideline - Success Criterion (SC) -

    -
    - -
    -
    -
    - - - - - - - - - - - - - - -
    - -
    -     - - - -
    - -
    - - - - - -     - - - - - - - - - Understanding - - - - - - - Understanding - - - Guideline - SC - - : - - - - - - - -

    In Brief

    - -     -     - - - - -

    Intent

    - -     -     - - - - -

    Benefits

    - -     -     - - - - - -

    Examples

    - -     -     -     - - - - - -

    Related Resources

    -

    Resources are for information purposes only, no endorsement implied.

    - -     -     -     - - - - -

    Techniques

    -

    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 Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

    - -     -     - - - - - -

    Sufficient Techniques

    - -

    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.

    -     - -     -     -     - - - - - -

    Advisory Techniques

    -

    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.

    - -     -     -     - - - - - -

    Advisory Techniques

    -

    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.

    - -     -     -     - - - - - -

    Failures

    -

    The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.

    - -     -     -     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -     diff --git a/xslt/process-index.xslt b/xslt/process-index.xslt deleted file mode 100644 index de38a6ae73..0000000000 --- a/xslt/process-index.xslt +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - -]]> - - - - - - - - - - - - - - - - - - - \ No newline at end of file
    + Failing User Interface Component Examples +
    Checkbox - Subtle hover styleA 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.Blackbox on a circular grey background next to a text label.TypeDescriptionExamples
    Colored underline is the only indicator of a linkLink and non-link text are both white on an almost-black (#0D0F13) background. The link's custom underline (#B1262B) is the only way to identify the link. The red underline contrasts less than 3:1 with the background color.White non-link and link text on an almost black background. The link text has a dull-red underline.
    Checkbox - border colorThe 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.Grey box on a white background with a black tick in the middle.
    Checkbox - Subtle focus style - failA 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.Checkbox - subtle focus styleA 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. Unchecked checkbox with a thick gray additional outline as focus indication.
    An orange circle with a white telephone icon in the middle.

    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 ratio greater than 3:1, which passes.

    +

    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 ratio greater than 3:1, which passes.

    The graphical object is the white phone icon.
    A yellow arrow pointing down with a pound sign (currency) in the middle.

    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).

    +

    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).

    The graphical objects are the shape and the currency symbol.