diff --git a/.editorconfig b/.editorconfig index e20a9680d2..b3b073edc9 100644 --- a/.editorconfig +++ b/.editorconfig @@ -8,4 +8,3 @@ indent_style = space indent_size = 2 end_of_line = lf insert_final_newline = true -trim_trailing_whitespace = true \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 4174dade24..7555ccf313 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,4 +1,4 @@ -language: node_js +language: java env: global: - GH_REF: github.com/w3c/wcag.git @@ -15,20 +15,15 @@ before_script: - git config --global user.name "michael-n-cooper" script: - - cd ../.. - - mkdir gh-pages - - cd gh-pages - - git clone --depth=1 --branch=gh-pages https://github.com/w3c/wcag.git - - cd wcag - - mkdir guidelines/22 - - mkdir requirements/22 - - cp -r ../../w3c/wcag/css css - - cp ../../w3c/wcag/guidelines/guidelines.css guidelines/22/guidelines.css - - cp ../../w3c/wcag/guidelines/relative-luminance.xml guidelines/22/relative-luminance.xml - - curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://rawgit.com/w3c/wcag/master/requirements/index.html -o requirements/22/index.html -f --retry 3 - - curl https://labs.w3.org/spec-generator/?type=respec"&"url=https://rawgit.com/w3c/wcag/master/guidelines/index.html -o guidelines/22/index.html -f --retry 3 + - mkdir output + - git clone --depth=1 --branch=gh-pages https://github.com/w3c/wcag.git output + - ant deploy -after_success: - - git add -A . - - git commit -m "Generated by TRAVIS-CI" - - git push "https://${GH_TOKEN}@${GH_REF}" gh-pages > /dev/null 2>&1 +deploy: + provider: pages + skip-cleanup: true + github-token: $GITHUB_TOKEN + keep-history: true + local-dir: output + on: + branch: master diff --git a/README.md b/README.md index 71f3e8f047..24c8c4e411 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Where is "20", content came from WCAG 2.0. "21" is used for content in [Success Criteria Managers](https://www.w3.org/WAI/GL/wiki/SC_Managers_Phase1) will prepare candidate success criteria, ready for inclusion in the guidelines document. To prepare success criteria, follow these steps: -1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/), using the URI https://github.com/w3c/wcag21.git to clone. +1. [Clone the repository](https://help.github.com/articles/cloning-a-repository/), using the URI https://github.com/w3c/wcag.git to clone. 1. Switch to the working branch for the proposal, which is named for the shortname of the draft success criterion and the issue number, concatenated together. 1. Find the appropriate file for the success criterion in the guidelines/sc/21 folder, named the same as the start of the branch name, and open in an HTML-capable editor. Do the same with any definitions referenced by the success criterion, in the guidelines/terms/21 folder. 1. Open the guidelines/index.html file and remove comment marks around the lines that reference the success criterion and terms you have edited.. @@ -97,22 +97,61 @@ The formal publication location for Understanding pages is currently https://www ## Editing Techniques -Techniques are in the techniques folder, and grouped by technology into sub-folders. Each technique is a standalone file, which is in HTML format with a regular structure of elements, classes, and ids. Techniques previously published for WCAG 2.0 are currently have the assigned ID of the technique as the filename, but new techniques should use a filename that is derived from a shortened version of the technique title. +Techniques are in the techniques folder, and grouped by technology into sub-folders. Each technique is a standalone file, which is in HTML format with a regular structure of elements, classes, and ids. -For example, a technique "Using the alt attribute on the img element to provide short text alternatives" might use "img-alt-short-text-alternatives.html" as the filename. +### Technique File Structure + +The [technique template](techniques/technique-template.html) shows the structure of techniques. Main sections are in top-level <section> elements with specific IDs: meta, applicability, description, examples, tests, related, resources. The description and tests sections are required; the applicability and examples sections are recommended; the related and resources sections are optional. The meta section provides context for the technique during authoring but is removed for publication. The title of the technique is in the `

` element. Elements with `class="instructions"` provide information about populating the template. They should be removed as the technique is developed but if not removed, will be ignored by the generator. **Do not copy `class="instructions"` on real content.** + +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. Small inline images may be loaded with a `` element with suitable `alt` text. + +Techniques should include brief code examples to demonstrate how to author content that follows the technique. Code examples should be easy to read, and usually not complete content in themselves. More complete examples can be provided as [working examples](#user-content-provide-working-examples-of-techniques) (see below). Link to working examples at the bottom of each example, in a `

` element, containing a relative link to `../../working-examples/{example-name}/`. + +Cross references to other techniques may be provided where useful. Generally they should be provided in the "Related Techniques" section but can be provided elsewhere. Use a relative link to reference the technique, `{Technique ID}` if the same technology, or `../{Technology}/{Technique ID}` otherwise. If the technique is still under development and does not have a formal ID, reference the path to the development file. If the technique is under development in a different branch, use an absolute URI to the rawgit version of the technique. + +Cross references to guidelines and success criteria should use a relative URI to the *Understanding* page for that item. Cross references to other parts of the guidelines should use an absolute URI to the guidelines as published on the W3C TR page, a URI beginning with `https://www.w3.org/TR/WCAG21/#`. Note that references to guidelines or success criteria to which techniques relate are added by the generator upon publication based on information in the Understanding documents, so redundant links to those is not normally needed or advised. ### Create Techniques +[General priorities and process to work on techniques are maintained in the wiki](https://www.w3.org/WAI/GL/wiki/Wcag21-techniques). + +New techniques should use a filename that is derived from a shortened version of the technique title. Editors will assign the technique an ID and rename the file when it is accepted by the Working Group. For example, a technique "Using the alt attribute on the img element to provide short text alternatives" might use "img-alt-short-text-alternatives.html" as the filename. The editors will assign it a formal ID, and rename the file, when it is accepted by the Working Group. + +Each new technique should be created in a new branch. Set-up of the branch and file is automated via the create-techniques.sh script, which can be run with bash. The command line is: + +```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 \\ + +This automates the following steps: + * Determine a filename for the technique that is likely to be descriptive, unique, and short. * Create a working branch named the same as the technique filename. * Copy the techniques/technique-template.html file into the appropriate technology folder for the technique, and give it the chosen file name. * In the section element with id "meta", indicate to which guideline or success criterion the technique relates, and whether the technique is sufficient, advisory, or a failure for that item. Multiple applicability are allowed. + +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, ask the chairs to arrange WG review and merge. +* When the technique is ready for review, make a pull request into master. * 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. -### Provide Working Examples of Techniques +### 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). + +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. + +## 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. diff --git a/build.xml b/build.xml index e51b33dee0..a89de022d8 100644 --- a/build.xml +++ b/build.xml @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="UTF-8"?> <!-- This is a build file for Apache ant (http://ant.apache.org/). This has been tested with Ant 1.7. --> -<project name="wcag21" basedir="." default="usage"> +<project name="wcag" basedir="." default="usage"> <description>Generate WCAG 2.1 and related documents</description> @@ -12,6 +12,7 @@ <property name="uri.prefix" value="file:///" description="Prefix if any that must be prepended to URIs to make it resolve on the platform"/> <property name="xslt.factory" value="net.sf.saxon.TransformerFactoryImpl" description="Class name of the XSLT transformer factory, which sets which XSLT engine to use; must be an XSLT 2.0 processor"/> + <property name="classpath.saxon" value="lib/saxon9he.jar" description="Path to Saxon jar in order to run XSLT 2.0"/> <!-- The following properties usually do not need to be adjusted --> <property name="inputdir.guidelines" location="guidelines"/> @@ -22,6 +23,12 @@ <property name="outputdir.understanding" location="${outputdir}/understanding"/> <property name="outputdir.techniques" location="${outputdir}/techniques"/> + <taskdef resource="net/sf/antcontrib/antcontrib.properties"> + <classpath> + <pathelement location="lib/ant-contrib-0.6.jar" /> + </classpath> + </taskdef> + <target name="usage"> <echo level="info">Usage: "ant <target>" to execute a build task Enter "ant -projecthelp" to get list of available build tasks</echo> @@ -31,9 +38,9 @@ <target name="clean" description="Clean up any temp files"> <delete file="${inputdir.guidelines}/index-flat.html" failonerror="false"/> - <delete file="${inputdir.guidelines}/wcag21.xml" failonerror="false"/> - <delete file="${inputdir.guidelines}/wcag21.json" failonerror="false"/> + <delete file="${inputdir.guidelines}/wcag.xml" failonerror="false"/> <delete file="${inputdir.techniques}/techniques.xml" failonerror="false"/> + <delete file="${inputdir.techniques}/technique-associations.xml" failonerror="false"/> <delete file="output.html" failonerror="false"/> <delete dir="output" failonerror="false"/> </target> @@ -41,54 +48,185 @@ <target name="flatten" depends="init" description="Build a copy of guidelines with all data-include files incorporated"> <makeurl file="${basedir}/guidelines/" property="base.guidelines"/> <xslt in="${inputdir.guidelines}/index.html" out="${inputdir.guidelines}/index-flat.html" style="xslt/flatten-document.xslt"> + <classpath path="${classpath.saxon}"/> <factory name="${xslt.factory}"/> - <param name="base" expression="${base.guidelines}"/> + <param name="base.dir" expression="${base.guidelines}"/> </xslt> </target> <target name="guidelines-xml" depends="flatten" description="Build an XML representation of the guidelines"> - <xslt in="${inputdir.guidelines}/index-flat.html" out="${inputdir.guidelines}/wcag21.xml" style="xslt/generate-structure-xml.xslt"> + <xslt in="${inputdir.guidelines}/index-flat.html" out="${inputdir.guidelines}/wcag.xml" style="xslt/generate-structure-xml.xslt"> + <classpath path="${classpath.saxon}"/> <factory name="${xslt.factory}"/> </xslt> </target> <!-- Techniques --> - <target name="techniques-xml" depends="flatten, guidelines-xml" description="Build an XML structure of all techniques"> + <target name="techniques-list" description="Create XML list of all the technique files"> + <property name="output.file" value="${inputdir.techniques}/techniques.xml"/> + <echo file="${output.file}"><![CDATA[<techniques> +]]></echo> + <for param="current.dir"> + <path><dirset dir="techniques" includes="*"/></path> + <sequential> + <local name="technology"/> + <basename file="@{current.dir}" property="technology"/> + <echo file="${output.file}" append="yes"><![CDATA[ <technology name="${technology}"> +]]></echo> + <for param="current.file"> + <path><fileset dir="@{current.dir}" includes="*"/></path> + <sequential> + <local name="technique"/> + <basename file="@{current.file}" property="technique" suffix="html"/> + <echo file="${output.file}" append="yes"><![CDATA[ <technique id="${technique}"> +]]></echo> + <local name="technique.title"/> + <loadfile srcFile="@{current.file}" property="technique.title"> + <filterchain> + <linecontainsregexp> + <regexp pattern="</?h1>"/> + </linecontainsregexp> + <striplinebreaks/> + <replaceregex pattern=".*<h1>(.*?)</h1>.*" replace="\1"/> + <replaceregex pattern="\s\s+" replace=" "/> + </filterchain> + </loadfile> + <echo file="${output.file}" append="yes"><![CDATA[ <title>${technique.title} +]]> + +]]> + + + +]]> + + + +]]> + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + + - + + + + + + + + - - + + + - + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/create-techniques.sh b/create-techniques.sh new file mode 100644 index 0000000000..042e7d525a --- /dev/null +++ b/create-techniques.sh @@ -0,0 +1,15 @@ +#!/bin/bash +# $1 = technology +# $2 = filename +# $3 = type +# $4 = title +git checkout -b tech-$2 +mkdir techniques/$1 +cp techniques/technique-template.html techniques/$1/$2.html +sed -i "s|

|

$1

|" techniques/$1/$2.html +sed -i "s|

|

$3

|" techniques/$1/$2.html +sed -i "s|Technique Title|$4|g" techniques/$1/$2.html +git add techniques/$1/$2.html +git commit -m "Set up $2 technique" +git push --set-upstream origin tech-$2 +git checkout master \ No newline at end of file diff --git a/css/slicenav.css b/css/slicenav.css new file mode 100644 index 0000000000..38f1e598c2 --- /dev/null +++ b/css/slicenav.css @@ -0,0 +1,22 @@ + +/* tabbed styles - repeated here to keep cover sheets consistent with /TR/ style */ + /* Navigation styles originally from Eric Meyer */ +/* http://www.complexspiral.com/events/archive/2003/seybold/cssnav.html */ +/* Revised by Liam McGee */ +/* tabbed styles */ +#navigation, #navigationbottom {padding: 3px 0 0.5em 0; margin: 0 0.25em 0; border-bottom: 2px solid #778; float: left; width: 100%; clear: both;} +#navigation li, #navigationbottom li {list-style: none; margin: 0; display: inline; float: left; font-size: 0.8125em;} +#navigation li a, #navigationbottom li a {padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; background: #dde; text-decoration: none; float: left} +#navigation li a:link, #navigationbottom li a:link {color: #404040} +#navigation li a:visited, #navigationbottom li a:visited {color: #404040} +#navigation li a:hover, #navigationbottom li a:hover, #navigation li a:focus, #navigation li a:active {color: #000; background: #aae; border-color: #227; float: left} + + /* page contents */ +.navtoc {float:right; margin: 1.25em 0 1em 1em; border: 1px solid #aab} +.navtoc p {color: #005a9c; font-size: 0.8125em; padding: 0.25em; margin: 0; font-weight: bold} + +/* page contents highlighting and border effects */ +#navbar {padding: 0; margin: 0; font-weight: bold; background: #fff} +#navbar li {list-style: none; margin: 0; padding: 0; font-size: 0.75em} +#navbar li a {display: block; margin: 0; padding: 0.25em; border-left: 1em solid #aab; text-decoration: none; width: 100%; color: #000; border-top: solid #ccc 1px; width: 12em} +#navbar li a:hover, #navbar li a:focus, #navbar li a:active {border-color: #66c; color: #000; background: #eee} diff --git a/guidelines/index.html b/guidelines/index.html index 68658b8726..f064127209 100644 --- a/guidelines/index.html +++ b/guidelines/index.html @@ -6,7 +6,7 @@ Web Content Accessibility Guidelines (WCAG) 2.1 - + @@ -59,7 +59,7 @@

WCAG 2 Layers of Guidance

WCAG 2.1 Supporting Documents

-

The WCAG 2.0 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.1 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:

+

The WCAG 2.1 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.1 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:

  1. How to Meet WCAG 2.1 - A customizable quick reference to WCAG 2.1 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 and WCAG 2.1 and can be filtered in many ways to help authors focus on relevant content.

    @@ -78,7 +78,7 @@

    WCAG 2.1 Supporting Documents

Requirements for WCAG 2.1

-

WCAG 2.1 meets a set of requirements for WCAG 2.1 which, in turn, inherit requirements from WCAG 2.0. Requirements structure the overall framework of guidelines and ensure backwards compatibility. The Working Group also used a less formal set of acceptance criteria for success criteria, to help ensure success criteria are similar in style and quality to those in WCAG 2.0. These requirements constrained what could be included in WCAG 2.1. This constraint was important to preserve its nature as a dot-release of WCAG 2.

+

WCAG 2.1 meets a set of requirements for WCAG 2.1 which, in turn, inherit requirements from WCAG 2.0. Requirements structure the overall framework of guidelines and ensure backwards compatibility. The Working Group also used a less formal set of acceptance criteria for success criteria, to help ensure success criteria are similar in style and quality to those in WCAG 2.0. These requirements constrained what could be included in WCAG 2.1. This constraint was important to preserve its nature as a dot-release of WCAG 2.

Comparison with WCAG 2.0

@@ -113,7 +113,7 @@

New Features in WCAG 2.1

Numbering in WCAG 2.1

-

In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2.0 is important, new success criteria in WCAG 2.1 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2.0, which would be caused by inserting new success critera between existing success ccriteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The WCAG 2.1 Quick Reference provides ways to view success criteria grouped by conformance level, along with many other filter and sort options.

+

In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2.0 is important, new success criteria in WCAG 2.1 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2.0, which would be caused by inserting new success criteria between existing success criteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The WCAG 2.1 Quick Reference provides ways to view success criteria grouped by conformance level, along with many other filter and sort options.

Conformance to WCAG 2.1

@@ -362,7 +362,7 @@

Input Assistance

Robust

-

Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.

+

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.

Compatible

@@ -379,7 +379,8 @@

Compatible

Conformance

-

This section lists requirements for conformance to WCAG 2.1. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be accessibility supported, since only accessibility-supported ways of using technologies can be relied upon for conformance. Understanding Conformance includes further explanation of the accessibility-supported concept.

+ +

This section lists requirements for conformance to WCAG 2.1. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be accessibility supported, since only accessibility-supported ways of using technologies can be relied upon for conformance. Understanding Conformance includes further explanation of the accessibility-supported concept.

Interpreting Normative Requirements

@@ -410,7 +411,7 @@

Full pages

Conformance (and conformance level) is for full Web page(s) only, and cannot be achieved if part of a Web page is excluded.

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.

Authors of Web pages that cannot conform due to content outside of the author's control may consider a Statement of Partial Conformance.

-

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

+

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.

@@ -421,7 +422,9 @@

Complete processes

Only Accessibility-Supported Ways of Using Technologies

-

Only accessibility-supported ways of using technologies are relied upon to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See Understanding accessibility support.)

+ +

Only accessibility-supported ways of using technologies are relied upon to satisfy the success criteria. Any information or functionality that is provided in a way that is not accessibility supported is also available in a way that is accessibility supported. (See Understanding accessibility support.)

+
@@ -440,7 +443,9 @@

Non-Interference

  • 2.2.2 - Pause, Stop, Hide.

    • If a page cannot conform (for example, a conformance test page or an example page), it cannot be included in the scope of conformance or in a conformance claim.

    -

    For more information, including examples, see Understanding Conformance Requirements.

    + +

    For more information, including examples, see Understanding Conformance Requirements.

    +
    @@ -453,7 +458,7 @@

    Required Components of a Conformance Claim

    Conformance claims are not required. Authors can conform to WCAG 2.1 without making a claim. However, if a conformance claim is made, then the conformance claim must include the following information:

    1. Date of the claim
      2. -
    2. Guidelines title, version and URI "Web Content Accessibility Guidelines 2.1 at https://www.w3.org/TR/WCAG21/" In WCAG 2.0 this was a dated URI, which may need to be adjusted when this becomes a Rec.
      3. +
    3. Guidelines title, version and URI "Web Content Accessibility Guidelines 2.1 at https://www.w3.org/TR/WCAG21/"
    4. Conformance level satisfied: (Level A, AA or AAA)

    5. A concise description of the Web pages, such as a list of URIs for which the claim is made, including whether subdomains are included in the claim.

      @@ -479,8 +484,10 @@

      Optional Components of a Conformance Claim

    6. A machine-readable metadata version of the list of specific technologies that are relied upon.
    7. A machine-readable metadata version of the conformance claim.
      8. -

      Refer to Understanding Conformance Claims for more information and example conformance claims.

      -

      Refer to Understanding Metadata for more information about the use of metadata in conformance claims.

      + +

      Refer to Understanding Conformance Claims for more information and example conformance claims.

      +

      Refer to Understanding Metadata for more information about the use of metadata in conformance claims.

      +
    @@ -713,7 +720,7 @@

    Glossary

    Change Log

    This section shows changes proposed for WCAG 2.1 since its publication as a W3C Recommendation. These changes are also recorded as errata.

    -

    The full commit history to WCAG 2.1 is available.

    +

    The full commit history to WCAG 2.1 is available.

    No changes have been made to date.

    diff --git a/guidelines/relative-luminance.xml b/guidelines/relative-luminance.xml index 7599d49343..4d52defa2e 100644 --- a/guidelines/relative-luminance.xml +++ b/guidelines/relative-luminance.xml @@ -228,7 +228,7 @@

    (Formula taken from [sRGB] and [IEC-4WD].)

    -

    Note 2: Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.

    +

    Note 2: Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.

    Note 3: If dithering occurs after delivery, then the source color value is used. For colors that are dithered at the source, the average values of the colors that are dithered should be used (average R, average G, and average B).

    Note 4: Tools are available that automatically do the calculations when testing contrast and flash.

    diff --git a/guidelines/sc/21/content-on-hover-or-focus.html b/guidelines/sc/21/content-on-hover-or-focus.html index e72759055e..1bfe1c9fe6 100644 --- a/guidelines/sc/21/content-on-hover-or-focus.html +++ b/guidelines/sc/21/content-on-hover-or-focus.html @@ -10,7 +10,7 @@

    Content on Hover or Focus

    -
    Dismissable
    +
    Dismissible
    A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
    Hoverable
    diff --git a/guidelines/sc/21/reflow.html b/guidelines/sc/21/reflow.html index a3c7caff8f..66f046d075 100644 --- a/guidelines/sc/21/reflow.html +++ b/guidelines/sc/21/reflow.html @@ -13,7 +13,7 @@

    Reflow

    Except for parts of the content which require two-dimensional layout for usage or meaning.

    -

    Note: 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.

    +

    320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which are designed to scroll horizontally (e.g. with vertical text), the 256 CSS pixels is equivalent to a starting viewport height of 1024px at 400% zoom.

    Examples of content which require two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while diff --git a/guidelines/terms/20/accessibility-supported.html b/guidelines/terms/20/accessibility-supported.html index 3bd0f873a5..1f42678035 100644 --- a/guidelines/terms/20/accessibility-supported.html +++ b/guidelines/terms/20/accessibility-supported.html @@ -80,7 +80,7 @@

    The WCAG Working group and the W3C do not specify which or how much support by assistive technologies there must be for a particular use of a Web technology in order for it - to be classified as accessibility supported. (See Level of Assistive Technology Support Needed for "Accessibility Support".) + to be classified as accessibility supported. (See Level of Assistive Technology Support Needed for "Accessibility Support".)

    Web technologies can be used in ways that are not accessibility supported as long @@ -100,7 +100,7 @@

    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 Understanding Accessibility-Supported Web Technology Uses.) Authors, companies, technology vendors, or others may document accessibility-supported + (See Understanding Accessibility-Supported Web Technology Uses.) Authors, companies, technology vendors, or others may document accessibility-supported 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. diff --git a/guidelines/terms/20/conforming-alternate-version.html b/guidelines/terms/20/conforming-alternate-version.html index 0ea3d68cc0..3fa931349c 100644 --- a/guidelines/terms/20/conforming-alternate-version.html +++ b/guidelines/terms/20/conforming-alternate-version.html @@ -64,6 +64,6 @@ the preferences is accessibility supported.

    -

    See Understanding Conforming Alternate Versions

    +

    See Understanding Conforming Alternate Versions

    diff --git a/guidelines/terms/20/keyboard-interface.html b/guidelines/terms/20/keyboard-interface.html index 010b09ee4a..85ca7f4975 100644 --- a/guidelines/terms/20/keyboard-interface.html +++ b/guidelines/terms/20/keyboard-interface.html @@ -3,16 +3,16 @@

    interface used by software to obtain keystroke input

    -

    A keyboard interface allows users to provide keystroke input to programs even if the - native technology does not contain a keyboard. -

    - -

    A touchscreen PDA has a keyboard interface built into its operating system as well - as a connector for external keyboards. Applications on the PDA can use the interface - to obtain keyboard input either from an external keyboard or from other applications - that provide simulated keyboard output, such as handwriting interpreters or speech-to-text - applications with "keyboard emulation" functionality. -

    +
    +

    A keyboard interface allows users to provide keystroke input to programs even if the + native technology does not contain a keyboard.

    + +

    A touchscreen PDA has a keyboard interface built into its operating system as well + as a connector for external keyboards. Applications on the PDA can use the interface + to obtain keyboard input either from an external keyboard or from other applications + that provide simulated keyboard output, such as handwriting interpreters or speech-to-text + applications with "keyboard emulation" functionality.

    +

    Operation of the application (or parts of the application) through a keyboard-operated mouse emulator, such as MouseKeys, does not qualify as operation through a keyboard diff --git a/guidelines/terms/20/technology.html b/guidelines/terms/20/technology.html index 00db123ea8..9edb054581 100644 --- a/guidelines/terms/20/technology.html +++ b/guidelines/terms/20/technology.html @@ -14,7 +14,7 @@ applications.

    -

    Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF, +

    Some common examples of Web content technologies include HTML, CSS, SVG, PNG, PDF, Flash, and JavaScript.

    diff --git a/lib/ant-contrib-0.6.jar b/lib/ant-contrib-0.6.jar new file mode 100644 index 0000000000..db90b0aae8 Binary files /dev/null and b/lib/ant-contrib-0.6.jar differ diff --git a/lib/saxon9he.jar b/lib/saxon9he.jar new file mode 100644 index 0000000000..6a4c045487 Binary files /dev/null and b/lib/saxon9he.jar differ diff --git a/requirements/index.html b/requirements/index.html index e118147e41..e9244c1ef5 100644 --- a/requirements/index.html +++ b/requirements/index.html @@ -33,7 +33,7 @@ license: "document", // if there a publicly available Editors Draft, this is the link - edDraftURI: "https://w3c.github.io/wcag21/requirements/", + edDraftURI: "https://w3c.github.io/wcag/requirements/", // if this is a LCWD, uncomment and set the end of its review period // lcEnd: "2012-02-21", diff --git a/script/wcag21.js b/script/wcag.js similarity index 100% rename from script/wcag21.js rename to script/wcag.js diff --git a/techniques/aria/ARIA1.html b/techniques/aria/ARIA1.html index 3728d334a6..e368cc6069 100644 --- a/techniques/aria/ARIA1.html +++ b/techniques/aria/ARIA1.html @@ -1,15 +1,15 @@ -Using the aria-describedby property to provide a descriptive label for user interface controls

    Using the aria-describedby property to provide a descriptive label for user interface controls

    ID: ARIA1

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    -

    The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

    -

    Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

    +Using the aria-describedby property to provide a descriptive label for user interface controls

    Using the aria-describedby property to provide a descriptive label for user interface controls

    ID: ARIA1

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    +

    The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element ids.

    +

    Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

    The aria-describedby property is not designed to reference descriptions on an external resource — since it is an ID, it must reference an element in the same DOM document.

    -

    Examples

    +

    Examples

    -

    Example 1: Using aria-describedby property to describe a Close button's action

    -

    Description

    +

    Using aria-describedby property to describe a Close button's action

    +

    A button that functions as a 'close' button on a dialog is described elsewhere in the document. The aria-describedby property is used to associate the description with the link.

    <button aria-label="Close" aria-describedby="descriptionClose"
     onclick="myDialog.close()">X</button>
@@ -19,13 +19,13 @@ 
    Example 1: Using aria-describedby property to describe a Close button's acti
 <div id="descriptionClose">Closing this window will discard any information entered and
 return you back to the main page</div>
    -

    Working example: Example 1 +

    Working example: Example 1

    -
    +
    -

    Example 2: Using aria-describedby to associate instructions with form fields

    -

    Description

    +

    Using aria-describedby to associate instructions with form fields

    +

    Sample form field using aria-describedby to associate instructions with form fields while there is a form label.

    <form>
 <label for="fname">First name</label>
@@ -33,11 +33,11 @@ 
    Example 2: Using aria-describedby to associate instructions with form fields
 <p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
 </form>
    -
    +
    -

    Example 3: Using aria-describedby property to provide more detailed information about the button

    -

    Description

    +

    Using aria-describedby property to provide more detailed information about the button

    + 
    <p><span id="fontDesc">Select the font faces and sizes to be used on this page</span>
  <button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">Fonts</button>
 </p>
@@ -48,11 +48,11 @@ 
    Example 3: Using aria-describedby property to provide more detailed informat
  <button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc">Customize</button>
 </p>
    -
    +
    -

    Example 4: Using aria-describedby to associate tooltips with form fields

    -

    Description

    +

    Using aria-describedby to associate tooltips with form fields

    +

    The following code snippet shows how to use aria-describedby and the onfocus="tooltipShow() function to display the tooltip when focus is placed on an element.

    <html lang="en-us">
 <head>
@@ -84,16 +84,16 @@ 
    Example 4: Using aria-describedby to associate tooltips with form fields
    
-
    +
    -

    Example 5: XHTML

    -

    Description

    +

    XHTML

    +

    This example is coded in XHTML with a MIME type of application/xhtml+xml. This MIME type is not supported in all user agents. The aria-describedby property is added directly into the XHTML markup, and no additional scripting is needed.

    -
    + 
    <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
-"http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
+"https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
@@ -129,12 +129,12 @@ 
    Example 5: XHTML
    -

    Example 6: HTML

    -

    Description

    +

    HTML

    +

    This example uses scripting to add an aria-describedby property to buttons on a page. The example creates a buttonIds array variable to hold the ids of the elements that contain description text. The setDescribedBy() function is called from the onload event of the window object.

    The setDescribedBy() function loops through all of the button elements and calls setAttribute() on each button element to set the aria-describedby property. Each button's aria-describedby property is set to the id of the element containing its descriptive text.

    Using a user agent and/or assistive technology which supports WAI-ARIA, the description will be provided when the user interface controls receive focus.

    -
    + 
    <html lang="en-us">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -206,7 +206,7 @@ 
    Example 6: HTML
    
 </body>
    -

    Tests

    +

    Tests

    Procedure

    1. Check that there is a user interface control having an aria-describedby attribute that references one or more elements via unique id.
      2. @@ -218,26 +218,26 @@

      Example 6: HTML

    2. Checks #1 and #2 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html index ac9aaebb87..a0e4267dc3 100644 --- a/techniques/aria/ARIA10.html +++ b/techniques/aria/ARIA10.html @@ -1,11 +1,11 @@ -Using aria-labelledby to provide a text alternative for non-text content

    Using aria-labelledby to provide a text alternative for non-text content

    ID: ARIA10

    Technology: aria

    Type: Technique

    When to Use

    -

    This technique applies to HTML with Accessible Rich Internet Applications (WAI-ARIA).

    -

    Description

    +Using aria-labelledby to provide a text alternative for non-text content

    Using aria-labelledby to provide a text alternative for non-text content

    ID: ARIA10

    Technology: aria

    Type: Technique

    When to Use

    +

    This technique applies to HTML with Accessible Rich Internet Applications (WAI-ARIA).

    +

    Description

    The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.

    -

    Examples

    +

    Examples

    -

    Example 1: Providing a short description for a complex graphic

    -

    Description

    +

    Providing a short description for a complex graphic

    +

    This example shows how to use the aria-labelledby attribute to provide a short text description for a read-only complex graphic of an star rating pattern; the graphic is composed of several image elements. The text alternative for the graphic is the label, visible on the page beneath the star pattern.

    <div role="img" aria-labelledby="star_id">
 <img src="fullstar.png" alt=""/>
@@ -16,11 +16,11 @@ 
    Example 1: Providing a short description for a complex graphic
    
 </div>
 
 <div id="star_id">4 of 5</div>
    -

    Working example: Providing a short description for a complex graphic. +

    Working example: Providing a short description for a complex graphic.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
      2. @@ -33,20 +33,20 @@

      Example 1: Providing a short description for a complex graphic

    2. #2 and #3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA11.html b/techniques/aria/ARIA11.html index 3cc6ce0efc..daa245b34d 100644 --- a/techniques/aria/ARIA11.html +++ b/techniques/aria/ARIA11.html @@ -1,6 +1,6 @@ -Using ARIA landmarks to identify regions of a page

    Using ARIA landmarks to identify regions of a page

    ID: ARIA11

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using ARIA landmarks to identify regions of a page

    Using ARIA landmarks to identify regions of a page

    ID: ARIA11

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

    They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page. For instance, if there is a common navigation menu found on every page, landmark roles (or "landmarks") can be used to skip over it and navigate from section to section. This will save assistive technology users and keyboard users the trouble and time of tabbing through a large amount of content to find what they are really after, much like a traditional "skip links" mechanism. (Refer to User Agent Notes above for specifics of AT support). A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark. @@ -33,10 +33,10 @@

    It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.

    -

    Examples

    +

    Examples

    -

    Example 1: Simple landmarks

    -

    Description

    +

    Simple landmarks

    +

    The following example shows how landmarks might be added to an HTML4 or XHTML 1.0 document:

    <div id="header" role="banner">A banner image and introductory title</div>
 <div id="sitelookup" role="search">....</div>
@@ -44,11 +44,11 @@ 
    Example 1: Simple landmarks
    
 <div id="content" role="main"> ... Ottawa is the capital of Canada ...</div>
 <div id="rightsideadvert" role="complementary">....an advertisement here...</div>
 <div id="footer" role="contentinfo">(c)The Freedom Company, 123 Freedom Way, Helpville, USA</div>
    -
    +
    -

    Example 2: Multiple landmarks of the same type and aria-labelledby

    -

    Description

    +

    Multiple landmarks of the same type and aria-labelledby

    +

    The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a Web page, each instance may have a unique label specified using aria-labelledby:

    @@ -58,32 +58,32 @@

    Example 2: Multiple landmarks of the same type and aria-labelledby

    <div id="rightnav" role="navigation" aria-labelledby="rightnavheading"> <h2 id="rightnavheading">Related topics</h2> <ul><li>...a list of links here ...</li></ul></div> -
    +
    -

    Example 3: Multiple landmarks of the same type and aria-label

    -

    Description

    +

    Multiple landmarks of the same type and aria-label

    +

    The following example shows a best practice of how landmarks might be added to an HTML4 or XHTML 1.0 document in situations where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.

    <div id="leftnav" role="navigaton" aria-label="Primary">
 <ul><li>...a list of links here ...</li></ul> </div>
 <div id="rightnav" role="navigation" aria-label="Secondary">
 <ul><li>...a list of links here ...</li> </ul></div>
    -
    +
    -

    Example 4: Search form

    -

    Description

    +

    Search form

    +

    The following example shows a search form with a "search" landmark. The search role typically goes on the form field or a div surrounding the search form.

    <form role="search">
 <label for="s6">search</label><input id="s6" type="text" size="20">
 ...
 </form>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

      -
    1. Examine each element with a landmark role. +
    2. Examine each element with a landmark role.
    3. Examine whether the landmark role attribute is applied to the section of the page that corresponds with that role. (i.e., the "navigation" role is applied to a navigation section, the "main" role is applied to where the main content begins.)
      4. @@ -94,20 +94,20 @@

      Example 4: Search form

    4. #1 and #2 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    • - WAI-ARIA Authoring Practices 1.1 + WAI-ARIA Authoring Practices 1.1
    • - Accessible Rich Internet Applications (WAI-ARIA) 1.0, Using WAI-ARIA Roles + Accessible Rich Internet Applications (WAI-ARIA) 1.0, Using WAI-ARIA Roles
    • - Accessible Rich Internet Applications (WAI-ARIA) 1.0, Supported States and Properties + Accessible Rich Internet Applications (WAI-ARIA) 1.0, Supported States and Properties
    • Enabling landmark-based keyboard navigation in Firefox diff --git a/techniques/aria/ARIA12.html b/techniques/aria/ARIA12.html index 4d2773805b..505fbb3e54 100644 --- a/techniques/aria/ARIA12.html +++ b/techniques/aria/ARIA12.html @@ -1,6 +1,6 @@ -Using role=heading to identify headings

      Using role=heading to identify headings

      ID: ARIA12

      Technology: aria

      Type: Technique

      When to Use

      -

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

      -

      Description

      +Using role=heading to identify headings

      Using role=heading to identify headings

      ID: ARIA12

      Technology: aria

      Type: Technique

      When to Use

      +

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

      +

      Description

      The purpose of this technique is to provide a way for Assistive Technologies (AT) to identify a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading. @@ -13,12 +13,12 @@ to use h1 rather than using <div role="heading" aria-level="1">. However, the use of the heading role, instead of heading mark-up, may be necessary. For example, when retrofitting a legacy site where scripts depend on the existing element hierarchy.

      -

      The use of the heading role and nesting levels is discussed in WAI-ARIA Authoring Practices 1.1. +

      The use of the heading role and nesting levels is discussed in WAI-ARIA Authoring Practices 1.1.

      -

      Examples

      +

      Examples

      -

      Example 1: Simple headings

      -

      Description

      +

      Simple headings

      +

      This example demonstrates how to implement simple headings using role="heading" when retrofitting a legacy site where scripts depend on the existing element hierarchy or the level is unknown. For example, web content which is syndicated from various sources may be constructed without knowledge of what the final presentation will be. 

      <div role="heading">Global News items</div>
@@ -26,11 +26,11 @@ 
      Example 1: Simple headings
      
 
 <div role="heading">Local News items</div>
 ... a list of local news, with editorial comment ...
      -
      +
      -

      Example 2: Additional heading levels

      -

      Description

      +

      Additional heading levels

      +

      This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.

      ...
 <h5>Fruit Trees</h5>
@@ -40,9 +40,9 @@ 
      Example 2: Additional heading levels
      
 ...
 <div role="heading" aria-level="7">Jonagold/div>
 <p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>
      -
      +
      -

      Tests

      +

      Tests

      Procedure

      1. Examine each element with the attribute role="heading". @@ -58,19 +58,19 @@

        Example 2: Additional heading levels

      2. #2 and #3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA13.html b/techniques/aria/ARIA13.html index 760fbc0cf7..b826afa0b5 100644 --- a/techniques/aria/ARIA13.html +++ b/techniques/aria/ARIA13.html @@ -1,27 +1,27 @@ -Using aria-labelledby to name regions and landmarks

    Using aria-labelledby to name regions and landmarks

    ID: ARIA13

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-labelledby to name regions and landmarks

    Using aria-labelledby to name regions and landmarks

    ID: ARIA13

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

    Landmark roles (or "landmarks") programmatically identify sections of a page. Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to various sections of a page.

    Like aria-describedby, aria-labelledby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.

    -

    Examples

    +

    Examples

    -

    Example 1: Identify a landmark with on-page text

    -

    Description

    +

    Identify a landmark with on-page text

    +

    Below is an example of aria-labelledby used on a complementary Landmark. The region of the document to which the heading pertains could be marked with the aria-labelledby property containing the value of the id for the header.

    <p role="complementary" aria-labelledby="hdr1">
  <h1 id="hdr1">
     Top News Stories
  </h1>
 </p>
    -
    +
    -

    Example 2: Identification for Application landmarks

    -

    Description

    +

    Identification for Application landmarks

    +

    The following code snippet for application landmarks with static prose. If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:

    <div role="application" aria-labelledby="p123" aria-describedby="info">
 <h1 id="p123">Calendar<h1>
@@ -31,12 +31,12 @@ 
    Example 2: Identification for Application landmarks
    
 <div role="grid">
 ....
 </div>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

      -
    1. Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present. +
    2. Examine each element with attribute role=region or with a landmark role, where an aria-labelledby attribute is also present.
    3. Check that the value of the aria-labelledby attribute is the id of an element on the page.
      4. @@ -49,7 +49,7 @@

      Example 2: Identification for Application landmarks

    4. #2 and #3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 2358fe71cb..d948ed9460 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -1,38 +1,38 @@ -Using aria-label to provide an invisible label where a visible label cannot be used

    Using aria-label to provide an invisible label where a visible label cannot be used

    ID: ARIA14

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-label to provide an invisible label where a visible label cannot be used

    Using aria-label to provide an invisible label where a visible label cannot be used

    ID: ARIA14

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div.

    In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

    In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.

    -

    Examples

    +

    Examples

    -

    Example 1: A close button (X) in a pop-up box

    -

    Description

    +

    A close button (X) in a pop-up box

    +

    On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'x'. The property aria-label="close" is used to provide an accessible name to the button. 

    <div id="box">
    This is a pop-up box.
    <button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button">X</button>				
 </div>
    -

    Working example: Close button example. +

    Working example: Close button example.

    -
    +
    -

    Example 2: A phone number with multiple fields

    -

    Description

    +

    A phone number with multiple fields

    + 
    <div role="group" aria-labelledby="groupLabel">
   <span id="groupLabel>Work Phone</span>
   +<input type="number" aria-label="country code">
   <input type="number" aria-label="area code">
   <input type="number" aria-label="subscriber number">
 </div>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For elements that use aria-label:

    @@ -46,17 +46,17 @@

    Example 2: A phone number with multiple fields

  • #1 is true.
    • -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA15.html b/techniques/aria/ARIA15.html index 91753e5d26..b2b38c4b4e 100644 --- a/techniques/aria/ARIA15.html +++ b/techniques/aria/ARIA15.html @@ -1,24 +1,24 @@ -Using aria-describedby to provide descriptions of images

    Using aria-describedby to provide descriptions of images

    ID: ARIA15

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-describedby to provide descriptions of images

    Using aria-describedby to provide descriptions of images

    ID: ARIA15

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The objective of this technique is to provide descriptions of images when a short text alternative does not adequately convey the function or information provided in the object.

    A feature of WAI-ARIA is the ability to associate descriptive text with a section, drawing, form element, picture, and so on using the aria-describedby property. This is similar to the longdesc attribute in that both are useful for providing additional information to help users understand complex images. Like longdesc, descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. Unlike longdesc, aria-describedby cannot reference descriptions outside of the page containing the image. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology. It is worth noting that as of the time of writing (October 2013) some assistive technologies read aria-describedby content immediately after an image's alt attribute information without user activation - whereas most implementations of longdesc require the user to take explicit action to read the additional description.

    Like aria-labelledby, aria-describedby can accept multiple ids to point to other regions of the page using a space separated list. It is also limited to ids for defining these sets.

    -

    Examples

    +

    Examples

    -

    Example 1: Describing an image

    -

    Description

    +

    Describing an image

    +

    The following example shows how aria-describedby can be applied to an image to provide a long description, where that text description is on the same page as the image. 

    <img src="ladymacbeth.jpg" alt="Lady MacBeth" aria-describedby="p1">
 <p id="p1">This painting dates back to 1730 and is oil on canvas. It was created by 
 Jean-Guy Millome, and represents ...</p>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine each image element where a aria-describedby attribute is present. @@ -34,19 +34,19 @@

      Example 1: Describing an image

    2. #1, #2, and #3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA16.html b/techniques/aria/ARIA16.html index d633a1a85f..ea622dfd81 100644 --- a/techniques/aria/ARIA16.html +++ b/techniques/aria/ARIA16.html @@ -1,6 +1,6 @@ -Using aria-labelledby to provide a name for user interface controls

    Using aria-labelledby to provide a name for user interface controls

    ID: ARIA16

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-labelledby to provide a name for user interface controls

    Using aria-labelledby to provide a name for user interface controls

    ID: ARIA16

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The purpose of this technique is to provide names for user interface controls that can be read by assistive technology. WAI-ARIA provides a way to associate text with a section, drawing, form element, picture, and so on, using the aria-labelledby property. This techniques uses the aria-labelledby attribute to associate a user interface control, such as a form field, with text on the page that labels it.

    Like aria-describedby, aria-labelledby can accept multiple ids to point to other elements of the page using a space separated list. This capability makes aria-labelledby especially useful in situations where sighted users use information from the surrounding context to identify a control. Using aria-labelledby to concatenate a label from several text nodes contains more examples of situations where names are created from several other text elements on the page. @@ -17,26 +17,26 @@

    Note that as of December 2013, label has better support than aria-labelledby, especially in older browsers and assistive technologies.

    -

    Examples

    +

    Examples

    -

    Example 1: Labelling a simple text field

    -

    Description

    +

    Labelling a simple text field

    +

    The following is an example of aria-labelledby used on a simple text field to provide a label in a situation where there is no text available for a dedicated label but there is other text on the page that can be used to accurately label the control.

    <input name="searchtxt" type="text" aria-labelledby="searchbtn">
 <input name="searchbtn" id="searchbtn" type="submit" value="Search">
    -
    +
    -

    Example 2: Labelling a slider

    -

    Description

    +

    Labelling a slider

    +

    Below is an example of aria-labelledby used to provide a label for a slider control. In this case the label text is selected from within a longer adjacent text string. Please note that this example is simplified to show only the labeling relationship; authors implementing custom controls also need to ensure that controls meet other success criteria.

    <p>Please select the <span id="mysldr-lbl">number of days for your trip</span></p>
 <div id="mysldr" role="slider" aria-labelledby="mysldr-lbl"></div>
    -
    +
    -

    Example 3: A label from multiple sources

    -

    Description

    +

    A label from multiple sources

    +

    The following example of aria-labelledby with multiple references uses the label element. For additional detail on concatenating multiple sources of information into a label with aria-labelledby, please view the technique Using ARIA labelledby to concatenate a label from several text nodes. 

    <label id="l1" for="f3">Notify me</label>
@@ -47,9 +47,9 @@ 
    Example 3: A label from multiple sources
    
 <span id="l2" tabindex="-1">days in advance</span>

    Note: The use of the label element is included for a number of reasons. If the user clicks on the text of the label element, the corresponding form field will receive focus, which makes the clicking target larger for people with dexterity problems. Also the label element will always be exposed via the accessibility API. A span could have been used (but if so, it should receive a tabindex="-1" so that it will be exposed via the accessibility API in all versions of Internet Explorer). However, a span would lose the advantage of the larger clickable region.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For each user interface control element where an aria-labelledby attribute is present:

    @@ -65,7 +65,7 @@

    Example 3: A label from multiple sources

  • #1 and #2 are true.
    • -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA17.html b/techniques/aria/ARIA17.html index 329fc866dc..ffaa7ab550 100644 --- a/techniques/aria/ARIA17.html +++ b/techniques/aria/ARIA17.html @@ -1,14 +1,14 @@ -Using grouping roles to identify related form controls

    Using grouping roles to identify related form controls

    ID: ARIA17

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using grouping roles to identify related form controls

    Using grouping roles to identify related form controls

    ID: ARIA17

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The objective of this technique is to mark up a set of related controls within a form as a group. Any label associated with the group also serves as a common label or qualifier for individual controls in the group. Assistive technologies can indicate the start and end of the group and the group’s label as one navigates into and out of the group. This is a viable alternative for grouping form controls programmatically when the user interface’s design makes it difficult to employ the fieldset-legend technique (H71).

    For a group of radio buttons, one could also use role="radiogroup" instead of role="group".

    The group can be labeled using aria-labelledby.

    This technique is not meant for wrapping all controls on a form within a single container with role="group".

    -

    Examples

    +

    Examples

    -

    Example 1: Social Security Number

    -

    Description

    +

    Social Security Number

    +

    Social security number fields which are 9 digits long and broken up into 3 segments can be grouped using role="group".

    <div role="group" aria-labelledby="ssn1">
    <span id="ssn1">Social Security#</span> 
@@ -17,12 +17,12 @@ 
    Example 1: Social Security Number
    
    <input size="2" type="text" aria-required="true" title="Next 2 digits" />-
    <input size="4" type="text" aria-required="true" title="Last 4 digits" />
 </div>
    -

    Working example: Multiple part field groups.

    -
    +

    Working example: Multiple part field groups.

    +
    -

    Example 2: Identifying radio groups

    -

    Description

    +

    Identifying radio groups

    +

    This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. (But the script to make the span actually work like radio buttons is not included in this example. ) One may optionally employ CSS to place a border around groups of such fields to visually reinforce the group relationship. The CSS properties are available below the form.

    <h3>Set Alerts for your Account</h3>
   <div role="radiogroup" aria-labelledby="alert1">
@@ -52,10 +52,10 @@ 
    Example 2: Identifying radio groups
    
             
    div[role=radiogroup] {
   border: black thin solid;
 } 
    
-            
    Working example: using grouping roles to identify related form controls.
    
-
    +

    Working example: using grouping roles to identify related form controls.

    +
    -

    Tests

    +

    Tests

    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:

    @@ -71,13 +71,13 @@

    Example 2: Identifying radio groups

  • #1 and #2 are true.
    • -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA18.html b/techniques/aria/ARIA18.html index 18add5a4cd..75897b4f79 100644 --- a/techniques/aria/ARIA18.html +++ b/techniques/aria/ARIA18.html @@ -1,6 +1,6 @@ -Using aria-alertdialog to Identify Errors

    Using aria-alertdialog to Identify Errors

    ID: ARIA18

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-alertdialog to Identify Errors

    Using aria-alertdialog to Identify Errors

    ID: ARIA18

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The purpose of this technique is to alert people that an input error has occured. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:

      @@ -19,10 +19,10 @@

    Note that the alertdialog should not be present in a way that it will be accessed by AT until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.

    -

    Examples

    +

    Examples

    -

    Example 1: Alert dialog

    -

    Description

    +

    Alert dialog

    +

    This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.

    <div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
 <h1 id="alertHeading">Error</h1>
@@ -30,10 +30,10 @@ 
    Example 1: Alert dialog
    
 <button>Save and Continue</button>
 <button>Return to page and correct error</button>
 </div>
    -

    Working example: Alert dialog.

    -
    +

    Working example: Alert dialog.

    +
    -

    Tests

    +

    Tests

    Procedure

    1. Trigger the error that causes the alertdialog to appear. @@ -57,11 +57,11 @@

      Example 1: Alert dialog

    2. Checks 2, 3, 5 and 6 are true. For SC 3.3.3, Check 7 is also true.
    -

    Related Techniques

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA19.html b/techniques/aria/ARIA19.html index d321b1230a..be165b9ed3 100644 --- a/techniques/aria/ARIA19.html +++ b/techniques/aria/ARIA19.html @@ -1,13 +1,13 @@ -Using ARIA role=alert or Live Regions to Identify Errors

    Using ARIA role=alert or Live Regions to Identify Errors

    ID: ARIA19

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using ARIA role=alert or Live Regions to Identify Errors

    Using ARIA role=alert or Live Regions to Identify Errors

    ID: ARIA19

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.

    -

    There are also a number of special case live region roles which can be used instead of applying live region properties directly.

    -

    Examples

    +

    There are also a number of special case live region roles which can be used instead of applying live region properties directly.

    +

    Examples

    -

    Example 1: Injecting error messages into a container with role=alert already present in the DOM

    -

    Description

    +

    Injecting error messages into a container with role=alert already present in the DOM

    +

    The following example uses role=alert which is equivalent to using aria-live=assertive.

    In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission. @@ -51,10 +51,10 @@

    Example 1: Injecting error messages into a container with role=alert already <input type="submit" name="button" id="button" value="Submit"> </p> </form> -

    Working example: Using role=alert to identify errors.

    -

    +

    Working example: Using role=alert to identify errors.

    +
    -

    Tests

    +

    Tests

    Procedure

    1. Determine that an empty error container role=alert or aria-live=assertive attribute is present in the DOM at page load.
      2. @@ -69,11 +69,11 @@

      Example 1: Injecting error messages into a container with role=alert already
    2. #1 and #3 are true.

    -

    Related Techniques

    Resources

    +

    Resources

    • - WAI-ARIA Authoring Practices 1.1 + WAI-ARIA Authoring Practices 1.1
    • HTML5 Accessibility Chops: ARIA role=alert browser support diff --git a/techniques/aria/ARIA2.html b/techniques/aria/ARIA2.html index d79dbc863d..f9d8c533d2 100644 --- a/techniques/aria/ARIA2.html +++ b/techniques/aria/ARIA2.html @@ -1,17 +1,17 @@ -Identifying a required field with the aria-required property

      Identifying a required field with the aria-required property

      ID: ARIA2

      Technology: aria

      Type: Technique

      When to Use

      -

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

      -

      Description

      +Identifying a required field with the aria-required property

      Identifying a required field with the aria-required property

      ID: ARIA2

      Technology: aria

      Type: Technique

      When to Use

      +

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

      +

      Description

      The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.

      The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.

      The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of true or false. For example, if a user must fill in an address field, then aria-required is set to true.

      Note: Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.

      -

      The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

      +

      The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

      -

      Examples

      +

      Examples

      -

      Example 1:

      -

      Description

      +

      +

      The required property is indicated by an asterisk placed next to the label element:

       <form action="#" method="post"  id="login1" onsubmit="return errorCheck1()">
@@ -29,11 +29,11 @@ 
      Example 1: 
      
   </p>
 
 </form>
      -
      +
      -

      Example 2:

      -

      Description

      +

      +

      The required property is indicated by the word "required" placed next to the label element:

       <form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
@@ -65,11 +65,11 @@ 
      Example 2: 
      
     <input type="submit" value="Next Step" id="step_btn" name="step_btn" />
   </p>
 </form>
      -
      +
      -

      Example 3:

      -

      Description

      +

      +

      Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before. This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form. 

      @@ -95,18 +95,18 @@ 
      Example 3: 
      
   content: url('/iconStar.gif');
 }
      -
      +
      -

      Example 4: A required text input field in XHTML

      -

      Description

      +

      A required text input field in XHTML

      +

      The following example shows an XHTML document using the aria-required property to indicate that a form field must be submitted. The mandatory nature of the field is also indicated in the label as a fallback for user agents that do not support WAI-ARIA.

      -
      + 
       <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
     For Accessible Adaptable Applications//EN"
-  "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
+  "https://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
           xml:lang="en">
   <head>
@@ -130,13 +130,13 @@ 
      Example 4: A required text input field in XHTML
      -

      Example 5: Adding aria-required property via script

      -

      Description

      +

      Adding aria-required property via script

      +

      This example uses scripting to add the aria-required property to a form element. The required property is assigned using the setAttribute() API.

      The array variable, requiredIds, is created with the ids of the elements which need to be marked as required. The setRequired() function is called from the onload event of the window object.

      The setRequired() function loops through all of the ids provided, retrieves the element and assigns the aria-required property of true using the setAttribute() function.

      When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader will speak "required" when reading the label for the input fields.

      -
      + 
      <head>
  <script type="text/javascript">
  //<![CDATA[
@@ -173,7 +173,7 @@ 
      Example 5: Adding aria-required property via script
      
  </body>
      -

      Tests

      +

      Tests

      Procedure

      For each control which is shown via presentation to be required.

        @@ -186,14 +186,14 @@

        Example 5: Adding aria-required property via script

      1. Checks #1 and #2 are true
    -

    Resources

    +

    Resources

    • - WAI-ARIA Overview + WAI-ARIA Overview
    • - WAI-ARIA Authoring Practices 1.1 + WAI-ARIA Authoring Practices 1.1
    • Aria-required=true: WCAG 2 Compliance versus Best Practice diff --git a/techniques/aria/ARIA20.html b/techniques/aria/ARIA20.html index 5c62cece4f..22f30af9c3 100644 --- a/techniques/aria/ARIA20.html +++ b/techniques/aria/ARIA20.html @@ -1,12 +1,12 @@ -Using the region role to identify a region of the page

      Using the region role to identify a region of the page

      ID: ARIA20

      Technology: aria

      Type: Technique

      When to Use

      -

      Technologies that support Accessible Rich Internet Applications.

      -

      Description

      -

      This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).

      +Using the region role to identify a region of the page

      Using the region role to identify a region of the page

      ID: ARIA20

      Technology: aria

      Type: Technique

      When to Use

      +

      Technologies that support Accessible Rich Internet Applications.

      +

      Description

      +

      This technique demonstrates how to assign a generic region role to a section of a page so that user agents and assistive technologies may be able to programmatically identify it. The region role demarcates a segment of the page that contains content of significance so that it is more readily discoverable and navigable. The generic region should be used when the section cannot be marked up using a standard document landmark role (see ARIA11).

      It is important to name regions, because they are generic grouping elements and users will need some way to tell which region they are in. Regions can be named using aria-labelledby, aria-label, or another technique. Doing so helps to better expose content and information relationships on the page. The role of region should be used prudently, because if overused they can make the page overly verbose for screen reader users.

      -

      Examples

      +

      Examples

      -

      Example 1: Region on a news website

      -

      Description

      +

      Region on a news website

      +

      A section on the home page of a news website that contains a poll that changes every week is marked up with role="region". The h3 text above the form is referenced as the region's name using aria-labelledby.

       <div role="region" aria-labelledby="pollhead">
@@ -28,11 +28,11 @@ 
      Example 1: Region on a news website
      
 </div>
      -
      +
      -

      Example 2: Identifying a region on a banking site

      -

      Description

      +

      Identifying a region on a banking site

      +

      A user can expand links on a bank website after logging in to see details of term deposit accounts. The details are within a span marked up with region role. The heading for the region has role=heading and is included in the aria-labelledby that names the region.

       <ol>
@@ -50,20 +50,20 @@ 
      Example 2: Identifying a region on a banking site
      
  </ol>
      -
      +
      -

      Example 3: Identifying a portlet with a generic region

      -

      Description

      +

      Identifying a portlet with a generic region

      +

      This example shows how a generic region landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

      -
      + 
       <div role="region" aria-label="weather portlet"> 
 	...
 </div>
      -

      Tests

      +

      Tests

      Procedure

      For each section marked up with role="region":

        @@ -77,15 +77,15 @@

        Example 3: Identifying a portlet with a generic region

      1. Checks #1-3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html index ec233aaea3..5e94464ce4 100644 --- a/techniques/aria/ARIA21.html +++ b/techniques/aria/ARIA21.html @@ -1,6 +1,6 @@ -Using Aria-Invalid to Indicate An Error Field

    Using Aria-Invalid to Indicate An Error Field

    ID: ARIA21

    Technology: aria

    Type: Technique

    When to Use

    -

    HTML with Accessible Rich Internet Applications.

    -

    Description

    +Using Aria-Invalid to Indicate An Error Field

    Using Aria-Invalid to Indicate An Error Field

    ID: ARIA21

    Technology: aria

    Type: Technique

    When to Use

    +

    HTML with Accessible Rich Internet Applications.

    +

    Description

    This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:

    • The error description does not programmatically identify the failed fields
      • @@ -10,10 +10,10 @@

      While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces “invalid data” when the field gets focus; JAWS and NVDA notify the error as an “invalid entry”.

      This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting aria-invalid to “false” is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.

      When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.

      -

    Examples

    +

    Examples

    -

    Example 1: Using aria-invalid on required fields

    -

    Description

    +

    Using aria-invalid on required fields

    +

    The aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.

    A portion of the jQuery code and the HTML form markup follow:

    @@ -59,12 +59,12 @@ 
    Example 1: Using aria-invalid on required fields
    
   </p>
 </form>
 </code>
    -

    Live example.

    -
    +

    Working example: Using aria-invalid on required fields.

    +
    -

    Example 2: Identifying errors in data format

    -

    Description

    +

    Identifying errors in data format

    +

    Aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.

    Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is:

    @@ -100,10 +100,10 @@ 
    Example 2: Identifying errors in data format
    
 	background-repeat:no-repeat; 	background-position:right;	
 }
    -

    Live example.

    -
    +

    Working example: Identifying errors in data format.

    +
    -

    Tests

    +

    Tests

    Procedure

    For each form control that relies on aria-invalid to convey a validation failure:

      @@ -117,18 +117,18 @@

      Example 2: Identifying errors in data format

    1. Checks #1-3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    • - Supported States and Properties: WAI-ARIA 1.1 + Supported States and Properties: WAI-ARIA 1.1
    • Using Aria-invalid for Error Indication diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html new file mode 100644 index 0000000000..175b8394f8 --- /dev/null +++ b/techniques/aria/ARIA22.html @@ -0,0 +1,72 @@ + + + + + + + +

      Using role=status to present status messages

      +
      +

      Metadata

      +

      ID: W##

      +

      Technology: ARIA

      +

      Type: Technique

      +
      +
      +

      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 1.1 status (role) for more details. + +

      + +
      +
      +

      Examples

      +
      +

      Including a search results message

      +

      After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "Five results returned".

      +
      +
+	<div role="status">5 results returned.</div>
+
+
      +

      Working example: role=status on search results

      +
      +
      +

      Updating the shopping cart status

      +

      After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with the role of status. Because it adds visual context, the shopping cart image -- with succinct and accurate ALT text -- is also placed in the container. Due to the default aria-atomic value, a screen reader will announce "Shopping cart, six items".

      +
      +
+	<p role="status" >
+		<img src="shopping-cart.png" alt="Shopping Cart">
+		<br>
+		<span id="cart">0</span> items
+	</p>
+
+
      +

      Working example: role=status on a shopping cart

      +
      +
      +
      +

      Tests

      +
      +

      Procedure

      +

      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. +
      2. Check that when the status message is triggered, it is inside the container.
        3. +
      3. Check that elements or attributes that provide information equivalent to the visual experience for the status message (such as a shopping cart image with proper ALT text) also reside in the container.
        4. +
      +
      +
      +

      Expected Results

      +
        +
      • #1, #2 and #3 are true.
        • +
      +
      +
      + + diff --git a/techniques/aria/ARIA4.html b/techniques/aria/ARIA4.html index 588c1e3c15..9c569a697a 100644 --- a/techniques/aria/ARIA4.html +++ b/techniques/aria/ARIA4.html @@ -1,11 +1,11 @@ -Using a WAI-ARIA role to expose the role of a user interface component

      Using a WAI-ARIA role to expose the role of a user interface component

      ID: ARIA4

      Technology: aria

      Type: Technique

      When to Use

      -

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

      -

      Description

      -

      The objective of this technique is to define the role of an element using the role attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.

      -

      Examples

      +Using a WAI-ARIA role to expose the role of a user interface component

      Using a WAI-ARIA role to expose the role of a user interface component

      ID: ARIA4

      Technology: aria

      Type: Technique

      When to Use

      +

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

      +

      Description

      +

      The objective of this technique is to define the role of an element using the role attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.

      +

      Examples

      -

      Example 1: A simple toolbar

      -

      Description

      +

      A simple toolbar

      +

      The WAI-ARIA Authoring Practices document demonstrates a toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:

           <div role="toolbar"
@@ -38,11 +38,11 @@ 
      Example 1: A simple toolbar
      
  </div>

      The Authoring Practices Toolbar Pattern provides a working example of a toolbar..

      -
      +
      -

      Example 2: A Tree Widget

      -

      Description

      +

      A Tree Widget

      +

      The WAI-ARIA Authoring Practices demonstrates a tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:

       <ul role="tree" tabindex="0">
@@ -81,9 +81,9 @@ 
      Example 2: A Tree Widget
      
 </ul>

      The Authoring Practices Tree View Pattern provides a working example of a tree.

      -
      +
      -

      Tests

      +

      Tests

      Procedure

      For a user interface component using the role attribute:

        @@ -96,14 +96,14 @@

        Example 2: A Tree Widget

      1. #1 and #2 are true.
    -

    Related Techniques

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA5.html b/techniques/aria/ARIA5.html index bc8bfc69b0..56d4e236a6 100644 --- a/techniques/aria/ARIA5.html +++ b/techniques/aria/ARIA5.html @@ -1,11 +1,11 @@ -Using WAI-ARIA state and property attributes to expose the state of a user interface component

    Using WAI-ARIA state and property attributes to expose the state of a user interface component

    ID: ARIA5

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    -

    The objective of this technique is to use WAI-ARIA state and property attributes to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.

    -

    Examples

    +Using WAI-ARIA state and property attributes to expose the state of a user interface component

    Using WAI-ARIA state and property attributes to expose the state of a user interface component

    ID: ARIA5

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    +

    The objective of this technique is to use WAI-ARIA state and property attributes to expose the state, properties and values of a user interface component so that they can be read and set by assistive technology, and so that assistive technology is notified of changes to these values. The WAI-ARIA specification provides a normative description of each attribute, and the role of the user interface elements that they support. When rich internet applications define new user interface widgets, exposing the state and property attributes enables users to understand the widget and how to interact with it.

    +

    Examples

    -

    Example 1: A toggle button

    -

    Description

    +

    A toggle button

    +

    A widget with role button acts as a toggle button when it implements the attribute aria-pressed. When aria-pressed is true, the button is in a "pressed" state. When aria-pressed is false, it is not pressed. If the attribute is not present, the button is a simple command button.

    The following snippet from The Open Ajax Accessibility Examples, Example 38, shows WAI-ARIA mark-up for a toggle button that selects bold text:

    @@ -40,11 +40,11 @@ 
    Example 1: A toggle button
    
   }

    This button is available as part of the working example of Example 38 - Toolbar using inline images for visual state, on the OpenAjax Alliance site.

    -
    +
    -

    Example 2: A slider

    -

    Description

    +

    A slider

    +

    A widget with role slider lets a user select a value from within a given range. The slider represents the current value and the range of possible values via the size of the slider and the position of the handle. These properties of the slider are represented by the attributes aria-valuemin, aria-valuemax, and aria-valuenow.

    The following snippet from The Open Ajax Accessibility Examples, Example 32, shows WAI-ARIA mark-up for a slider created in Javascript. Note that the javascript sets the attributes aria-valuemin, aria-valuemax, and aria-valuenow:

       var handle = '<img id="' + id + '" class="' + (this.vert == true ? 'v':'h') +'sliderHandle" ' +
@@ -63,12 +63,12 @@ 
    Example 2: A slider
    
   }

    This slider is available as part of the working example of Example 32 - Slider, on the OpenAjax Alliance site.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    - The WAI-ARIA specification, Section 5.3, Categorization of Roles defines the required and inherited states and properties for each role.

    + The WAI-ARIA specification, Section 5.3, Categorization of Roles defines the required and inherited states and properties for each role.

    For a user interface component using the WAI-ARIA role attribute:

    1. Check that the required states and properties for the role are present.
      2. @@ -81,29 +81,29 @@

      Example 2: A slider

    2. #1, #2, and #3 are true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA6.html b/techniques/aria/ARIA6.html index 836ac22c75..2feaa49a69 100644 --- a/techniques/aria/ARIA6.html +++ b/techniques/aria/ARIA6.html @@ -1,34 +1,34 @@ -Using aria-label to provide labels for objects

    Using aria-label to provide labels for objects

    ID: ARIA6

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-label to provide labels for objects

    Using aria-label to provide labels for objects

    ID: ARIA6

    Technology: aria

    Type: Technique

    When to Use

    +

    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.

    -

    Examples

    +

    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.

    +

    Examples

    -

    Example 1: Distinguishing navigation landmarks

    -

    Description

    +

    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.

    <div role="navigation" aria-label="Primary">
 <ul><li>...a list of links here ...</li></ul> </div>
 <div role="navigation" aria-label="Secondary">
 <ul><li>...a list of links here ...</li> </ul></div>
    -
    +
    -

    Example 2: Identifying region landmarks

    -

    Description

    +

    Identifying region landmarks

    +

    The following example shows how a generic "region" landmark might be added to a weather portlet. There is no existing text on the page that can be referenced as the label, so it is labelled with aria-label.

    <div role="region" aria-label="weather portlet"> 
 ...
 </div>
    -
    +
    -

    Example 3: Providing a label for Math

    -

    Description

    +

    Providing a label for Math

    +

    Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering:

    <div role="math" aria-label="6 divided by 4 equals 1.5">
-  <math xmlns="http://www.w3.org/1998/Math/MathML">
+  <math xmlns="https://www.w3.org/1998/Math/MathML">
     <mfrac>
       <mn>6</mn>
       <mn>4</mn>
@@ -37,9 +37,9 @@ 
    Example 3: Providing a label for Math
    
     <mn>1.5</mn>
   </math>
 </div>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For each element where a aria-label attribute is present.

      @@ -51,17 +51,17 @@

      Example 3: Providing a label for Math

    1. #1 is true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA7.html b/techniques/aria/ARIA7.html index 4fa2588b31..322d6704dd 100644 --- a/techniques/aria/ARIA7.html +++ b/techniques/aria/ARIA7.html @@ -1,36 +1,36 @@ -Using aria-labelledby for link purpose

    Using aria-labelledby for link purpose

    ID: ARIA7

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-labelledby for link purpose

    Using aria-labelledby for link purpose

    ID: ARIA7

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    With the aria-labelledby attribute, authors can use a visible text element on the page as a label for a focusable element (a form control or a link). For example, a "read more..." link could be associated with the text of the heading of the preceding section to make the purpose of the link unambiguous (see example 1).

    When associating text to a focusable element with the help of aria-labelledby, the target text element is given an ID which is referenced in the value of the aria-labelledby attribute of the focusable element.

    It is also possible to use several text elements on the page as a label for a focusable element. Each of the text elements used must be given a unique ID which is referenced as a string of IDs (IDREF) in the value of the aria-labelledby attribute. The label text should then be concatenated following the order of IDs in the value of the aria-labelledby attribute.

    When applied on links, aria-labelledby can be used to identify the purpose of a link that may be readily apparent for sighted users, but less obvious for screen reader users.

    The specified behavior of aria-labelledby is that the associated label text is announced instead of the link text (not in addition to the link text). When the link text itself should be included in the label text, the ID of the link should be referenced as well in the string of IDs forming the value of the aria-labelledby attribute.

    -

    For more information on the naming hierarchy please consult the ARIA specification and the accessible name and description calculation for links in the HTML to Platform Accessibility APIs Implementation Guide.

    -

    Examples

    +

    For more information on the naming hierarchy please consult the ARIA specification and the accessible name and description calculation for links in the HTML to Platform Accessibility APIs Implementation Guide.

    +

    Examples

    -

    Example 1: Providing additional information for links

    -

    Description

    +

    Providing additional information for links

    +

    This example will mean that the link text as shown on screen is then used as the start of the accessible name for the link. Popular screen readers like JAWS and NVDA will announce this as: "Read more ...Storms hit east coast" and will display that same text in the links list which is very useful for screen reader users who may browse by links.

    <h2 id="headline">Storms hit east coast</h2>
 
 <p>Torrential rain and gale force winds have struck the east coast, causing flooding in many coastal towns.
 <a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a></p>
    -
    +
    -

    Example 2: Concatenating link text from multiple sources

    -

    Description

    +

    Concatenating link text from multiple sources

    +

    There may be cases where an author will placed a tag around a section of code that will be referenced.

    Note: The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. For more details see Accessible HTML Elements.

    <p>Download <span id="report-title" tabindex="-1">2012 Sales Report</span>:
 <a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
 <a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
 <a aria-labelledby="report-title ppt" href="#" id="ppt">Powerpoint</a></p>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For each link that has an aria-labelledby attribute:

      @@ -43,11 +43,11 @@

      Example 2: Concatenating link text from multiple sources

    1. Checks #1 and #2 are true.
    -

    Related Techniques

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA8.html b/techniques/aria/ARIA8.html index 608fdc62f3..6c133849c3 100644 --- a/techniques/aria/ARIA8.html +++ b/techniques/aria/ARIA8.html @@ -1,12 +1,12 @@ -Using aria-label for link purpose

    Using aria-label for link purpose

    ID: ARIA8

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-label for link purpose

    Using aria-label for link purpose

    ID: ARIA8

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    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 WAI-ARIA specification 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 AT. 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

    +

    Per the WAI-ARIA specification 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 AT. 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

    -

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

    -

    Description

    +

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

    +

    In some situations, designers may choose to lessen the visual appearance of links on a page by using shorter, repeated link text such as "read more". These situations provide a good use case for aria-label in that the simpler, non-descriptive "read more" text on the page can be replaced with a more descriptive label of the link. The words 'read more' are repeated in the aria-label (which replaces the original anchor text of "[Read more...]") to allow consistent communication between users.

     <h4>Neighborhood News</h4>
  <p>Seminole tax hike:  Seminole city managers are proposing a 75% increase in 
@@ -18,9 +18,9 @@ 
    Example 1: Describing the purpose of a link in HTML using aria-label.
    
  old Willy "Dusty" Williams in yesterday's mayoral election.
  <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">[Read more...]</a>
  </p>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For link elements that use aria-label:

      @@ -32,20 +32,20 @@

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

    1. #1 is true.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/aria/ARIA9.html b/techniques/aria/ARIA9.html index 9f0b2f1848..c5c17c3ec3 100644 --- a/techniques/aria/ARIA9.html +++ b/techniques/aria/ARIA9.html @@ -1,20 +1,20 @@ -Using aria-labelledby to concatenate a label from several text nodes

    Using aria-labelledby to concatenate a label from several text nodes

    ID: ARIA9

    Technology: aria

    Type: Technique

    When to Use

    -

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

    -

    Description

    +Using aria-labelledby to concatenate a label from several text nodes

    Using aria-labelledby to concatenate a label from several text nodes

    ID: ARIA9

    Technology: aria

    Type: Technique

    When to Use

    +

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

    +

    Description

    The aria-labelledby property can be used to label all visual objects. Applied to inputs, the aria-labelledby property can be used to label native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".

    One particular use of aria-labelledby is for text inputs in situations where a meaningful label should consist of more than one label string.

    Authors assign unique ids to the label strings to be concatenated as the label for the input element. The value of the aria-labelledby attribute is then a space-separated list of all ids in the order in which the label strings referenced should be read by screen readers. Supporting user agents will concatenate the label strings referenced and read them as one continuous label of the input.

    The concatenation of label strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the 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 label 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 label for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into labels for the text input elements inside the table.

    -

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

    -

    Examples

    +

    Examples

    -

    Example 1: A time-out input field with concatenated label

    -

    Description

    +

    A time-out input field with concatenated label

    +

    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 label 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 label 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 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 label for the text input

    The use of tabindex="-1" on the span element is not meant to support focusing by scripts - here, it merely serves to ensure that some browsers (IE9, IE10) will include the span element in the accessibility tree, thus making it available for reference by aria-labelledby. For more details see Accessible HTML Elements @@ -26,12 +26,12 @@

    Example 1: A time-out input field with concatenated label

    aria-labelledby="timeout-label timeout-duration timeout-unit"> <span id="timeout-unit" tabindex="-1"> minutes</span></p> </form> -

    Working example, Time-out input field with concatenated label, adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe.

    -
    +

    Working example, Time-out input field with concatenated label, adapted from Easy ARIA tip #2: aria-labelledby and aria-describedby, an example put together by Marco Zehe.

    +
    -

    Example 2: A simple data table with text inputs

    -

    Description

    +

    A simple data table with text inputs

    +

    A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.

    <table>
 	<tr>
@@ -52,12 +52,12 @@ 
    Example 2: A simple data table with text inputs
    
 		<td><input type="text" size="20" aria-labelledby="sp div" /></td>
 	</tr>
 </table>
    -

    Working example, Using aria-labelledby for simple table with text inputs, based on an example by Jim Thatcher.

    -
    +

    Working example, Using aria-labelledby for simple table with text inputs, based on an example by Jim Thatcher.

    +
    -

    Example 3: A conference workshop booking table

    -

    Description

    +

    A conference workshop booking table

    +

    A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated label for the checkboxes via aria-labelledby.

    Some browser / screen reader combinations (e.g. Mozilla Firefox and NVDA) will in addition speak the relevant table cell headers.

    <h1>Dinosaur Conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>
@@ -141,10 +141,10 @@ 
    Example 3: A conference workshop booking table
    
 </tr>
 </tbody>
 </table>
    -

    Working example: Conference workshop booking timetable.

    -
    +

    Working example: Conference workshop booking timetable.

    +
    -

    Tests

    +

    Tests

    Procedure

    For inputs that use aria-labelledby:

      @@ -160,20 +160,20 @@

      Example 3: A conference workshop booking table

    -

    Related Techniques

    +

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/client-side-script/SCR1.html b/techniques/client-side-script/SCR1.html index 54cf813a5e..97af024b9f 100644 --- a/techniques/client-side-script/SCR1.html +++ b/techniques/client-side-script/SCR1.html @@ -1,12 +1,12 @@ -Allowing the user to extend the default time limit -

    Allowing the user to extend the default time limit -

    ID: SCR1

    Technology: client-side-script

    Type: Technique

    When to Use

    +Allowing the user to extend the default time limit +

    Allowing the user to extend the default time limit +

    ID: SCR1

    Technology: client-side-script

    Type: Technique

    When to Use

    Time limits that are controlled by client-side scripting.

    -

    Description

    +

    Description

    The objective of this technique is to allow user to extend the default time limit by providing a mechanism to extend the time when scripts provide functionality that has default time limits. In order to allow the user to request a longer time limit, the script can provide a form (for example) allowing the user to enter a larger time limit or indicating that more time is needed. If the user is being warned that a time limit is about to expire (see ), this form can be made available from the warning dialog. The user can extend the time limit to at least 10 times the default time limit, either by allowing the user to indicate how much additional time is needed or by repeatedly allowing the user to extend the time limit.

    -

    Examples

    +

    Examples

    • A Web page contains current stock market statistics and is set to refresh periodically. When the user is warned prior to refreshing the first time, the user is provided with an option to extend the time period between refreshes. @@ -15,7 +15,7 @@ In an online chess game, each player is given a time limit for completing each move. When the player is warned that time is almost up for this move, the user is provided with an option to increase the time.
    -

    Tests

    +

    Tests

    Procedure

    1. @@ -33,9 +33,9 @@
    -

    Related Techniques

    +

    Resources

    +

    Resources

    1. diff --git a/techniques/client-side-script/SCR14.html b/techniques/client-side-script/SCR14.html index 1ecff6d4e5..ff6c8def6a 100644 --- a/techniques/client-side-script/SCR14.html +++ b/techniques/client-side-script/SCR14.html @@ -1,13 +1,13 @@ -Using scripts to make nonessential alerts optional

      Using scripts to make nonessential alerts optional

      ID: SCR14

      Technology: client-side-script

      Type: Technique

      When to Use

      +Using scripts to make nonessential alerts optional

      Using scripts to make nonessential alerts optional

      ID: SCR14

      Technology: client-side-script

      Type: Technique

      When to Use

      Scripting technologies which use scripting alerts for non-emergency communication.

      -

      Description

      +

      Description

      The objective of this technique is to display a dialog containing a message (alert) to the user. When the alert is displayed, it receives focus and the user must activate the OK button on the dialog to dismiss it. Since these alerts cause focus to change they may distract the user, especially when used for non-emergency information. Alerts for non-emergency purposes such as displaying a quote of the day, helpful usage tip, or count down to a particular event, are not presented unless the user enables them through an option provided in the Web page.

      This technique assigns a global JavaScript variable to store the user preference for displaying alerts. The default value is false. A wrapper function is created to check the value of this variable before displaying an alert. All calls to display an alert are made to this wrapper function rather than calling the alert() function directly. Early in the page, a button is provided for the user to enable the display of alerts on the page. This technique works on a visit by visit basis. Each time the page is loaded, alerts will be disabled and the user must manually enable them. Alternatively, the author could use cookies to store user preferences across sessions.

      -

      Examples

      +

      Examples

      -

      Description

      +

      The script below will display a quote in an alert box every ten seconds, if the user selects the "Turn Alerts On" button. The user can turn the quotes off again by choosing "Turn Alerts Off".

      -
      + 
       <script type="text/javascript">
 var bDoAlerts = false;  // global variable which specifies whether to 
@@ -40,9 +40,9 @@
 showQuotes();
 </script>
      -

      Description

      +

      Within the body of the page, include a way to turn the alerts on and off. Below is one example:

      -
      + 
       <body>
 <p>Press the button below to enable the display of famous quotes 
@@ -52,11 +52,11 @@
 <button id="disableBtn" type="button" onclick="modifyAlerts(false);">
 Turn Alerts Off</button></p>
      -

      Description

      -

      Working example of this code: Demonstration of Alerts.

      -
      + +

      Working example of this code: Demonstration of Alerts.

      +
      -

      Tests

      +

      Tests

      Procedure

      For a Web page that supports non-emergency interruptions using a JavaScript alert:

        diff --git a/techniques/client-side-script/SCR16.html b/techniques/client-side-script/SCR16.html index 93a39a6d7b..0019a601ae 100644 --- a/techniques/client-side-script/SCR16.html +++ b/techniques/client-side-script/SCR16.html @@ -1,24 +1,24 @@ -Providing a script that warns the user a time limit is about to expire

        Providing a script that warns the user a time limit is about to expire

        ID: SCR16

        Technology: client-side-script

        Type: Technique

        When to Use

        +Providing a script that warns the user a time limit is about to expire

        Providing a script that warns the user a time limit is about to expire

        ID: SCR16

        Technology: client-side-script

        Type: Technique

        When to Use

        Time limits exist that are controlled by script.

        -

        Description

        +

        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 window.setTimeout() method. If, for example, the time limit is set to expire in 60 seconds, you can set the time limit for 40 seconds and provide the confirm dialog. When the confirm dialog appears, a new time limit is set for the remaining 20 seconds. Upon expiry of the "grace period time limit" the action that would have been taken at the expiry of the 60 second time limit in the original design is taken.

        -

        Examples

        +

        Examples

        -

        Description

        +

        A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired.

        -
        + 
         <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
+   "https://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <title>Stock Market Quotes</title>
@@ -54,7 +54,7 @@
 </html>
        -

        Tests

        +

        Tests

        Procedure

        On a Web page that has a time limit controlled by a script:

        @@ -74,6 +74,6 @@
        -

        Related Techniques

        +
        \ No newline at end of file diff --git a/techniques/client-side-script/SCR18.html b/techniques/client-side-script/SCR18.html index 49e396899e..0fc37637df 100644 --- a/techniques/client-side-script/SCR18.html +++ b/techniques/client-side-script/SCR18.html @@ -1,13 +1,13 @@ -Providing client-side validation and alert

        Providing client-side validation and alert

        ID: SCR18

        Technology: client-side-script

        Type: Technique

        When to Use

        +Providing client-side validation and alert

        Providing client-side validation and alert

        ID: SCR18

        Technology: client-side-script

        Type: Technique

        When to Use

        Content that validates user input.

        -

        Description

        +

        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, an alert dialog describes the nature of the error in text. Once the user dismisses the alert dialog, it is helpful if the script positions the keyboard focus on the field where the error occurred.

        -

        Examples

        +

        Examples

        -

        Example 1: Checking a single control with an event handler

        -

        Description

        +

        Checking a single control with an event handler

        +

        The following script will check that a valid date has been entered in the form control.

        -
        + 
         <label for="date">Date:</label>
 <input type="text" name="date" id="date" 
@@ -17,8 +17,8 @@ 
        Example 1: Checking a single control with an event handler
        -

        Example 2: Checking multiple controls when the user submits the form

        -

        Description

        +

        Checking multiple controls when the user submits the form

        +

        The following sample shows multiple controls in a form. The form element uses the onsubmit attribute which creates an event handler to execute the validation script when the user attempts to submit the form. If the validation is successful, the event returns true and the form submission proceeds; if the validation finds errors, it displays an error message and returns false to cancel the submit attempt so the user can fix the problems.

        This example demonstrates an alert for simplicity. A more helpful notification to the user would be to highlight the controls with problems and add information to the page about the nature of the errors and how to navigate to the controls that require data fixes.

        @@ -62,10 +62,10 @@

        Example 2: Checking multiple controls when the user submits the form

        </p> </form> -

        This is demonstrated in the working example of checking multiple controls when the user submits the form.

        -
        +

        This is demonstrated in the working example of checking multiple controls when the user submits the form.

        +
        -

        Tests

        +

        Tests

        Procedure

        For form fields that require specific input:

          @@ -78,6 +78,6 @@

          Example 2: Checking multiple controls when the user submits the form

        1. #2 is true
        -

        Related Techniques

        +
        \ No newline at end of file diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html index 2eab4777f9..0d8ef83873 100644 --- a/techniques/client-side-script/SCR19.html +++ b/techniques/client-side-script/SCR19.html @@ -1,9 +1,9 @@ -Using an onchange event on a select element without causing a change of - context

        Using an onchange event on a select element without causing a change of - context

        ID: SCR19

        Technology: client-side-script

        Type: Technique

        When to Use

        +Using an onchange event on a select element without causing a change of + context

        Using an onchange event on a select element without causing a change of + context

        ID: SCR19

        Technology: client-side-script

        Type: Technique

        When to Use

        HTML and XHTML with support for scripting. This technique uses the try/catch construct of JavaScript 1.4.

        -

        Description

        +

        Description

        The objective of this technique is to demonstrate how to correctly use an onchange event with a select element to update other elements on the Web page. This technique will not cause a change of context. When there are one or more select elements on the Web page, an onchange event on one, can @@ -14,9 +14,9 @@ that assistive technologies will pick up the change and users will encounter the new data when the modified element receives focus. This technique relies on JavaScript support in the user agent.

        -

        Examples

        +

        Examples

        -

        Description

        +

        This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of @@ -37,11 +37,11 @@

      1. The XHTML code to create the select elements in the body of the Web page.
        2. -
        + 
         <?xml version="1.0" encoding="UTF-8"?> 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
   <head> 
     <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
@@ -108,13 +108,13 @@
   </select>
 </body>
  </html>
        -

        Description

        -

        Here is a working example: Dynamic + +

        Here is a working example: Dynamic Select

        -
        +
        -

        Tests

        +

        Tests

        Procedure

        1. Navigate to the trigger select element (in this example, the one @@ -137,14 +137,14 @@
        2. Step #3 and #5 are true.
        -

        Related Techniques

        Resources

        +

        Resources

        diff --git a/techniques/client-side-script/SCR2.html b/techniques/client-side-script/SCR2.html index 47cf4d9c00..32db521d84 100644 --- a/techniques/client-side-script/SCR2.html +++ b/techniques/client-side-script/SCR2.html @@ -1,16 +1,16 @@ -Using redundant keyboard and mouse event handlers

        Using redundant keyboard and mouse event handlers

        ID: SCR2

        Technology: client-side-script

        Type: Technique

        When to Use

        +Using redundant keyboard and mouse event handlers

        Using redundant keyboard and mouse event handlers

        ID: SCR2

        Technology: client-side-script

        Type: Technique

        When to Use

        HTML and XHTML with scripting support.

        -

        Description

        +

        Description

        The objective of this technique is to demonstrate using device independent events to change a decorative image in response to a mouse or focus event. Use the onmouseover and onmouseout events to change a decorative image when the mouse moves on top of or away from an element on the page. Also, use the onfocus and onblur events to change the image when the element receives and loses focus.

        The example below has a decorative image in front of an anchor element. When the user mouses over the anchor tag, the decorative image in front of the anchor is changed. When the mouse moves off of the anchor, the image is changed back to its original version. The same image change effect occurs when the user gives keyboard focus to the anchor element. When focus is received the image changes, when focus is lost the image is changed back. This is accomplished by attaching onmouseover, onmouseout, onfocus and onblur event handlers to the anchor element. The event handler is a JavaScript function called updateImage(), which changes the src attribute of the image. The updateImage() is called in response to the onmouseover, onmouseout, onfocus, and onblur events.

        Each image is given a unique id. This unique id is passed to updateImage() along with a boolean value indicating which image is to be used: updateImage(imgId, isOver);. The boolean value of true is passed when the mouse is over the anchor element or it has focus. A false value is passed when the mouse moves off of the anchor element or it loses focus. The updateImage() function uses the image id to load the image and then changes the src attribue based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.

        It is best to use images that are similar in size and to specify the height and width attributes on the image element. This will prevent any changes to the layout of the page when the image is updated. This example uses images which are identical in size.

        -

        Examples

        +

        Examples

        -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "https://www.w3.org/TR/html4/loose.dtd">
  <html lang="en">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
@@ -37,11 +37,11 @@
  </head>
  <body>
  <p>Mouse over or tab to the links below and see the image change.</p>
- <a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
+ <a href="https://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
    onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
  <img src="greyplus.gif" border="0" alt="" id="wai">
    W3C Web Accessibility Initiative</a> &
- <a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
+ <a href="https://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
    onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
    onblur="updateImage('i18n',false);">
    <img src="greyplus.gif" border="0" alt="" id="i18n">
@@ -50,7 +50,7 @@
  </html>
        -

        Tests

        +

        Tests

        Procedure

        Load the Web page and test the events using a mouse and via the keyboard.

          diff --git a/techniques/client-side-script/SCR20.html b/techniques/client-side-script/SCR20.html index 2b98f09cdd..856d1f7c56 100644 --- a/techniques/client-side-script/SCR20.html +++ b/techniques/client-side-script/SCR20.html @@ -1,6 +1,6 @@ -Using both keyboard and other device-specific functions

          Using both keyboard and other device-specific functions

          ID: SCR20

          Technology: client-side-script

          Type: Technique

          When to Use

          +Using both keyboard and other device-specific functions

          Using both keyboard and other device-specific functions

          ID: SCR20

          Technology: client-side-script

          Type: Technique

          When to Use

          Applies to all content that uses Script to implement functionality.

          -

          Description

          +

          Description

          The objective of this technique is to illustrate the use of both keyboard-specific and mouse-specific events with code that has a scripting function associated with an event. Using both keyboard-specific and mouse-specific events together ensures that content can be operated by a wide range of devices. For example, a script may perform the same action when a keypress is detected that is performed when a mouse button is clicked. This technique goes beyond the Success Criterion requirement for keyboard access by including not only keyboard access but access using other devices as well.

          @@ -11,71 +11,72 @@ The following table suggests keyboard event handlers to pair mouse event handlers.

          - Device Handler Correspondences - - - Use... - ...with - - - - mousedown - - - keydown - - - - - mouseup - - - keyup - - - - - click - - [1] - - - keypress - - [2] - - - - - mouseover - - - focus - - - - - mouseout - - - blur - - - - -

          + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          Device Handler Correspondences
          Use......with
          + mousedown + + keydown +
          + mouseup + + keyup +
          + click + + [1] + + keypress + + [2] +
          + mouseover + + focus +
          + mouseout + + blur +
          +

          1 Although click is in principle a mouse event handler, most HTML and XHTML user agents also process this event when a native HTML control (e.g. a button or a link) is activated, regardless of whether it was activated with the mouse or the keyboard. In practice, therefore, it is not necessary to duplicate this event when adding handlers to natively focusable HTML elements. However, it is necessary when adding handlers to other events, such as in Example 2 below.

          2 Since the keypress event handler reacts to any key, the event handler function should check first to ensure the Enter key was pressed before proceeding to handle the event. Otherwise, the event handler will run each time the user presses any key, even the tab key to leave the control, and this is usually not desirable.

          Some mouse-specific functions (such as dblclick and mousemove) do not have a corresponding keyboard-specific function. This means that some functions may need to be implemented differently for each device (for example, including a series of buttons to execute, via keyboard, the equivalent mouse-specific functions implemented).

          -

          Examples

          +

          Examples

          -

          Description

          +

          In this example of an image link, the image is changed when the user positions the pointer over the image. To provide keyboard users with a similar experience, the image is also changed when the user tabs to it.

          -
          + 
           <a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
 onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
@@ -83,20 +84,20 @@
 </a>
          -

          Description

          +

          This example shows a custom image control for which both the mouse and the keyboard can be used to activate the function. The mouse event onclick is duplicated by an appropriate keyboard event onkeypress. The tabindex attribute ensures that the keyboard will have a tab stop on the image. Note that in this example, the nextPage() function should check that the keyboard key pressed was Enter, otherwise it will respond to all keyboard actions while the image has focus, which is not the desired behavior.

          -
          + 
           <img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" 
 alt="Go to next page">
          -

          Description

          +

          This example uses tabindex on an img element. Even though this is currently invalid, it is provided as a transitional technique to make this function work. Custom controls like this should also use WAI-ARIA to expose the role and state of the control.

          -
          +
          -

          Tests

          +

          Tests

          Procedure

          1. @@ -114,9 +115,9 @@
          -

          Related Techniques

          +

          Resources

          +

          Resources

          • diff --git a/techniques/client-side-script/SCR21.html b/techniques/client-side-script/SCR21.html index 9fa0a18f12..4ae80d3877 100644 --- a/techniques/client-side-script/SCR21.html +++ b/techniques/client-side-script/SCR21.html @@ -1,18 +1,18 @@ -Using functions of the Document Object Model (DOM) to add content to a page

            Using functions of the Document Object Model (DOM) to add content to a page

            ID: SCR21

            Technology: client-side-script

            Type: Technique

            When to Use

            +Using functions of the Document Object Model (DOM) to add content to a page

            Using functions of the Document Object Model (DOM) to add content to a page

            ID: SCR21

            Technology: client-side-script

            Type: Technique

            When to Use

            ECMAScript used inside HTML and XHTML

            -

            Description

            +

            Description

            The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page instead of using document.write or object.innerHTML. The document.write() method does not work with XHTML when served with the correct MIME type (application/xhtml+xml), and the innerHTML property is not part of the DOM specification and thus should be avoided. If the DOM functions are used to add the content, user agents can access the DOM to retrieve the content. The createElement() function can be used to create elements within the DOM. The createTextNode() is used to create text associated with elements. The appendChild(), removeChild(), insertBefore() and replaceChild() functions are used to add and remove elements and nodes. Other DOM functions are used to assign attributes to the created elements.

            When adding focusable elements into the document, do not add tabindex attributes to explicitly set the tab order as this can cause problems when adding focusable elements into the middle of a document. Let the default tab order be assigned to the new element by not explicitly setting a tabindex attribute.

            -

            Examples

            +

            Examples

            -

            Description

            +

            This example demonstrates use of client-side scripting to validate a form. If errors are found appropriate error messages are displayed. The example uses the DOM functions to add error notification consisting of a title, a short paragraph explaining that an error has occurred, and a list of errors in an ordered list. The content of the title is written as a link so that it can be used to draw the user's attention to the error using the focus method. Each item in the list is also written as a link that places the focus onto the form field in error when the link is followed.

            For simplicity, the example just validates two text fields, but can easily be extended to become a generic form handler. Client-side validation should not be the sole means of validation , and should be backed up with server-side validation. The benefit of client-side validation is that you can provide immediate feedback to the user to save them waiting for the errors to come back from the server, and it helps reduce unnecessary traffic to the server.

            Here is the script that adds the event handlers to the form. If scripting is enabled, the validateNumbers() function will be called to perform client-side validation before the form is submitted to the server. If scripting is not enabled, the form will be immediately submitted to the server, so validation should also be implemented on the server.

            -
            + 
             window.onload = initialise;
 function initialise()
@@ -26,9 +26,9 @@
   objForm.onsubmit= function(){return validateNumbers(this);};
 }
            -

            Description

            +

            Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.

            -
            + 
             function validateNumbers(objForm)
 {
@@ -96,9 +96,9 @@
   return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
 }
            -

            Description

            +

            Below are the helper functions to create the error message and to set focus to the associated form field.

            -
            + 
             // Function to create a list item containing a link describing the error
 // that points to the appropriate form field
@@ -129,11 +129,11 @@
   objForm[strFormField].focus();
   return false;
 }
            -

            Description

            +

            Here is the HTML for the example form.

            -
            + 
            -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 	<title>ECMAScript Form Validation</title>
@@ -161,14 +161,14 @@
 </body>
 </html>
            -

            Description

            +

            This example is limited to client-side scripting, and should be backed up with server-side validation. The example is limited to the creation of error messages when client-side scripting is available.

            -

            Here is a link to a working example: Form Validation +

            Here is a link to a working example: Form Validation

            -
            +
            -

            Tests

            +

            Tests

            Procedure

            For pages that dynamically create new content:

              @@ -180,7 +180,7 @@
            1. Check #1 is true.
          -

          Related Techniques

          Resources

          +

          Resources

          • HTML 4.01 The Document Object Model, More methods from Webreference.com diff --git a/techniques/client-side-script/SCR22.html b/techniques/client-side-script/SCR22.html index a49684e2a2..f17b821db2 100644 --- a/techniques/client-side-script/SCR22.html +++ b/techniques/client-side-script/SCR22.html @@ -1,12 +1,12 @@ -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: SCR22

            Technology: client-side-script

            Type: Technique

            When to Use

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

            Technology: client-side-script

            Type: Technique

            When to Use

            Technologies that support script-controlled blinking of content.

            -

            Description

            +

            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. Script is used to start the blinking effect of content, control the toggle between visible and hidden states, and also stop the effect at five seconds or less. The setTimeout() function can be used to toggle blinking content between visible and hidden states, and stop when the number of iterations by the time between them adds up to nearly five seconds.

            -

            Examples

            +

            Examples

            -

            Description

            +

            This example uses JavaScript to control blinking of some HTML and XHTML content. JavaScript creates the blinking effect by changing the visibility status of the content. It controls the start of the effect and stops it within five seconds.

            -
            + 
             ...
 <div id="blink1" class="highlight">New item!</div>
@@ -35,11 +35,11 @@
 </script>
 ...
            -

            Description

            -

            Working example of this code: Using script to control blinking.

            -
            + +

            Working example of this code: Using script to control blinking.

            +
            -

            Tests

            +

            Tests

            Procedure

            For each instance of blinking content:

              diff --git a/techniques/client-side-script/SCR24.html b/techniques/client-side-script/SCR24.html index 8f23a2922b..4c2a2562a8 100644 --- a/techniques/client-side-script/SCR24.html +++ b/techniques/client-side-script/SCR24.html @@ -1,6 +1,6 @@ -Using progressive enhancement to open new windows on user request

              Using progressive enhancement to open new windows on user request

              ID: SCR24

              Technology: client-side-script

              Type: Technique

              When to Use

              +Using progressive enhancement to open new windows on user request

              Using progressive enhancement to open new windows on user request

              ID: SCR24

              Technology: client-side-script

              Type: Technique

              When to Use

              HTML 4.01 and XHTML 1.0

              -

              Description

              +

              Description

              The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. @@ -10,21 +10,21 @@ example below demonstrates how to open new windows with script: it adds an event handler to a link (a element) and warns the user that the content will open in a new window.

              -

              Examples

              +

              Examples

              -

              Example 1:

              -

              Description

              +

              +

              Markup:

              The script is included in the head of the document, and the link has an id that can be used as a hook by the script.

              -
              + 
               <script type="text/javascript" src="popup.js"></script>
 …
 <a href="help.html" id="newwin">Show Help</a
              -

              Description

              +

              Script:

              -
              + 
               
 // Use traditional event model whilst support for event registration
 // amongst browsers is poor.
@@ -74,7 +74,7 @@ 
              Example 1: 
              
   return false;
 }
              -

              Tests

              +

              Tests

              Procedure

              1. Activate each link in the document to check if it opens a new window.
                2. @@ -93,9 +93,9 @@

                Example 1:

              2. #2 is true.
          -

        Related Techniques

        +

        Resources

        +

        Resources

        • diff --git a/techniques/client-side-script/SCR26.html b/techniques/client-side-script/SCR26.html index 433fd0b270..323cc26b03 100644 --- a/techniques/client-side-script/SCR26.html +++ b/techniques/client-side-script/SCR26.html @@ -1,18 +1,18 @@ -Inserting dynamic content into the Document Object Model immediately following its trigger element

          Inserting dynamic content into the Document Object Model immediately following its trigger element

          ID: SCR26

          Technology: client-side-script

          Type: Technique

          When to Use

          +Inserting dynamic content into the Document Object Model immediately following its trigger element

          Inserting dynamic content into the Document Object Model immediately following its trigger element

          ID: SCR26

          Technology: client-side-script

          Type: Technique

          When to Use

          HTML and XHTML, script

          -

          Description

          +

          Description

          The objective of this technique is to place inserted user interface elements into the Document Object Model (DOM) in such a way that the tab order and screen-reader reading order are set correctly by the default behavior of the user agent. This technique can be used for any user interface element that is hidden and shown, such as menus and dialogs.

          The reading order in a screen-reader is based on the order of the HTML or XHTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order.

          Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.

          -

          Examples

          +

          Examples

          -

          Description

          +

          This example creates a menu when a link is clicked and inserts it after the link. The onclick event of the link is used to call the ShowHide script, passing in an ID for the new menu as a parameter.

          -
          + 
          <a href="#" onclick="ShowHide('foo',this)">Toggle</a>
          -

          Description

          +

          The ShowHide script creates a div containing the new menu, and inserts a link into it. The last line is the core of the script. It finds the parent of the element that triggered the script, and appends the div it created as a new child to it. This causes the new div to be in the DOM after the link. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.

          -
          + 
          function ShowHide(id,src)
 {
 	var el = document.getElementById(id);
@@ -31,11 +31,11 @@
 		el.style.display = ('none' == el.style.display ? 'block' : 'none');
 	}
 }
          -

          Description

          +

          CSS is used to make the div and link look like a menu.

          -
          +
          -

          Tests

          +

          Tests

          Procedure

          1. Find all areas of the page that trigger dialogs that are not pop-up windows.
            2. diff --git a/techniques/client-side-script/SCR27.html b/techniques/client-side-script/SCR27.html index 3abe38f488..70b46b0592 100644 --- a/techniques/client-side-script/SCR27.html +++ b/techniques/client-side-script/SCR27.html @@ -1,15 +1,15 @@ -Reordering page sections using the Document Object Model

            Reordering page sections using the Document Object Model

            ID: SCR27

            Technology: client-side-script

            Type: Technique

            When to Use

            +Reordering page sections using the Document Object Model

            Reordering page sections using the Document Object Model

            ID: SCR27

            Technology: client-side-script

            Type: Technique

            When to Use

            HTML and XHTML, script

            -

            Description

            +

            Description

            The objective of this technique is to provide a mechanism for re-ordering component which is both highly usable and accessible. The two most common mechanisms for reordering are to send users to a set-up page where they can number components, or to allow them to drag and drop components to the desired location. The drag and drop method is much more usable, as it allows the user to arrange the items in place, one at a time, and get a feeling for the results. Unfortunately, drag and drop relies on the use of a mouse. This technique allows users to interact with a menu on the components to reorder them in place in a device independent way. It can be used in place of, or in conjunction with drag and drop reordering functionality.

            The menu is a list of links using the device-independent onclick event to trigger scripts which re-order the content. The content is re-ordered in the Document Object Model (DOM), not just visually, so that it is in the correct order for all devices.

            -

            Examples

            +

            Examples

            -

            Description

            +

            This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.

            The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items, like these components. The menu approach can also be used for other types of groupings.

            The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.

            -
            + 
            <ul id="swapper">
     <li id="black">
         <div class="module">
@@ -31,9 +31,9 @@
     </li>
     ...
 </ul>
            -

            Description

            +

            Since we've covered the showing and hiding of menus in the simple tree samples, we'll focus here just on the code that swaps the modules. Once we harmonize the events and cancel the default link action, we go to work. First, we set a bunch of local variables for the elements with which we'll be working: the menu, the module to be reordered, the menuLink. Then, after checking the reorder direction, we try to grab the node to swap. If we find one, we then call swapNode() to swap our two modules, and PositionElement() to move the absolutely-positioned menu along with the module, and then set focus back on the menu item which launched the whole thing.

            -
            + 
            function MoveNode(evt,dir)
 {
     HarmonizeEvent(evt);
@@ -73,9 +73,9 @@
     }
     src.focus();
 }
            -

            Description

            +

            The CSS for the node swap is not much different than that of our previous tree samples, with some size and color adjustment for the modules and the small menu.

            -
            + 
            ul#swapper { margin:0px; padding:0px; list-item-style:none; }
 ul#swapper li { padding:0; margin:1em; list-style:none; height:5em; width:15em; 
     border:1px solid black; }
@@ -92,7 +92,7 @@
     display:block; width:100%; }
            -

            Tests

            +

            Tests

            Procedure

            1. Find all components in the Web Unit which can be reordered via drag and drop.
              2. diff --git a/techniques/client-side-script/SCR28.html b/techniques/client-side-script/SCR28.html index 527d27dfbb..8b7f62710e 100644 --- a/techniques/client-side-script/SCR28.html +++ b/techniques/client-side-script/SCR28.html @@ -1,15 +1,15 @@ -Using an expandable and collapsible menu to bypass block of content

              Using an expandable and collapsible menu to bypass block of content

              ID: SCR28

              Technology: client-side-script

              Type: Technique

              When to Use

              +Using an expandable and collapsible menu to bypass block of content

              Using an expandable and collapsible menu to bypass block of content

              ID: SCR28

              Technology: client-side-script

              Type: Technique

              When to Use

              Technologies that provide client side scripting.

              -

              Description

              +

              Description

              This technique allows users to skip repeated material by placing that material in a menu that can be expanded or collapsed under user control. The user can skip the repeated material by collapsing the menu. The user invokes a user interface control to hide or remove the elements of the menu. The resources section lists several techniques for menus, toolbars and trees, any of which can be used to provide a mechanism for skipping navigation.

              Similiar approaches can be implemented using server-side scripting and reloading a modified version of the Web page.

              -

              Examples

              +

              Examples

              -

              Description

              +

              The navigation links at top of a Web page are all entries in a menu implemented using HTML, CSS, and Javascript. When the navigation bar is expanded, the navigation links are available to the user. When the navigation bar is collapsed, the links are not available.

              -
              + 
               ...
 
@@ -33,14 +33,14 @@
 
 ...
              -

              Description

              -

              Working example of this code: Toggle navigation bar with a link.

              -
              + +

              Working example of this code: Toggle navigation bar with a link.

              +
              -

              Description

              +

              The table of contents for a set of Web pages is repeated near the beginning of each Web page. A button at the beginning of the table of contents lets the user remove or restore it on the page.

              -
              + 
               ...
 
@@ -60,11 +60,11 @@
 
 ...
              -

              Description

              -

              Working example of this code: Toggle table of contents with a button.

              -
              + +

              Working example of this code: Toggle table of contents with a button.

              +
              -

              Tests

              +

              Tests

              Procedure

              1. Check that some user interface control allows the repeated content to be expanded or collapsed.
                2. @@ -77,12 +77,12 @@
              2. All checks above are true.
        -

        Related Techniques

        +

        Resources

        +

        Resources

        • diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html index e1dd865ef2..021c0d2225 100644 --- a/techniques/client-side-script/SCR29.html +++ b/techniques/client-side-script/SCR29.html @@ -1,18 +1,18 @@ -Adding keyboard-accessible actions to static HTML elements

          Adding keyboard-accessible actions to static HTML elements

          ID: SCR29

          Technology: client-side-script

          Type: Technique

          When to Use

          +Adding keyboard-accessible actions to static HTML elements

          Adding keyboard-accessible actions to static HTML elements

          ID: SCR29

          Technology: client-side-script

          Type: Technique

          When to Use

          HTML and XHTML, Script

          -

          Description

          +

          Description

          The objective of this technique is to demonstrate how to provide keyboard access to a user interface control that is implemented by actions to static HTML elements such as div or span. This technique ensures that the element is focusable by setting the tabindex attribute, and it ensures that the action can be triggered from the keyboard by providing an onkeyup or onkeypress handler in addition to an onclick handler.

          When the tabindex attribute has the value 0, the element can be focused via the keyboard and is included in the tab order of the document. When the tabindex attribute has the value -1, the element cannot be tabbed to, but focus can be set programmatically, using element.focus().

          Because static HTML elements do not have actions associated with them, it is not possible to provide a backup implementation or explanation in environments in which scripting is not available. This technique should only be used in environments in which client-side scripting can be relied upon.

          Such user interface controls must still satisfy Success Criterion 4.1.2. Applying this technique without also providing role, name, and state information about the user interface control will results in Failure F59, Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML.

          -

          Examples

          +

          Examples

          -

          Example 1: Adding a JavaScript action to a div element

          -

          Description

          +

          Adding a JavaScript action to a div element

          +

          The div element on the page is given a unique id attribute and a tabindex attribute with value 0. A script uses the Document Object Model (DOM) to find the div element by its id and add the onclick handler and the onkeyup handler. The onkeyup handler will invoke the action when the Enter key is pressed. Note that the div element must be loaded into the DOM before it can be found and modified. This is usually accomplished by calling the script from the onload event of the body element. The script to add the event handlers will only execute if the user agent supports and has JavaScript enabled.

          -
          + 
           ...
 <script type="text/javascript">
@@ -62,11 +62,11 @@ 
          Example 1:  Adding a JavaScript action to a div element
          
  <div id="message">Hello, world!</div>
 ...
          -

          Description

          -

          Working example of this code: Creating Divs with Actions using JavaScript.

          -
          + +

          Working example of this code: Creating Divs with Actions using JavaScript.

          +
          -

          Tests

          +

          Tests

          Procedure

          In a user agent that supports Scripting:

            @@ -82,24 +82,24 @@

            Example 1: Adding a JavaScript action to a div element

          1. All of the checks are true
        -

        Related Techniques

        +

        Resources

        +

        Resources

          -
        • HTML 4.01 Scripts +
        • HTML 4.01 Scripts
          • -
        • HTML 4.01 Giving focus to an element +
        • HTML 4.01 Giving focus to an element
          • -
        • Accessible Rich Internet Applications (WAI-ARIA) Version 1.0 Global States and Properties +
        • Accessible Rich Internet Applications (WAI-ARIA) Version 1.0 Global States and Properties
          • -
        • WAI-ARIA Primer, Provision of the keyboard or input focus +
        • WAI-ARIA Primer, Provision of the keyboard or input focus
        • - Document Object Model (DOM) Technical Reports + Document Object Model (DOM) Technical Reports
        • Internet Explorer, HTML and DHTML Reference, tabIndex Property diff --git a/techniques/client-side-script/SCR30.html b/techniques/client-side-script/SCR30.html index af4f2a2403..1c87a4e32b 100644 --- a/techniques/client-side-script/SCR30.html +++ b/techniques/client-side-script/SCR30.html @@ -1,15 +1,15 @@ -Using scripts to change the link text

          Using scripts to change the link text

          ID: SCR30

          Technology: client-side-script

          Type: Technique

          When to Use

          +Using scripts to change the link text

          Using scripts to change the link text

          ID: SCR30

          Technology: client-side-script

          Type: Technique

          When to Use

          Client-side scripting used with HTML and XHTML

          -

          Description

          +

          Description

          The purpose of this technique is to allow users to choose to have additional information added to the text of links so that the links can be understood out of context.

          Some users prefer to have links that are self-contained, where there is no need to explore the context of the link. Other users find including the context information in each link to be repetitive and to reduce their ability to use a site. Among users of assistive technology, the feedback to the working group on which is preferable has been divided. This technique allows users to pick the approach that works best for them.

          A link is provided near the beginning of the page that will expand the link text of the links on the page so that no additional context is needed to understand the purpose of any link. It must always be possible to understand the purpose of the expansion link directly from its link text.

          This technique expands the links only for the current page view. It is also possible, and in some cases would be advisable, to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

          -

          Examples

          +

          Examples

          -

          Description

          +

          This example uses Javascript to add contextual information directly to the text of a link. The link class is used to determine which additional text to add. When the "Expand Links" link is activated, each link on the page is tested to see whether additional text should be added.

          -
          + 
           ...
 <script type="text/javascript">
@@ -75,11 +75,11 @@
 
 ...
          -

          Description

          -

          Working example of this code: Providing link expansions on demand.

          -
          + +

          Working example of this code: Providing link expansions on demand.

          +
          -

          Tests

          +

          Tests

          Procedure

          1. Check that there is a link near the beginning of the page to expand links
            2. @@ -94,7 +94,7 @@
          2. Checks #1, #2, and #5 are true
        -

        Related Techniques

        +

    ID: F12

    Technology: failures

    Type: Failure

    When to Use

    Sites that require user login to submit input and that terminate the session after a some period of inactivity.

    -

    Description

    +

    Description

    Web servers that require user authentication usually have a session mechanism in which a session times out after a period of inactivity from the user. This is sometimes done for security reasons, to protect users who are @@ -19,7 +19,7 @@ And for these users, it is likely that the session will time out again before they can complete the form. This sets up a situation where a user who needs more time to complete the form can never complete it.

    -

    Examples

    +

    Examples

    -

    Tests

    +

    Tests

    Procedure

    On a site where authentication is required, user input is collected, and which ends the user's session after a known period of inactivity:

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

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F13.html b/techniques/failures/F13.html index 0f7832bbe0..308cc50600 100644 --- a/techniques/failures/F13.html +++ b/techniques/failures/F13.html @@ -1,14 +1,14 @@ -Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not - include information that is conveyed by color differences in the image

    Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not - include information that is conveyed by color differences in the image

    ID: F13

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not + include information that is conveyed by color differences in the image

    Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not + include information that is conveyed by color differences in the image

    ID: F13

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to describe the failure that occurs when an image uses color differences to convey information, but the text alternative for the image does not convey that information. This can cause problems for people who are blind or colorblind because they will not be able to perceive the information conveyed by the color differences.

    -

    Examples

    +

    Examples

    • A bar chart of sales data is provided as an image. The chart includes yearly sales figures for four employees in the Sales Department. The @@ -21,7 +21,7 @@ indicate which people did not meet the sales quota rather than relying on color.
    -

    Tests

    +

    Tests

    Procedure

    For all images in the content that convey information by way of color differences:

      @@ -35,6 +35,6 @@ content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F14.html b/techniques/failures/F14.html index 8ffd5c88d8..2459a11eb2 100644 --- a/techniques/failures/F14.html +++ b/techniques/failures/F14.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.3 due to identifying content only by its shape or - location

    Failure of Success Criterion 1.3.3 due to identifying content only by its shape or - location

    ID: F14

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.3 due to identifying content only by its shape or + location

    Failure of Success Criterion 1.3.3 due to identifying content only by its shape or + location

    ID: F14

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to show how identifying content only by its visual shape or location makes content difficult to understand and operate. When only visual identification or location is used, users with visual @@ -10,7 +10,7 @@ the screen or may perceive only a small portion of the screen at one time. Also, location of content can vary if page layout varies due to variations in font, window, or screen size.

    -

    Examples

    +

    Examples

    • The navigation instructions for a site state, "To go to next page, press the button to the right. To go back to previous page, press @@ -34,7 +34,7 @@ square, triangular, or round. The buttons must have additional information to indicate their functions or their shapes.
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the Web page for textual references to content within the @@ -49,6 +49,6 @@ content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F15.html b/techniques/failures/F15.html index eb2cd9d3de..950a2c7bf2 100644 --- a/techniques/failures/F15.html +++ b/techniques/failures/F15.html @@ -1,21 +1,21 @@ -Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

    Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

    ID: F15

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

    Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely

    ID: F15

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies that support an accessibility API.

    -

    Description

    +

    Description

    When standard controls from accessible technologies are used, they usually are programmed in a way that uses and supports the accessibility API. If custom controls are created, however, then it is up to the programmer to be sure that the newly created control supports the accessibility API. If this is not done, then assistive technologies will not be able to understand what the control is or how to operate it or may not even know of its existence.

    For technologies that support it, WAI-ARIA can be used to expose a custom control's role, name, value, states, and properties via the accessibility API for the technology.

    -

    Examples

    +

    Examples

    -

    Description

    +

    A music player is designed with custom controls that look like musical notes that are stretched for volume, tone etc. The programmer does not make the new control support the Accessibility API. As a result - the controls cannot be identified or controlled from AT.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Using the accessibility checker for the technology (or if @@ -30,20 +30,20 @@ content fails this Success Criterion
    -

    Related Techniques

    Resources

    +

    Resources

    diff --git a/techniques/failures/F16.html b/techniques/failures/F16.html index 2027eee425..cb9c4f1379 100644 --- a/techniques/failures/F16.html +++ b/techniques/failures/F16.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

    Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

    ID: F16

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

    Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content

    ID: F16

    Technology: failures

    Type: Failure

    When to Use

    All technologies that support visual movement or scrolling.

    -

    Description

    +

    Description

    In this failure technique, there is moving or scrolling content that cannot be paused and resumed by users. In this case, some users with low vision or cognitive disabilities will not be able to perceive the content.

    -

    Examples

    +

    Examples

    • A page has a scrolling news ticker without a mechanism to pause it. Some users are unable to read the scrolling content.
    -

    Tests

    +

    Tests

    Procedure

    On a page with moving or scrolling content,

      @@ -33,6 +33,6 @@ criterion.
    -

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F19.html b/techniques/failures/F19.html index 572812a81b..754425ffc8 100644 --- a/techniques/failures/F19.html +++ b/techniques/failures/F19.html @@ -1,9 +1,9 @@ -Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

    Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

    ID: F19

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

    Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page

    ID: F19

    Technology: failures

    Type: Failure

    When to Use

    Sites that provide alternative, WCAG-conforming versions of nonconforming primary content.

    -

    Description

    +

    Description

    This failure technique describes the situation in which an alternate, conforming version of the content is provided, but there is no direct way for a user to tell that it is available or where to find it. Such content fails the Success Criterion because the user cannot find the conforming version.

    -

    Examples

    +

    Examples

    • A link or a search takes a user directly to one of the nonconforming pages in the Web site. There is neither an indication that an @@ -18,7 +18,7 @@ when the user is not able to access a particular page, there is no way to find the conforming version of the page.
    -

    Tests

    +

    Tests

    Procedure

    1. Identify a nonconforming page that has an alternative conforming @@ -32,6 +32,6 @@
    2. If step #2 is false, the content fails the Success Criterion.
    -

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html index c1b52c3339..a4b0c81aaa 100644 --- a/techniques/failures/F2.html +++ b/techniques/failures/F2.html @@ -1,13 +1,13 @@ -Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

    Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

    ID: F2

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

    Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

    ID: F2

    Technology: failures

    Type: Failure

    When to Use

    All technologies that support images or presentation markup.

    -

    Description

    +

    Description

    This document describes a failure that occurs when a change in the appearance of text conveys meaning without using appropriate semantic markup. This failure also applies to images of text that are not enclosed in the appropriate semantic markup.

    -

    Examples

    +

    Examples

    -

    Example 1: Using CSS to style the p element to look like a heading

    -

    Description

    +

    Using CSS to style the p element to look like a heading

    +

    The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assisitive Technology could not distinguish it as a heading.

    -
    + 
      <style type="text/css">
  .heading1{
@@ -22,17 +22,17 @@ 
    Example 1: Using CSS to style the p element to look like a heading
    
  ........
  </p>
    -

    Description

    +

    In this case, the proper approach would be to use CSS to style the H1 element in HTML.

    -
    +
    -

    Example 2: Images of text used as headings where the images are not marked up with heading tags

    -

    Description

    +

    Images of text used as headings where the images are not marked up with heading tags

    +

    Chapter1.gif is an image of the words, "Chapter One" in a Garamond font sized at 20 pixels. This is a failure because at a minimum the img element should be enclosed within a header element. A better solution would be to eliminate the image and to enclose the text within a header element which has been styled using CSS.

    -
    + 
     <img src="Chapter1.gif" alt="Chapter One">
  
@@ -41,8 +41,8 @@ 
    Example 2: Images of text used as headings where the images are not marked u
    -

    Example 3: Using CSS to visually emphasize a phrase or word without conveying that emphasis semantically

    -

    Description

    +

    Using CSS to visually emphasize a phrase or word without conveying that emphasis semantically

    +

    The following example fails because the information conveyed by using the CSS font-weight property to change to a bold font is not conveyed through semantic markup or stated explicitly in the text.

    Here is a CSS class to specify bold:

    @@ -59,9 +59,9 @@ 
    Example 3: Using CSS to visually emphasize a phrase or word without conveyin
  fourth time for an ice cream cone. 
  </p>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. @@ -86,9 +86,9 @@

      Example 3: Using CSS to visually emphasize a phrase or word without conveyin
    2. If check #2.1 is true, then #2.2 is true.

    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F20.html b/techniques/failures/F20.html index 93633dae77..5d9ec590c4 100644 --- a/techniques/failures/F20.html +++ b/techniques/failures/F20.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when - changes to non-text content occur

    Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when - changes to non-text content occur

    ID: F20

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when + changes to non-text content occur

    Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when + changes to non-text content occur

    ID: F20

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies.

    -

    Description

    +

    Description

    The objective of this failure condition is to address situations where the non-text content is updated, but the text alternative is not updated at the same time. If the text in the text alternative cannot still be used in place of the non-text content without losing information or function, then it fails because it is no longer a text alternative for the non-text content.

    -

    Examples

    +

    Examples

    • Failure Example 1: A Sales chart is updated @@ -24,7 +24,7 @@ images on a page is updated periodically using script, but the text alternatives are not updated at the same time.
    -

    Tests

    +

    Tests

    Procedure

    1. Check each text alternative to see if it is describing content @@ -38,4 +38,4 @@ these Success Criteria.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F22.html b/techniques/failures/F22.html index df36f61f65..ad0e4cfbfc 100644 --- a/techniques/failures/F22.html +++ b/techniques/failures/F22.html @@ -1,45 +1,45 @@ -Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the - user

    Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the - user

    ID: F22

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the + user

    Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the + user

    ID: F22

    Technology: failures

    Type: Failure

    When to Use

    General

    -

    Description

    +

    Description

    Failure due to opening new windows when the user does not expect them. New windows take the focus away from what the user is reading or doing. This is fine when the user has interacted with a piece of User Interface and expects to get a new window, such as an options dialogue. The failure comes when pop-ups appear unexpectedly.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    When a user navigates to a page, a new window appears over the existing user agent window, and the focus is moved to the new window.

    -
    +
    -

    Example 2:

    -

    Description

    +

    +

    A user clicks on a link, and a new window appears. The original link has no associated text saying that it will open a new window.

    -
    +
    -

    Example 3:

    -

    Description

    +

    +

    A user clicks on the body of a page and a new window appears. No indication that the area that was clicked has functionality is present.

    -
    +
    -

    Example 4:

    -

    Description

    +

    +

    A user clicks on undecorated text within the page and a new window appears. The page has no visible indication that the area is functional.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Load the Web page.
      2. @@ -62,6 +62,6 @@

      Example 4:

      the content fails the Success Criterion
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F23.html b/techniques/failures/F23.html index dd2ae45ae8..d23a562c31 100644 --- a/techniques/failures/F23.html +++ b/techniques/failures/F23.html @@ -1,30 +1,30 @@ -Failure of 1.4.2 due to playing a sound longer than 3 seconds where - there is no mechanism to turn it off

    Failure of 1.4.2 due to playing a sound longer than 3 seconds where - there is no mechanism to turn it off

    ID: F23

    Technology: failures

    Type: Failure

    When to Use

    +Failure of 1.4.2 due to playing a sound longer than 3 seconds where + there is no mechanism to turn it off

    Failure of 1.4.2 due to playing a sound longer than 3 seconds where + there is no mechanism to turn it off

    ID: F23

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies except those for voice interaction.

    -

    Description

    +

    Description

    This describes a failure condition for Success Criteria involving sound. If sound does not turn off automatically within 3 seconds and there is no way to turn the sound off then Success Criterion 1.4.2 would not be met. Sounds that play over 3 seconds when there is no mechanism to turn off the sound included in the content would fall within this failure condition.

    -

    Examples

    +

    Examples

    -

    Description

    +
    • A site that plays continuous background music
    -
    +
    -

    Description

    +
    • A site with a narrator that lasts more than 3 seconds before stopping, and there is no mechanism to stop it.
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check that there is a way in a Web page to turn off any sound that @@ -37,4 +37,4 @@
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F24.html b/techniques/failures/F24.html index ddf6372292..25fdf337cc 100644 --- a/techniques/failures/F24.html +++ b/techniques/failures/F24.html @@ -1,9 +1,9 @@ -Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without - specifying background colors or vice versa

    Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without - specifying background colors or vice versa

    ID: F24

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without + specifying background colors or vice versa

    Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without + specifying background colors or vice versa

    ID: F24

    Technology: failures

    Type: Failure

    When to Use

    All technologies that allow user agents to control foreground and background colors through personal stylesheets or other means.

    -

    Description

    +

    Description

    Users with vision loss or cognitive, language and learning challenges often prefer specific foreground and background color combinations. In some cases, individuals with low vision will find it much easier to see a Web page that has white text on a black background, and they may have set their user agent to present this contrast. Many user agents make it possible for users to choose a preference about the foreground or background colors they would like to see without overriding all author-specified styles. This makes it possible for users to view pages where colors have not been specified by the author in their preferred color combination.

    Unless an author specifies both foreground and background colors, then they (the author) can no longer guarantee that the user will get a contrast that meets the contrast requirements. If, for example, the author specifies, that text should be grey, then it may override the settings of the user agent and render a page that has grey text (specified by the author) on a light grey background (that was set by the user in their user agent). This principle also works in reverse. If the author forces the background to be white, then the white background specified by the author could be similar in color to the text color preference expressed by the user in their user agent settings, thus rendering the page unusable to the user. Because an author can not predict how a user may have configured their preferences, if the author specifies a foreground text color then they should also specify a background color which has sufficient contrast with the foreground and vice versa.

    It is not necessary that the foreground and background colors both be defined on the same CSS rule. Since CSS color properties inherit from ancestor elements, it is sufficient if both foreground and background colors are defined either directly or through inheritance by the time that color is applied to a given element.

    @@ -11,17 +11,17 @@

    Best practice is to include all states of the text. For example, text, link text, visited link text, link text with hover and keyboard focus, etc.

    -

    Examples

    +

    Examples

    -

    Example 1: Specifying only background color with CSS

    -

    Description

    +

    Specifying only background color with CSS

    +

    In the example below the background color is defined on the CSS stylesheet, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

    -
    + 
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
@@ -37,15 +37,15 @@ 
    Example 1: Specifying only background color with CSS
    
 </html>
    -

    Example 2: Specifying only foreground color with CSS

    -

    Description

    +

    Specifying only foreground color with CSS

    +

    In the example below the foreground color is defined on the CSS stylesheet, however the background color is not defined. Therefore, the example fails the Success Criterion.

    -
    + 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
@@ -61,15 +61,15 @@ 
    Example 2: Specifying only foreground color with CSS
    
 </html>
    -

    Example 3: Specifying foreground color of link text with CSS

    -

    Description

    +

    Specifying foreground color of link text with CSS

    +

    In the example below the link text (foreground) color is defined on the body element. However, the background color is not defined. Therefore, the example fails the Success Criterion.

    -
    + 
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
-    "http://www.w3.org/TR/html4/strict.dtd">
+    "https://www.w3.org/TR/html4/strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
@@ -87,16 +87,16 @@ 
    Example 3: Specifying foreground color of link text with CSS
    
 </html>
    -

    Example 4: Specifying only background color with bgcolor in HTML

    -

    Description

    +

    Specifying only background color with bgcolor in HTML

    +

    In the example below the background color is defined on the body element, however the foreground color is not defined. Therefore, the example fails the Success Criterion.

    Note that the use of the bgcolor attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.

    -
    + 
       
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
       <html>
           <head>
@@ -108,16 +108,16 @@ 
    Example 4: Specifying only background color with bgcolor in HTML 
    
   </html>
    -

    Example 5: Specifying only foreground color with the text attribute in HTML

    -

    Description

    +

    Specifying only foreground color with the text attribute in HTML

    +

    In the example below the foreground color is defined on the body element, however the background color is not defined. Therefore, the example fails the Success Criterion.

    Note that the use of the text attribute is deprecated as of HTML 4, but this failure example is included as this usage is still found on some web sites.

    -
    + 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
@@ -129,7 +129,7 @@ 
    Example 5: Specifying only foreground color with the text attribute in HTML
 </body>
 </html>
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the code of the Web page.
      2. @@ -148,14 +148,14 @@

      Example 5: Specifying only foreground color with the text attribute in HTML

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

    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F25.html b/techniques/failures/F25.html index 82faa4f908..025a61a3c6 100644 --- a/techniques/failures/F25.html +++ b/techniques/failures/F25.html @@ -1,13 +1,13 @@ -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

    ID: F25

    Technology: failures

    Type: Failure

    When to Use

    +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

    ID: F25

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    This describes a failure condition when the Web page has a title, but the title does not identify the contents or purpose of the Web page.

    -

    Examples

    +

    Examples

    -

    Description

    +

    Examples of text that are not titles include:

    • @@ -25,16 +25,16 @@
    • Empty text
    • Filler or placeholder text
    -
    +
    -

    Description

    +

    A site generated using templates includes the same title for each page on the site. So the title cannot be used to distinguish among the pages.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check whether the title of each Web page identifies the contents @@ -47,6 +47,6 @@ content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F26.html b/techniques/failures/F26.html index 969ef3e68a..291e3cf74f 100644 --- a/techniques/failures/F26.html +++ b/techniques/failures/F26.html @@ -1,19 +1,19 @@ - - Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information

    - Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information

    ID: F26

    Technology: failures

    Type: Failure

    When to Use

    + + Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information

    + Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information

    ID: F26

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to show how using a graphical symbol to convey information can make content difficult to comprehend. A graphical symbol may be an image, an image of text or a pictorial or decorative character symbol (glyph) which imparts information nonverbally. Examples of graphical symbols include an image of a red circle with a line through it, a "smiley" face, or a glyph which represents a check mark, arrow, or other symbol but is not the character with that meaning. Assistive technology users may have difficulty determining the meaning of the graphical symbol. If a graphical symbol is used to convey information, provide an alternative using features of the technology or use a different mechanism that can be marked with an alternative to represent the graphical symbol. For example, an image with a text alternative can be used instead of the glyph.

    -

    Examples

    +

    Examples

    -

    Example 1: Glyphs Used to Indicate Status

    -

    Description

    +

    Glyphs Used to Indicate Status

    +

    A shopping cart uses two simple glyphs to indicate whether an item is available for immediate shipment. A check mark indicates that the item is in stock and ready to ship. An "x" mark indicates that the item is currently on back order and not available for immediate shipment. An assistive technology user could not determine the status of the current item.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the page for non-text marks that convey information.
      2. @@ -27,6 +27,6 @@

      Example 1: Glyphs Used to Indicate Status

      content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html index d81ab1b5c4..f2e2d0ad4b 100644 --- a/techniques/failures/F3.html +++ b/techniques/failures/F3.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.1.1 due to using CSS to include images that convey - important information

    Failure of Success Criterion 1.1.1 due to using CSS to include images that convey - important information

    ID: F3

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to using CSS to include images that convey + important information

    Failure of Success Criterion 1.1.1 due to using CSS to include images that convey + important information

    ID: F3

    Technology: failures

    Type: Failure

    When to Use

    All technologies that support CSS.

    -

    Description

    +

    Description

    The CSS background-image property provides a way to include images in the document with CSS without any reference in the HTML code. The CSS background-image property was designed for decorative purposes and it is not @@ -13,36 +13,36 @@

    Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. These users, would lose the information in the background image due to lack of any alternative text.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    In the following example, part of the content is contained in an image that is presented by CSS alone. In this example, the image TopRate.png is a 180 by 200 pixel image that contains the text, "19.3% APR Typical Variable."

    -
    + 
     The CSS contains: 
 p#bestinterest {
   padding-left: 200px;
   background: transparent url(/images/TopRate.png) no-repeat top left;
 }
    -

    Description

    +

    It is used in this excerpt:

    -
    + 
     
 <p id="bestinterest">
   Where else would you find a better interest rate?
 </p>
    -

    Example 2:

    -

    Description

    +

    +

    A book distributor uses background images to provide icons against a list of book titles to indicate whether they are new, limited, in-stock, or out of stock.

    The CSS contains:

    -
    + 
     ul#booklist li {
   padding-left: 20px;
@@ -63,9 +63,9 @@ 
    Example 2: 
    
 ul#booklist li.outstock {
   background: transparent url(outstock.png) no-repeat top left; 
 }
    -

    Description

    +

    It is used in this excerpt:

    -
    + 
     <ul id="booklist">
   <li class="new">Some book</li>
@@ -76,8 +76,8 @@ 
    Example 2: 
    
 </ul>
    -

    Example 3:

    -

    Description

    +

    +

    Using the code from example 1, the same background image is declared in the HTML style attribute:

    <p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;" >
 Where else would you find a better interest rate?
@@ -90,9 +90,9 @@ 
    Example 3: 
    
 newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
 document.body.appendChild(newP);
 </script>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine all images added to the content via CSS, HTML style attributes, or dynamically in script as background images.
      2. @@ -107,6 +107,6 @@

      Example 3:

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

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F30.html b/techniques/failures/F30.html index 22e7de6d2e..08e15123f5 100644 --- a/techniques/failures/F30.html +++ b/techniques/failures/F30.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not - alternatives (e.g., filenames or placeholder text)

    Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not - alternatives (e.g., filenames or placeholder text)

    ID: F30

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not + alternatives (e.g., filenames or placeholder text)

    Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not + alternatives (e.g., filenames or placeholder text)

    ID: F30

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies.

    -

    Description

    +

    Description

    This describes a failure condition for all techniques involving text alternatives. If the text in the "text alternative" cannot be used in place of the non-text content without losing information or function then it fails because it is not, in fact, an alternative to the non-text content.

    -

    Examples

    +

    Examples

    -

    Description

    +

    Examples of text that are not text alternatives include:

    • placeholder text such as " " or "spacer" or "image" or @@ -22,9 +22,9 @@ right such as "Oct.jpg" or "Chart.jpg" or "sales\\oct\\top3.jpg"
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check each text alternative to see if it is not actually a text @@ -37,4 +37,4 @@ fails the Success Criterion.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F31.html b/techniques/failures/F31.html index c7c3cb0d14..e4149940b3 100644 --- a/techniques/failures/F31.html +++ b/techniques/failures/F31.html @@ -1,6 +1,6 @@ -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

    ID: F31

    Technology: failures

    Type: Failure

    When to Use

    +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

    ID: F31

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies.

    -

    Description

    +

    Description

    Components that have the same function in different Web pages are more easily recognized if they are labeled consistently. If the naming is not consistent, some users may get confused.

    @@ -14,25 +14,25 @@ identical, they would be consistent, and therefore would not be failures for this Success Criterion.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    One of the most common examples of using inconsistent labels for components with the same function is to use a button that says "search" in one page and to use a button that says "find" on another page when they both serve the identical function.

    -
    +
    -

    Example 2:

    -

    Description

    +

    +

    An online authoring tool that uses a button with "Save page" on one page and "Save" on another page, in both cases for the same function.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. In a set of Web pages, find components with the same function @@ -45,4 +45,4 @@

      Example 2:

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

    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F32.html b/techniques/failures/F32.html index e2bcdea3bd..a0710dc19a 100644 --- a/techniques/failures/F32.html +++ b/techniques/failures/F32.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.2 due to using white space characters to control - spacing within a word

    Failure of Success Criterion 1.3.2 due to using white space characters to control - spacing within a word

    ID: F32

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.2 due to using white space characters to control + spacing within a word

    Failure of Success Criterion 1.3.2 due to using white space characters to control + spacing within a word

    ID: F32

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format individual words visually can be a failure to present meaningful sequences properly. When blank characters are inserted to control letter spacing within a word, they may change the interpretation of the word or cause it not to be programmatically recognized as a single word.

    Inserting white space characters into an initialism is not an example of this @@ -10,49 +10,49 @@ initialism and may make it easier to understand.

    The use of white space between words for visual formatting is not a failure, since it does not change the interpretation of the words.

    -

    Examples

    +

    Examples

    -

    Example 1: Failure due to adding white space in the middle of a word

    -

    Description

    +

    Failure due to adding white space in the middle of a word

    +

    This example has white spaces within a word to space out the letters in a heading. Screen readers may read each letter individually instead of the word "Welcome."

    -
    + 
     <h1>W e l c o m e</h1>
    -

    Description

    +

    &nbsp; can also be used to add white space, producing similar failures:

    -
    + 
     <h1>H&nbsp;E&nbsp;L&nbsp;L&nbsp;O</h1>
    -

    Example 2: White space in the middle of a word changing its meaning

    -

    Description

    +

    White space in the middle of a word changing its meaning

    +

    In Japanese, Han characters (Kanji) may have multiple readings that mean very different things. In this example, the word is read incorrectly because screen readers may not recognize these characters as a word because of the white space between the characters. The characters mean "Tokyo," but screen readers say "Higashi Kyo".

    -
    + 
     <h1>東　京</h1>
    -

    Example 3: Using line break characters to format vertical text

    -

    Description

    +

    Using line break characters to format vertical text

    +

    In the row header cell of a data table containing Japanese text, authors often create vertical text by using line break characters. However screen readers are not able to read the words in vertical text correctly because the line breaks occur within the word. In the following example, "東京都"(Tokyo-to) will be read "Higashi Kyo Miyako".

    -
    + 
     <table>
 <caption>表1.　都道府県別一覧表</caption>
@@ -70,7 +70,7 @@ 
    Example 3: Using line break characters to format vertical text
    
 </table>
    -

    Tests

    +

    Tests

    Procedure

    For each word that appears to have non-standard spacing between characters:

    @@ -85,6 +85,6 @@

    Example 3: Using line break characters to format vertical text

    content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F33.html b/techniques/failures/F33.html index b053e6e92b..2795e3c19d 100644 --- a/techniques/failures/F33.html +++ b/techniques/failures/F33.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to - create multiple columns in plain text content

    Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to - create multiple columns in plain text content

    ID: F33

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to + create multiple columns in plain text content

    Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to + create multiple columns in plain text content

    ID: F33

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format columns of data in text content is a failure to use structure properly. Assistive @@ -14,12 +14,12 @@

    Plain text is not suitable for displaying multiple columns of text. Modify the content to present the data in a different layout. Alternatively, use a technology that provides structural elements to represent columnar data.

    -

    Examples

    +

    Examples

    -

    Description

    +

    The following example incorrectly uses white space characters to format a paragraph into a two column format.

    -
    + 
     Web Content Accessibility Guidelines      including blindness and low vision, 
 2.0 (WCAG 2.0) covers a wide range of     deafness and hearing loss, learning 
@@ -33,7 +33,7 @@
 "Accessible" means usable to a wide       many different devices - including a 
 range of people with disabilities,        wide variety of assistive technologies.
    -

    Description

    +

    If this table was to be interpreted and spoken by a screen reader it would speak the following lines:

      @@ -51,9 +51,9 @@ font, or increased in size until lines no longer fit on the page, similar interpretation issues would arise in the visual presentation.

      -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the document for data or information presented in @@ -68,4 +68,4 @@ content fails these Success Criteria.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F34.html b/techniques/failures/F34.html index db2b011957..6d18c3f71e 100644 --- a/techniques/failures/F34.html +++ b/techniques/failures/F34.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to - format tables in plain text content

    Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to - format tables in plain text content

    ID: F34

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to + format tables in plain text content

    Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to + format tables in plain text content

    ID: F34

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to describe how using white space characters, such as space, tab, line break, or carriage return, to format tables in text content is a failure to use structure properly. When tables are created in @@ -19,12 +19,12 @@ visual formatting to represent tabular relations, tabular information would need to be presented using a different technology or presented linearly. (See Presenting tabular information in plain text)

    -

    Examples

    +

    Examples

    -

    Description

    +

    The following example incorrectly uses white space to format a Menu as a visual table.

    -
    + 
     Menu
          Breakfast        Lunch           Dinner
@@ -39,7 +39,7 @@
           orange juice   potato salad    Italian bread
                          brownie         ice cream
    -

    Description

    +

    If this table was to be interpreted and spoken by a screen reader it would speak the following lines:

      @@ -55,9 +55,9 @@ the text were reflowed, or changed from a fixed to a variable font, or increased in size until lines no longer fit on the page, similar issues would arise in the visual presentation.

      -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the document for visually formatted tables.
      2. @@ -71,6 +71,6 @@ content fails these Success Criteria.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F36.html b/techniques/failures/F36.html index a7dc7dfe1e..bc599ac77e 100644 --- a/techniques/failures/F36.html +++ b/techniques/failures/F36.html @@ -1,10 +1,10 @@ -Failure of Success Criterion 3.2.2 due to automatically submitting a form and +<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is - given a value

    Failure of Success Criterion 3.2.2 due to automatically submitting a form and + given a value

    Failure of Success Criterion 3.2.2 due to automatically submitting a form and presenting new content without prior warning when the last field in the form is - given a value

    ID: F36

    Technology: failures

    Type: Failure

    When to Use

    + given a value

    ID: F36

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    Forms are frequently designed so that they submit automatically when the user has filled in all the fields, or when focus leaves the last field. There are two problems with this approach. First is that a disabled user who needs @@ -14,10 +14,10 @@ each item is navigated with the keyboard, again accidentally submitting the form. It is better to rely on the standard form behavior of the submit button and enter key.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    This failure example submits a form when the user leaves the last field of a three-field telephone number form. The form will submit if the user leaves the field after editing it, even navigating @@ -25,7 +25,7 @@

    Example 1:

    submit a form, and should instead use a submit button, or rely on the form's default behavior of submitting when the user hits enter in a text field.

    -
    + 
     
 <form method="get" id="form1">
   <input type="text" name="text1" size="3" maxlength="3"> - 
@@ -34,11 +34,11 @@ 
    Example 1: 
    
 </form>
    -

    Example 2:

    -

    Description

    +

    +

    This is a example that submits a form when the user selects an option from the menu when there is no warning of this behavior in advance. The form will submit as soon as an item from the menu is selected. A user using a keyboard will not be able to navigate past the first item in the menu. Blind users and users with hand tremors can easily make a mistake on which item on the dropdown menu to choose and they are taken to the wrong destination before they can correct it.

    -
    + 
     
 <form method="get" id="form2">
  <input type="text" name="text1">
@@ -50,7 +50,7 @@ 
    Example 2: 
    
   </select>
 </form>
    -

    Tests

    +

    Tests

    Procedure

    1. Enter data in all fields on page starting at top.
      2. @@ -65,6 +65,6 @@

      Example 2:

      fails the Success Criterion.
    -

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html index ce31a0deb4..9893f7baaa 100644 --- a/techniques/failures/F37.html +++ b/techniques/failures/F37.html @@ -1,24 +1,24 @@ -Failure of Success Criterion 3.2.2 due to launching a new window without prior warning - when the selection of a radio button, check box or select list is changed

    Failure of Success Criterion 3.2.2 due to launching a new window without prior warning - when the selection of a radio button, check box or select list is changed

    ID: F37

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 3.2.2 due to launching a new window without prior warning + when the selection of a radio button, check box or select list is changed

    Failure of Success Criterion 3.2.2 due to launching a new window without prior warning + when the selection of a radio button, check box or select list is changed

    ID: F37

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    This document describes a failure that occurs when changing the selection of a radio button, a check box or an item in a select list causes a new window to open. It is possible to use scripting to create an input element that causes a change of context (submit the form, open a new page, a new window) when the element is selected. Developers can instead use a - submit button (see Providing a submit + submit button (see Providing a submit button to initiate a change of context) or clearly indicate the expected action.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    The example below fails the Success Criterion because it processes the form when a radio button is selected instead of using a submit button.

    -
    + 
      
 <script type="text/JavaScript"> 
   function goToMirror(theInput) {
@@ -45,7 +45,7 @@ 
    Example 1: 
    
        </p> 
 </form>
    -

    Tests

    +

    Tests

    Procedure

    1. Find each form in a page.
      2. @@ -60,4 +60,4 @@

      Example 1:

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

    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html index 33269e74c9..fcba1dc39c 100644 --- a/techniques/failures/F38.html +++ b/techniques/failures/F38.html @@ -1,18 +1,18 @@ -Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

    Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

    ID: F38

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

    Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them

    ID: F38

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    This describes a failure condition for text alternatives for images that should be ignored by AT. If there is no alt attribute at all assistive technologies are not able to ignore the non-text content. The alt attribute must be provided and have a null value (i.e., alt="" ) to avoid a failure of this Success Criterion.

    This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no alt attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.

    -

    Examples

    +

    Examples

    • Decorative images that have no alt attribute and no role attribute
    -

    Tests

    +

    Tests

    Procedure

    For any img element that is used for purely decorative content:

      @@ -25,4 +25,4 @@
    1. If step #1 is true and if step #2 is true, this failure condition applies and content fails the Success Criterion.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F39.html b/techniques/failures/F39.html index e2161176c6..5f07d25619 100644 --- a/techniques/failures/F39.html +++ b/techniques/failures/F39.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology

    Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology

    ID: F39

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology

    Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology

    ID: F39

    Technology: failures

    Type: Failure

    When to Use

    Applies to HTML and XHTML.

    -

    Description

    +

    Description

    This technique describes a failure condition for images that should be ignored by assistive technologies. A text alternative for an image should convey the meaning of the image. When an image is used for decoration, @@ -10,10 +10,10 @@

    Providing a null text alternative (i.e., alt="" ) will allow assistive technology to ignore the image and avoid a failure of this Success Criterion.

    -

    Examples

    +

    Examples

    -

    Example 1: Decorative images that have no alt attribute

    -

    Description

    +

    Decorative images that have no alt attribute

    +

    An image is used to create a blank space between content, where the spacing itself is not meaningful to the content. The image has an alt text value of "spacer". This image fails the Success Criterion @@ -22,9 +22,9 @@

    Example 1: Decorative images that have no alt attribute

    announced by screen readers and displayed in some alternate color schemes. 

    <div>Tree type: <img src="spacer.gif" width="100" height="1" alt="spacer"/>Cedrus deodara</div>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Identify any img elements that are used for decoration, spacing @@ -39,8 +39,8 @@

      Example 1: Decorative images that have no alt attribute

      fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F4.html b/techniques/failures/F4.html index 0f4b064f40..85666cedaa 100644 --- a/techniques/failures/F4.html +++ b/techniques/failures/F4.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a - mechanism to stop it in less than five seconds

    Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a - mechanism to stop it in less than five seconds

    ID: F4

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a + mechanism to stop it in less than five seconds

    Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a + mechanism to stop it in less than five seconds

    ID: F4

    Technology: failures

    Type: Failure

    When to Use

    Cascading Style Sheets.

    -

    Description

    +

    Description

    CSS defines the blink value for the text-decoration property. When used, it causes any text in elements with this property to blink at a predetermined rate. This cannot be interrupted by the user, nor @@ -10,18 +10,18 @@ long as the page is displayed. Therefore, content that uses text-decoration:blink fails the Success Criterion because blinking can continue for more than three seconds.

    -

    Examples

    +

    Examples

    -

    Description

    +

    A product list page uses the text-decoration:blink style on an element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.

    -
    + 
     <p>My Great Product <span style="text-decoration:blink">Sale! $44,995!</span></p>
    -

    Tests

    +

    Tests

    Procedure

    1. Examine inline styles, internal stylesheets, and external @@ -38,13 +38,13 @@ criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html index 6fbb90fded..7226b1b5ec 100644 --- a/techniques/failures/F40.html +++ b/techniques/failures/F40.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit -

    Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit -

    ID: F40

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit +

    Failure of Success Criterion 2.2.1 and 2.2.4 due to using meta redirect with a time limit +

    ID: F40

    Technology: failures

    Type: Failure

    When to Use

    All pages

    -

    Description

    +

    Description

    meta http-equiv of {time-out}; url=... is often used to @@ -11,14 +11,14 @@

    It is acceptable to use the meta element to create a redirect when the time-out is set to zero, since the redirect is instant and will not be perceived as a change of context. However, it is preferable to use - server-side methods to accomplish this. See Implementing automatic redirects on the server side + server-side methods to accomplish this. See Implementing automatic redirects on the server side instead of on the client side.

    -

    Examples

    +

    Examples

    -

    Description

    +

    The page below is a failure because it will redirect to the URI http://www.example.com/newpage after a time limit of 5 seconds.

    -
    + 
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>     
@@ -37,7 +37,7 @@
 </html>
    -

    Tests

    +

    Tests

    Procedure

    1. View a page.
      2. @@ -49,14 +49,14 @@
    2. If check #2 is false, this failure condition applies and content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html index 96c6bbddcf..b65bb8d31c 100644 --- a/techniques/failures/F41.html +++ b/techniques/failures/F41.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page

    Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page

    ID: F41

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page

    Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page

    ID: F41

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    meta http-equiv of refresh is often used to periodically refresh @@ -9,9 +9,9 @@ readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.

    -

    Examples

    +

    Examples

    -

    Description

    +

    This is a deprecated example that changes the user's page at regular intervals. Content developers should not use this technique to simulate "push" technology. Developers cannot predict how much time @@ -20,7 +20,7 @@ users to choose when they want the latest information. (The number in the content attribute is the refresh interval in seconds.)

    -
    + 
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
   <head>     
@@ -33,7 +33,7 @@
 </html>
    -

    Tests

    +

    Tests

    Procedure

    1. Find meta elements in the document.
      2. @@ -49,4 +49,4 @@ fails these Success Criteria.
    -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F42.html b/techniques/failures/F42.html index 45ac218f96..4c4dc46b1e 100644 --- a/techniques/failures/F42.html +++ b/techniques/failures/F42.html @@ -1,23 +1,23 @@ -Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

    Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

    ID: F42

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

    Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links

    ID: F42

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    This failure occurs when JavaScript event handlers are attached to elements to emulate links. A link created in this manner cannot be tabbed to from the keyboard and does not gain keyboard focus like other controls and/or links. If scripting events are used to emulate links, user agents including assistive technology may not be able to identify the links in the content as links. They may be recognized as interactive controls but still not recognized as links. Such elements do not appear in the links list generated by user agents or assistive technology.

    -

    It is possible to use the ARIA role attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the role attribute to identify anonymous elements as links is not recommended.

    +

    It is possible to use the ARIA role attribute to identify an anonymous element as link control for assistive technologies. However, best practice for ARIA calls for making use of native elements whenever possible, so the use of the role attribute to identify anonymous elements as links is not recommended.

    The a and area elements are intended to mark up links.

    -

    Examples

    +

    Examples

    -

    Example 1: Scripting a span element

    -

    Description

    +

    Scripting a span element

    +

    Scripted event handling is added to a span element so that it functions as a link when clicked with a mouse. Assistive technology does not recognize this element as a link.

    -
    + 
     <span onclick="location.href='newpage.html'">
     Fake link
@@ -25,12 +25,12 @@ 
    Example 1: Scripting a span element
    -

    Example 2: Scripting an img element

    -

    Description

    +

    Scripting an img element

    +

    Scripted event handling is added to an img element so that it functions as a link when clicked with a mouse. Assistive technology does not recognize this element as a link.

    -
    + 
        <img src="go.gif" 
    alt="go to the new page" 
@@ -38,15 +38,15 @@ 
    Example 2: Scripting an img element
    -

    Example 3: Scripting an img element, with keyboard +

    Scripting an img element, with keyboard support

    -

    Description

    +

    Scripted event handling is added to an img element so that it functions as a link. In this example, the link functionality can be invoked with the mouse or via the Enter key if the user agent includes the element in the tab chain. Nevertheless, the element will not be recognized as a link.

    -
    + 
     function doNav(url)
 {
@@ -63,9 +63,9 @@ 
    Example 3: Scripting an img element, with keyboard
    }
 }
    -

    Description

    +

    The markup for the image is:

    -
    + 
     <p>
 	<img src="bargain.jpg"
@@ -77,14 +77,14 @@ 
    Example 3: Scripting an img element, with keyboard
    -

    Example 4: Scripting a div element

    -

    Description

    +

    Scripting a div element

    +

    This example uses script to make a div element behave like a link. Although the author has provided complete keyboard access and separated the event handlers from the markup to enable repurposing of the content, the div element will not be recognized as a link by assistive technology.

    -
    + 
     window.onload = init;
 
@@ -116,16 +116,16 @@ 
    Example 4: Scripting a div element
    
 	window.location.href = strLocation;
 }
    -

    Description

    +

    The markup for the div element is:

    -
    + 
     <div id="linklike">
 View the results of the survey.
 </div>
    -

    Tests

    +

    Tests

    Procedure

    For all elements presented as links which use JavaScript event handlers to make the element emulate a link:

      @@ -139,14 +139,14 @@

      Example 4: Scripting a div element

      If check #2 is false then this failure condition applies and the content fails Success Criteria 2.1.1 and 2.1.3.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F43.html b/techniques/failures/F43.html index 06e5c2236d..64597913ec 100644 --- a/techniques/failures/F43.html +++ b/techniques/failures/F43.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.1 due to using structural markup in a way that does - not represent relationships in the content

    Failure of Success Criterion 1.3.1 due to using structural markup in a way that does - not represent relationships in the content

    ID: F43

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.3.1 due to using structural markup in a way that does + not represent relationships in the content

    Failure of Success Criterion 1.3.1 due to using structural markup in a way that does + not represent relationships in the content

    ID: F43

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    The objective of this technique is to describe a failure that occurs when structural markup is used to achieve a presentational effect, but indicates relationships that do not exist in the content. This is disorienting to @@ -15,14 +15,14 @@

    Though an element's semantic meaning is generally exposed to AT, the WAI-ARIA presentation role can be used to suppress the native semantics of an element so that they are not mapped to the accessibility API. Setting an element's role to presentation may avoid this failure by hiding that element's semantics from the user.

    -

    Examples

    +

    Examples

    -

    Example 1: A heading used only for visual effect

    -

    Description

    +

    A heading used only for visual effect

    +

    In this example, a heading element is used to display an address in a large, bold font. The address does not identify a new section of the document, however, so it should not be marked as a heading.

    -
    + 
     <p>Interested in learning more? Write to us at</p> 
 <h4>3333 Third Avenue, Suite 300 · New York City</h4>
@@ -31,8 +31,8 @@ 
    Example 1: A heading used only for visual effect
    -

    Example 2: Using heading elements for presentational effect

    -

    Description

    +

    Using heading elements for presentational effect

    +

    In this example, heading markup is used in two different ways: to convey document structure and to create visual effects. The h1 and h2 elements are used appropriately @@ -41,7 +41,7 @@

    Example 2: Using heading elements for presentational effect

    elements between the title and the abstract are used only for visual effect — to control the fonts used to display the authors' names and the date.

    -
    + 
     <h1>Study on the Use of Heading  Elements in Web Pages</h1>
 <h3>Joe Jones and Mary Smith<h3>
@@ -52,13 +52,13 @@ 
    Example 2: Using heading elements for presentational effect
    -

    Example 3: Using blockquote elements to provide additional +

    Using blockquote elements to provide additional indentation

    -

    Description

    +

    The following example uses blockquote for text that is not a quotation to give it prominence by indenting it when displayed in graphical browsers.

    -
    + 
     <p>After extensive study of the company Web site, the task force 
 identified the following common problem.</p>
@@ -73,7 +73,7 @@ 
    Example 3: Using blockquote elements to provide additional
    -

    Example 4: Using the fieldset and legend elements to +

    Using the fieldset and legend elements to give a border to text

     <fieldset>
@@ -82,7 +82,7 @@ 
    Example 4: Using the fieldset and legend elements to
 </fieldset>
    -

    Tests

    +

    Tests

    Procedure

    1. Check that the element's semantic meaning is exposed to assistive technology and appropriate for the content of the element.
      2. @@ -93,10 +93,10 @@

      Example 4: Using the fieldset and legend elements to
    2. If check #1 is false then this failure condition applies.

    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html index 9606cf64ed..60ed6a45bf 100644 --- a/techniques/failures/F44.html +++ b/techniques/failures/F44.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that - does not preserve meaning and operability

    Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that - does not preserve meaning and operability

    ID: F44

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that + does not preserve meaning and operability

    Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that + does not preserve meaning and operability

    ID: F44

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    This document describes a failure that occurs when the tab order does not follow logical relationships and sequences in the content.

    Focusable elements like links and form elements have a tabindex @@ -16,12 +16,12 @@ the content order to fall out of correspondence when the content is edited but the tabindex attributes are not updated to reflect the changes to the content.

    -

    Examples

    +

    Examples

    -

    Description

    +

    The following example incorrectly uses tabindex to specify an alternative tab order:

    -
    + 
     <ol>
    <li><a href="main.html" tabindex="1">Homepage</a></li>
@@ -30,23 +30,23 @@
    <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li>
 </ol>
    -

    Description

    +

    If this list is navigated by the tab key, the list is navigated in the order Homepage, chapter 3, chapter 2, chapter 1, which does not follow the sequence in the content.

    -
    +
    -

    Description

    +

    The tab order has been set explicitly in a Web page by providing tabindex attributes for all fields. Later, the page is modified to add a new field in the middle of the page, but the author forgets to add a tabindex attribute to the new field. As a result, the new field is at the end of the tab order.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. If tabindex is used, check that the tab order @@ -60,12 +60,12 @@ content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F46.html b/techniques/failures/F46.html index 79dad4ddcb..eb8d33002e 100644 --- a/techniques/failures/F46.html +++ b/techniques/failures/F46.html @@ -1,10 +1,10 @@ -Failure of Success Criterion 1.3.1 due to using th elements, +<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in - layout tables

    Failure of Success Criterion 1.3.1 due to using th elements, + layout tables

    Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in - layout tables

    ID: F46

    Technology: failures

    Type: Failure

    When to Use

    + layout tables

    ID: F46

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    The objective of this technique is to describe a failure that occurs when a table used only for layout includes either th elements, a summary attribute, or a caption element. This @@ -40,16 +40,16 @@ spoken, this information does not provide value and will only distract users navigating the content via a screen reader. Empty summary attributes are acceptable on layout tables, but not recommended.

    -

    Examples

    +

    Examples

    -

    Description

    +

    Here is a simple example that uses a table to layout content in a three column format. The navigation bar is in the left column, the main content in the middle column, and an additional sidebar is on the right. At the top is a page title. The example marks the page title as <th>, and provides a summary attribute indicating that the table is a layout table.

    -
    + 
      <table summary="layout table">
  <tr>
@@ -66,7 +66,7 @@
  </table>
    -

    Tests

    +

    Tests

    Procedure

    1. Examine the source code of the HTML or XHTML document for the @@ -91,8 +91,8 @@ and the content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F47.html b/techniques/failures/F47.html index dcdbce4d31..f61c47f583 100644 --- a/techniques/failures/F47.html +++ b/techniques/failures/F47.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 2.2.2 due to using the blink element

    Failure of Success Criterion 2.2.2 due to using the blink element

    ID: F47

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.2 due to using the blink element

    Failure of Success Criterion 2.2.2 due to using the blink element

    ID: F47

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    The blink element, while not part of the official HTML or XHTML specification, is supported by many user agents. It causes any text inside the element to blink at a predetermined rate. This cannot be interrupted by @@ -8,18 +8,18 @@ long as the page is displayed. Therefore, content that uses blink fails the Success Criterion because blinking can continue for more than three seconds.

    -

    Examples

    +

    Examples

    -

    Description

    +

    A product list page uses the blink element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.

    -
    + 
     <p>My Great Product <blink>Sale! $44,995!</blink></p>
    -

    Tests

    +

    Tests

    Procedure

    1. Examine code for the presence of the blink @@ -31,7 +31,7 @@
    2. If #1 is true, the content fails the Success Criterion.
    -

    Resources

    +

    Resources

    • diff --git a/techniques/failures/F48.html b/techniques/failures/F48.html index 44963cc436..64c4cb6ccf 100644 --- a/techniques/failures/F48.html +++ b/techniques/failures/F48.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.3.1 due to using the pre element to markup - tabular information

      Failure of Success Criterion 1.3.1 due to using the pre element to markup - tabular information

      ID: F48

      Technology: failures

      Type: Failure

      When to Use

      +Failure of Success Criterion 1.3.1 due to using the pre element to markup + tabular information

      Failure of Success Criterion 1.3.1 due to using the pre element to markup + tabular information

      ID: F48

      Technology: failures

      Type: Failure

      When to Use

      HTML and XHTML

      -

      Description

      +

      Description

      This document describes a failure caused by use of the HTML pre element to markup tabular information. The pre element preserves only visual formatting. If the pre element is used to @@ -13,9 +13,9 @@ data. Assistive technologies use the structure of an HTML table to present data to the user in a logical manner. This structure is not available when using the pre element.

      -

      Examples

      +

      Examples

      -

      Example 1: A schedule formatted with tabs between columns

      +

      A schedule formatted with tabs between columns 

        <pre>
  	Monday	Tuesday	Wednesday	Thursday	Friday
@@ -27,7 +27,7 @@ 
      Example 1: A schedule formatted with tabs between columns
      -

      Example 2: Election results displayed using preformatted text

      +

      Election results displayed using preformatted text

        <pre>
    CIRCUIT COURT JUDGE BRANCH 3
@@ -52,7 +52,7 @@ 
      Example 2: Election results displayed using preformatted text
      
  </pre>
      -

      Tests

      +

      Tests

      Procedure

      1. Check to see if the pre element is used
        2. @@ -66,6 +66,6 @@

        Example 2: Election results displayed using preformatted text

        content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F49.html b/techniques/failures/F49.html index 0ab2db0ed4..038e525287 100644 --- a/techniques/failures/F49.html +++ b/techniques/failures/F49.html @@ -1,8 +1,8 @@ - - Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

    - Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

    ID: F49

    Technology: failures

    Type: Failure

    When to Use

    + + Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

    + Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized

    ID: F49

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If a layout table is used, however, it is important that the content make sense when linearized.

    This failure occurs when a meaningful sequence of content conveyed through @@ -26,13 +26,13 @@ table. As a result, the meaningful sequence conveyed through visual presentation may not be perceivable when the content is spoken by a screen reader.

    -

    Examples

    +

    Examples

    -

    Example 1: A layout table that does not linearize correctly

    -

    Description

    +

    A layout table that does not linearize correctly

    +

    An advertisement makes clever use of visual positioning, but changes meaning when linearized.

    -
    + 
     <table>
 <tr>
@@ -43,17 +43,17 @@ 
    Example 1: A layout table that does not linearize correctly
    
   <td>XYZ gets you to the</td>
 </tr>
 </table>
    -

    Description

    +

    The reading order from this example would be:

    • XYZ mountaineering top!
    • XYZ gets you to the
    -
    +
    -

    Example 2: A layout table that separates a meaningful sequence when linearized

    -

    Description

    +

    A layout table that separates a meaningful sequence when linearized

    +

    A Web page from a museum exhibition positions a navigation bar containing a long list of links on the left side of the page. To the right of the navigation bar is an image of one of the pictures from @@ -66,7 +66,7 @@

    Example 2: A layout table that separates a meaningful sequence when lineariz

    A layout table is used to position the elements of the page. The links in the navigation bar are split into different cells in the leftmost column.

    -

    + 
     <table>
 <tr>
@@ -109,7 +109,7 @@ 
    Example 2: A layout table that separates a meaningful sequence when lineariz
 </tr>
 </table>
    -

    Description

    +

    The reading order from this example would be:

    • Link 1
      • @@ -132,9 +132,9 @@

      Example 2: A layout table that separates a meaningful sequence when lineariz describing the image, screen readers cannot present the content in a meaningful sequence corresponding to the sequence presented visually.

      -

    +
    -

    Tests

    +

    Tests

    Procedure

    1. @@ -154,6 +154,6 @@

      Example 2: A layout table that separates a meaningful sequence when lineariz content fails this Success Criterion.

    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F50.html b/techniques/failures/F50.html index c043280126..f4a361ac65 100644 --- a/techniques/failures/F50.html +++ b/techniques/failures/F50.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a - mechanism to stop the blinking at 5 seconds or less

    Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a - mechanism to stop the blinking at 5 seconds or less

    ID: F50

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a + mechanism to stop the blinking at 5 seconds or less

    Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a + mechanism to stop the blinking at 5 seconds or less

    ID: F50

    Technology: failures

    Type: Failure

    When to Use

    Technologies that support script-controlled blinking of content.

    -

    Description

    -

    Scripts can be used to blink content by toggling the content's visibility on and off at regular intervals. It is a failure for the script not to include a mechanism to stop the blinking at 5 seconds or earlier. See Using scripts to control blinking and stop it in five seconds or less for information about how to modify the technique to stop the blinking.

    -

    Examples

    +

    Description

    +

    Scripts can be used to blink content by toggling the content's visibility on and off at regular intervals. It is a failure for the script not to include a mechanism to stop the blinking at 5 seconds or earlier. See Using scripts to control blinking and stop it in five seconds or less for information about how to modify the technique to stop the blinking.

    +

    Examples

    -

    Description

    +

    The following example uses script to blink content, but the blink continues indefinitely rather than stopping after five seconds.

    -
    + 
     ...
 <script type="text/javascript">
@@ -36,7 +36,7 @@
 <span id="blink1">This content will blink</span>
    -

    Tests

    +

    Tests

    Procedure

    For each instance of blinking content:

      @@ -46,6 +46,6 @@

      Expected Results

      If #1 is false, then the content fails the Success Criterion.

      -

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F52.html b/techniques/failures/F52.html index d6c93e525b..6a7e05fcc8 100644 --- a/techniques/failures/F52.html +++ b/techniques/failures/F52.html @@ -1,22 +1,22 @@ -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.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

    Applies when scripting is used to open new windows.

    -

    Description

    +

    Description

    Some Web sites open a new window when a page is loaded, to advertise a product or service. The objective of this technique is to ensure that pages do not disorient users by opening up one or more new windows that automatically attain focus as soon as a page is loaded.

    -

    Examples

    +

    Examples

    There are multiple methods by which this failure may be triggered. Two common examples that are supported differently in various versions of user agents are listed as examples below.

    -

    Example 1:

    -

    Description

    +

    +

    The following example is commonly used in HTML 4.01 to open new windows when pages are loaded.

    -
    + 
     window.onload = showAdvertisement;
  function showAdvertisement()
@@ -25,11 +25,11 @@ 
    Example 1: 
    
  }
    -

    Example 2:

    -

    Description

    +

    +

    The following example commonly used in XHTML to open new windows when pages are loaded.

    -
    + 
     if (window.addEventListener) { 
     window.addEventListener("load", showAdvertisement, true);
@@ -42,7 +42,7 @@ 
    Example 2: 
    
 window.open('noscript.html', '_blank', 'height=200,width=150');
 }
    -

    Tests

    +

    Tests

    Procedure

    1. load a new page
      2. @@ -57,8 +57,8 @@

      Example 2:

      content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F54.html b/techniques/failures/F54.html index f331349da6..76fd013dcb 100644 --- a/techniques/failures/F54.html +++ b/techniques/failures/F54.html @@ -1,29 +1,29 @@ -Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event - handlers (including gesture) for a function

    Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event - handlers (including gesture) for a function

    ID: F54

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event + handlers (including gesture) for a function

    Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event + handlers (including gesture) for a function

    ID: F54

    Technology: failures

    Type: Failure

    When to Use

    Technologies that have event handlers specific to pointing devices.

    User Agent and Assistive Technology Support Notes

    • None listed.
    -

    Description

    +

    Description

    When pointing device-specific event handlers are the only mechanism available to invoke a function of the content, users with no vision (who cannot use devices such as mice that require eye-hand coordination) as well as users who must use alternate keyboards or input devices that act as keyboard emulators will be unable to access the function of the content.

    -

    Examples

    +

    Examples

    -

    Description

    +

    The following example is of an image that responds to a mouse click to go to another page. This is a failure because the keyboard cannot be used to move to the next page. <p><img onmousedown="nextPage();" src="nextarrow.gif" alt="Go to next page"></p>

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check to see whether pointing-device-specific event handlers are @@ -37,8 +37,8 @@
    -

    Related Techniques

    +

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F55.html b/techniques/failures/F55.html index 596688a9bc..c42890210b 100644 --- a/techniques/failures/F55.html +++ b/techniques/failures/F55.html @@ -1,14 +1,14 @@ - - Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

    - Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

    ID: F55

    Technology: failures

    Type: Failure

    When to Use

    + + Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

    + Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received

    ID: F55

    Technology: failures

    Type: Failure

    When to Use

    Applies to all content that supports script.

    User Agent and Assistive Technology Support Notes

    • None listed.
    -

    Description

    +

    Description

    Content that normally receives focus when the content is accessed by keyboard may have this focus removed by scripting. This is sometimes done when designer considers the system focus indicator to be unsightly. However, the system focus indicator is an important part of accessibility for keyboard users. In addition, this practice removes focus from the content entirely, which means that the content can only be operated by a pointing device such as a mouse.

    -

    Examples

    +

    Examples

    <input type="submit" onFocus="this.blur();">
    @@ -18,7 +18,7 @@ 
    <a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a>
    -

    Tests

    +

    Tests

    Procedure

    1. Use the keyboard to verify that you can get to all interactive @@ -33,4 +33,4 @@ fails the Success Criterion.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F58.html b/techniques/failures/F58.html index 9133a32ec4..cd24bfb001 100644 --- a/techniques/failures/F58.html +++ b/techniques/failures/F58.html @@ -1,12 +1,12 @@ -Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically - redirect pages after a time-out

    Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically - redirect pages after a time-out

    ID: F58

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically + redirect pages after a time-out

    Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically + redirect pages after a time-out

    ID: F58

    Technology: failures

    Type: Failure

    When to Use

    • Any server-side scripting language
    • Content does not meet the exceptions in the Success Criterion for permitted time limits.
    -

    Description

    +

    Description

    Server-side scripting languages allow developers to set the non-standard HTTP header "Refresh" with a time-out (in seconds) and a URI to which the browser is redirected after the specified time-out. If the time interval is @@ -18,13 +18,13 @@ new location}. It is also possible to omit the URI and obtain a periodically refreshing page, which causes the same problem. The HTTP header that is set is Refresh: {time in seconds}.

    -

    Examples

    +

    Examples

    -

    Description

    +

    The following example is a failure because a timed server-side redirect is implemented in Java Servlets or JavaServer Pages (JSP).

    -
    + 
     public void doGet (HttpServletRequest request, HttpServletResponse response)
       throws IOException, ServletException {
@@ -32,7 +32,7 @@
 	PrintWriter out = response.getWriter();
 	response.setHeader("Refresh", "10; URL=TargetPage.html");
 	out.println("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
-	 \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
+	 \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
 	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>");
@@ -40,23 +40,23 @@
    -

    Description

    +

    The following example is a failure because a timed server-side redirect is implemented in Active Server Pages (ASP) with VBScript.

    -
    + 
      <% @Language = "VBScript" %>
  <% option explicit 
  Response.Clear
  Response.AddHeader "Refresh", "5; URL=TargetPage.htm"
  %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  …
  <!--HTML code for content that is shown before the redirect is triggered-->
    -

    Tests

    +

    Tests

    Procedure

    1. When a Web page is rendered, check to see if it automatically @@ -70,10 +70,10 @@ and content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    • diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html index 7ad0657ee1..7dda46a716 100644 --- a/techniques/failures/F59.html +++ b/techniques/failures/F59.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

      Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

      ID: F59

      Technology: failures

      Type: Failure

      When to Use

      +Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

      Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control

      ID: F59

      Technology: failures

      Type: Failure

      When to Use

      HTML and XHTML

      -

      Description

      +

      Description

      This failure demonstrates how using generic HTML elements to create user interface controls can make the controls inaccessible to assistive technology. Assistive technologies rely on knowledge of the role and current @@ -19,10 +19,10 @@ 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.

      -

      Examples

      +

      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.

      +

      Examples

      -

      Description

      +

      The following example fails because it creates a checkbox using a span and an image.

         <p> 
@@ -46,9 +46,9 @@
   } 
   }

      A checkbox created in this manner will not work with assistive technology since there is no information that identifies it as a checkbox. In addition, this example is also not operable from the keyboard and would fail guideline 2.1.

      -
      +
      -

      Tests

      +

      Tests

      Procedure

      1. Examine the parsed source code for elements which have event handlers assigned within the mark-up or via scripting (indicating that the element is a user interface control).
        2. @@ -59,18 +59,18 @@

        Expected Results

        If check #2 AND check #3 are false, the failure condition applies.

        -

      Related Techniques

      +

      Resources

      +

      Resources

      diff --git a/techniques/failures/F60.html b/techniques/failures/F60.html index d99884005c..18cd6698cf 100644 --- a/techniques/failures/F60.html +++ b/techniques/failures/F60.html @@ -1,31 +1,31 @@ -Failure of Success Criterion 3.2.5 due to launching a new window when a user enters - text into an input field

      Failure of Success Criterion 3.2.5 due to launching a new window when a user enters - text into an input field

      ID: F60

      Technology: failures

      Type: Failure

      When to Use

      +Failure of Success Criterion 3.2.5 due to launching a new window when a user enters + text into an input field

      Failure of Success Criterion 3.2.5 due to launching a new window when a user enters + text into an input field

      ID: F60

      Technology: failures

      Type: Failure

      When to Use

      General

      -

      Description

      +

      Description

      This document describes a failure that occurs when a new window is created in response to a user filling in a text field for other than error reporting.

      -

      Examples

      +

      Examples

      -

      Example 1:

      -

      Description

      +

      +

      This is a deprecated example showing a failure: A user is filling in his mailing address. When he fills in his postal code, a new window opens containing advertisements for services available in his city.

      -
      +
      -

      Example 2:

      -

      Description

      +

      +

      This example is acceptable: A user is filling in his mailing address in a form. When he fills in the postal code field, a script runs to validate that it is a valid postal code. If the value is not valid, a window opens with instructions on how to fill in the field.

      -
      +
      -

      Tests

      +

      Tests

      Procedure

      1. Find all text input form fields
        2. @@ -42,8 +42,8 @@

        Example 2:

        the content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F61.html b/techniques/failures/F61.html index 521789a7f8..27216a6d3e 100644 --- a/techniques/failures/F61.html +++ b/techniques/failures/F61.html @@ -1,33 +1,33 @@ -Failure of Success Criterion 3.2.5 due to complete change of main content through an - automatic update that the user cannot disable from within the content

    Failure of Success Criterion 3.2.5 due to complete change of main content through an - automatic update that the user cannot disable from within the content

    ID: F61

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 3.2.5 due to complete change of main content through an + automatic update that the user cannot disable from within the content

    Failure of Success Criterion 3.2.5 due to complete change of main content through an + automatic update that the user cannot disable from within the content

    ID: 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 there is no option for a user to disable this behavior.

    +

    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.

    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

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    A news site automatically refreshes itself to ensure that it has the newest headlines. There is no option to disable this behavior.

    -
    +
    -

    Example 2:

    -

    Description

    +

    +

    A slideshow fills the entire viewport and advances to the next slide automatically. There is no stop button.

    -
    +
    -

    Example 3:

    -

    Description

    +

    +

    A search engine automatically generates results and dynamically updates content based on user input. There is no option to disable this behavior.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Open the source code in an appropriate editing tool.
      2. @@ -41,7 +41,7 @@

      Example 3:

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

    Tests

    +

    Tests

    Procedure

    1. Measure or estimate the amount of time that the average user spends on the page.
      2. @@ -63,6 +63,6 @@

      Example 3:

    2. If you reach step 8 then the content fails this success criterion.
    -

    Related Techniques

    Resources

    +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F63.html b/techniques/failures/F63.html index 2f9890c086..a3f62eac29 100644 --- a/techniques/failures/F63.html +++ b/techniques/failures/F63.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

    Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

    ID: F63

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

    Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

    ID: F63

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    +

    Description

    This describes a failure condition when the context needed for understanding the purpose of a link is located in content that is not programmatically determined link context. If the context for the link is not provided in one of the following ways:

    • in the same sentence, paragraph, list item, or table cell as the link
      • @@ -9,10 +9,10 @@

    then the user will not be able to find out where the link is going with any ease. If the user must leave the link to search for the context, the context is not programmatically determined link context and this failure condition occurs.

    -

    Examples

    +

    Examples

    -

    Example 1: A Link in an Adjacent Paragraph

    -

    Description

    +

    A Link in an Adjacent Paragraph

    +

    A news service lists the first few sentences of an article in a paragraph. The next paragraph contains the link "Read More...". Because the link is not in the same paragraph as the lead sentence, the user cannot easily discover what the link will let the user read more about.

    @@ -21,11 +21,11 @@ 
    Example 1: A Link in an Adjacent Paragraph
    
 
 <p><a href="ff.html">Read More...</a></p>
    -
    +
    -

    Example 2: A Link in an Adjacent Cell Within a Layout Table

    -

    Description

    +

    A Link in an Adjacent Cell Within a Layout Table

    +

    An audio site provides links to where its player can be downloaded. The information about what would be downloaded by the link is in the preceding row of the layout table, which is not programmatically determined context for the link.

      <table>
@@ -40,9 +40,9 @@ 
    Example 2: A Link in an Adjacent Cell Within a Layout Table
    
    </tr>
  </table>
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    Locate links where some additional link context is needed to understand the purpose of the link. For each link:

      @@ -56,17 +56,17 @@

      Example 2: A Link in an Adjacent Cell Within a Layout Table

    1. If check #1 AND check #2 are false, the content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F65.html b/techniques/failures/F65.html index b89a35c675..551fac0eed 100644 --- a/techniques/failures/F65.html +++ b/techniques/failures/F65.html @@ -1,21 +1,21 @@ -Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

    Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

    ID: F65

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

    Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

    ID: F65

    Technology: failures

    Type: Failure

    When to Use

    HTML and XHTML

    -

    Description

    -

    This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The alt attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported. For more information about accessibility support, see Documenting Accessibility Support. The Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification describes the Text Alternative Computation, for computing the text alternative from the HTML and WAI-ARIA attributes of an element.

    +

    Description

    +

    This describes a failure condition for text alternatives on images. If there is no source of text to provide an alternative for the image then assistive technologies are not able to identify the image or to convey its purpose to the user. The alt attribute continues to be the preferred way to provide alternative text for images. Appropriate WAI-ARIA attributes may be used to provide alternative text, as long as they are accessibility supported. For more information about accessibility support, see Documenting Accessibility Support. The Accessible Rich Internet Applications (WAI-ARIA) 1.0 Specification describes the Text Alternative Computation, for computing the text alternative from the HTML and WAI-ARIA attributes of an element.

    Some Assistive Technologies attempt to compensate for the missing text alternatives by reading the file name of the image. But it is insufficient to rely simply on the file name for many reasons. For example, file names may not be descriptive (e.g., images/nav01.gif), and technology specifications do not require descriptive file names. And some Assistive Technologies do not read the file name if there is no text alternative provided via HTML attributes.

    -

    Examples

    +

    Examples

    -

    Example 1: Missing text alternative

    -

    Description

    +

    Missing text alternative

    +

    In the code example below, the person using a screen reader would not know the purpose of the image.

    -
    + 
     <img src="../images/animal.jpg" />
    -

    Tests

    +

    Tests

    Procedure

    Identify img, area and input elements of type image. For each of these elements:

      @@ -24,13 +24,13 @@

      Example 1: Missing text alternative

    1. - Check if aria-labelledby attribute is present AND references one or more id elements in the page AND check if aria-labelledby is accessibility supported. + Check if aria-labelledby attribute is present AND references one or more id elements in the page AND check if aria-labelledby is accessibility supported.
    2. - Check if the aria-label attribute is present AND check if aria-label is accessibility supported. + Check if the aria-label attribute is present AND check if aria-label is accessibility supported.
    3. - Check if the title attribute is present AND check if title is accessibility supported. + Check if the title attribute is present AND check if title is accessibility supported.
    @@ -39,19 +39,19 @@

    Example 1: Missing text alternative

  • If all of #1, #2, #3 and #4 are false then this failure condition applies.
    • -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F66.html b/techniques/failures/F66.html index 41558ba74d..285dae8011 100644 --- a/techniques/failures/F66.html +++ b/techniques/failures/F66.html @@ -1,17 +1,17 @@ -Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

    Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

    ID: F66

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

    Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

    ID: F66

    Technology: failures

    Type: Failure

    When to Use

    Applies to all technologies

    -

    Description

    +

    Description

    This describes a failure condition for all techniques involving navigation mechanisms that are repeated on multiple Web pages within a set of Web pages (Success Criterion 3.2.3). If the mechanism presents the order of links in a different order on two or more pages, then the failure is triggered.

    -

    Examples

    +

    Examples

    -

    Example 1: An XHTML menu presenting a series of links that are in a different relative order on two different pages

    -

    Description

    +

    An XHTML menu presenting a series of links that are in a different relative order on two different pages

    +

    Examples of a navigation mechanism that presents links in a different order.

    Page 1 Menu

    -
    + 
     <div id="menu"> 
     <a href="Brazil.htm">Brazil</a><br />
@@ -20,11 +20,11 @@ 
    Example 1: An XHTML menu presenting a series of links that are in a differen
     <a href="Poland.htm">Poland</a> 
 </div>
    -

    Description

    +

    Page 2 Menu

    -
    + 
     <div id="menu"> 
     <a href="Canada.htm">Canada</a><br />
@@ -34,7 +34,7 @@ 
    Example 1: An XHTML menu presenting a series of links that are in a differen
 </div>
    -

    Tests

    +

    Tests

    Procedure

    1. @@ -55,4 +55,4 @@

      Example 1: An XHTML menu presenting a series of links that are in a differen

    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F67.html b/techniques/failures/F67.html index c01fdd9eae..e310f310b1 100644 --- a/techniques/failures/F67.html +++ b/techniques/failures/F67.html @@ -1,14 +1,14 @@ -Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

    Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

    ID: F67

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

    Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information

    ID: F67

    Technology: failures

    Type: Failure

    When to Use

    All technologies.

    -

    Description

    +

    Description

    The objective of this technique is to describe the failure that occurs when the long description for non-text content does not serve the same purpose or does not present the same information as the non-text content. This can cause problems for people who cannot interpret the non-text content because they rely on the long description to provide the necessary information conveyed by the non-text content. Without a long description that provides complete information, a person may not be able to comprehend or interact with the Web page.

    -

    Examples

    +

    Examples

    • An image showing the locations of venues for events at the Olympic Games displayed on a street map. The image also contains an icon for each type of sporting event held at each venue. The long description states, "Map showing the location of each Olympic venue. Skating, hockey and curling are held at the Winter Park Ice Arena, Downhill skiing and jumping are held at Snow Mountain, Gymnastics is held at the JumpUp Arena, Cross Country Skiing is held at the Kilometer Forest". While this description provides useful information, it does not convey the same information as the image because it provides no specific location information such as the address or the distance of each location from some fixed point. Note that long descriptions do not always need to be in prose form; sometimes the information may best be presented in a table or other alternate format.
    -

    Tests

    +

    Tests

    Procedure

    For all non-text content that requires a long description

      @@ -20,8 +20,8 @@
    1. If step #1 is false, then this failure condition applies and the content fails this Success Criterion.
    -

    Related Techniques

    +

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F68.html b/techniques/failures/F68.html index 2320fe5853..08153c500a 100644 --- a/techniques/failures/F68.html +++ b/techniques/failures/F68.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name -

    Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name -

    ID: F68

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name +

    Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name +

    ID: F68

    Technology: failures

    Type: Failure

    When to Use

    HTML controls

    -

    Description

    +

    Description

    This failure describes a problem that occurs when a form control does not have a name exposed to assistive technologies. The result is that some users will not be able to identify the purpose of the form control. The name can be provided in multiple ways, including the label element. Other options include use of the title attribute and aria-label which are used to directly provide text that is used for the accessibility name or aria-labelledby which indicates an association with other text on a page that is providing the name. Button controls can have a name assigned in other ways, as indicated below, but in certain situations may require use of label, title, aria-label, or aria-labelledby.

    Elements that can use an explicitly-associated label element are:

    @@ -25,10 +25,10 @@
  • Buttons (button elements or <input type="button">)
    • -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.

     <form>
@@ -42,11 +42,11 @@ 
    Example 1: 
    
  I have a cat <input type="checkbox" name="pet" value="cat">
 </form>
    -
    +
    -

    Example 2:

    -

    Description

    +

    +

    In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology.

     <form action="..." method="post"> 
@@ -58,18 +58,18 @@ 
    Example 2: 
    
 </p> 
 </form>
    -
    +
    -

    Example 3:

    -

    Description

    +

    +

    The search text box in the following code example does not have a programmatically determinable name. The name can be supplied with any of the approaches mentioned above.

     <input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">
    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For all input, textarea and select elements in the Web page (except inputs of type hidden, submit, reset, or button:

      @@ -91,7 +91,7 @@

      Example 3:

    1. If all options of check #1 are false, then this failure condition applies and the content fails the Success Criteria.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F69.html b/techniques/failures/F69.html index e41d0b2b14..78c80854e6 100644 --- a/techniques/failures/F69.html +++ b/techniques/failures/F69.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

    Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

    ID: F69

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

    Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured

    ID: F69

    Technology: failures

    Type: Failure

    When to Use

    HTML, XHTML and CSS

    -

    Description

    +

    Description

    The objective of this failure condition is to describe a problem that occurs when changing the size of text causes text to be clipped, truncated, or obscured, so that it is no longer available to the user. In general, this failure occurs when there is no way for a user agent's layout engine to honor all the layout hints in the HTML at the new font size. Some of the ways in which this can occur include:

    • Setting the overflow property of the enclosing element to hidden @@ -12,43 +12,49 @@

      The Working Group has discovered many misunderstandings about how to test this failure. We are planning to revise this failure in a future update. Until then, if the content passes the success criterion using any of the listed sufficient techniques, then it does not meet this failure.

      -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obsures the next paragraph.

    -
    + 
     <div style="font-size:100%; width:120px; height:100px; border: thin solid gray;"> 
   Now is the time for all good men to come to the aid of their country. 
 </div>
 <p>Now is the time for all good men to come to the aid of their country.</p>
    -

    Description

    +

    Illustration of example 1:

    +
    + +
    Example showing text that spills outside of its container, obscuring other text on the page.
    +
    - -
    +
    -

    Example 2:

    -

    Description

    +

    +

    This example is identical to the last one, except that the container is set to clip the text. The text is no longer bleeding into the next paragraph, but now it is truncated. This is also a failure.

    -
    + 
     <div style="font-size:100%; width:120px; height:100px; overflow: hidden; border: thin solid gray;">
  Now is the time for all good men to come to the aid of their country. 
 </div>
 <p>Now is the time for all good men to come to the aid of their country.</p>
    -

    Description

    +

    Illustration of example 2:

    +
    + +
    Example showing text that truncated due to resized text.
    +
    - -
    +
    -

    Tests

    +

    Tests

    Procedure

    The Working Group has discovered many misunderstandings about how to test this failure. We are planning to revise this failure in a future update. Until then, if the content passes the success criterion using any of the listed sufficient techniques, then it does not meet this failure.

    @@ -63,4 +69,4 @@

    Example 2:

  • If check #2 is false, then the failure condition applies and the content fails these Success Criteria.
    • -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F7.html b/techniques/failures/F7.html index 079e5a2535..f505d713b4 100644 --- a/techniques/failures/F7.html +++ b/techniques/failures/F7.html @@ -1,25 +1,25 @@ -Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, +<!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks - for more than five seconds

    Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, + for more than five seconds

    Failure of Success Criterion 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks - for more than five seconds

    ID: F7

    Technology: failures

    Type: Failure

    When to Use

    + for more than five seconds

    ID: F7

    Technology: failures

    Type: Failure

    When to Use

    Technologies that support blinking content within an object, applet, or a plug-in.

    -

    Description

    +

    Description

    When content that is rendered by a plug-in or contained in an applet blinks, there may be no way for the user agent to pause the blinking. If neither the plug-in, applet, nor the content itself provides a mechanism to pause the content, the user may not have sufficient time to read the content between blinks or it may be so distracting that the user will not be able to read other content on the page.

    -

    Examples

    +

    Examples

    • An applet displays an advertisement on a news site. The applet blinks key words in the advertisement in order to call the user's attention to it. The blinking cannot be paused through any user agent settings and the applet does not provide a mechanism to stop it.
    -

    Tests

    +

    Tests

    Procedure

    For each page that has blinking content in a plugin or applet:

      @@ -34,6 +34,6 @@ criterion.
    -

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F70.html b/techniques/failures/F70.html index 82754e0692..68220a198b 100644 --- a/techniques/failures/F70.html +++ b/techniques/failures/F70.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

    Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

    ID: F70

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

    Failure of Success Criterion 4.1.1 due to incorrect use of start and end tags or attribute markup

    ID: F70

    Technology: failures

    Type: Failure

    When to Use

    Markup languages: HTML, XHTML, and other SGML or XML-based technologies.

    -

    Description

    +

    Description

    The objective of this failure is to identify examples of markup errors in element tags that could cause assistive technology to be unable to generate a satisfactory model of the page. Different user agents may implement different heuristics to recover from errors, resulting in inconsistent presentations of the page between user agents.

    Some common types of problems with start and end tags that lead to this failure condition (though this is not an exhaustive list):

      @@ -11,63 +11,63 @@
    • Unquoted attribute values that have whitespace in the value.
    • Failure to provide a closing element tag for elements that do not accept empty-element syntax.
    -

    Examples

    +

    Examples

    -

    Example 1: Missing angle brackets in XHTML

    -

    Description

    +

    Missing angle brackets in XHTML

    +

    The following code fails because the opening tag is missing an angle bracket, and the intended boundary of the tag is unclear.

    -
    + 
     <p This is a paragraph</p>
    -

    Example 2: Missing slash on closing tag in XHTML

    -

    Description

    +

    Missing slash on closing tag in XHTML

    +

    The following code fails because the closing tag is missing the slash, making it look like it is in fact another opening tag.

    -
    + 
     <p>This is a paragraph<p>
    -

    Example 3: Unbalanced attribute quoting

    -

    Description

    +

    Unbalanced attribute quoting

    +

    The following code fails because the attribute value is missing the closing quote, which makes the boundary of the attribute-value pair unclear.

    -
    + 
     <input title="name type="text">
    -

    Example 4: Lack of whitespace between attributes

    -

    Description

    +

    Lack of whitespace between attributes

    +

    The following code fails because the there is not whitespace between attributes, which makes the boundary between attribute-value pairs unclear.

    -
    + 
     <input title="name"type="text">
    -

    Example 5: Unquoted attribute with whitespace value

    -

    Description

    +

    Unquoted attribute with whitespace value

    +

    The following code fails because an attribute value is not quoted and contains whitespace, which makes the boundary of the attribute-value pair unclear.

    -
    + 
     <input title=Enter name here type=text>
    -

    Example 6: Missing end tags in XHTML

    -

    Description

    +

    Missing end tags in XHTML

    +

    The following code fails because the closing tag of the first paragraph is missing, making it unclear whether the second paragraph is a child or sibling of the first.

    -
    + 
     <p>This is a paragraph
 <p>This is another paragraph</p>
    -

    Tests

    +

    Tests

    Procedure

    1. Check the source code of pages implemented in markup languages.
      2. @@ -79,4 +79,4 @@

      Example 6: Missing end tags in XHTML

    2. If check #2 is true, then the failure condition applies and the content does not meet this Success Criterion.
    -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F71.html b/techniques/failures/F71.html index 2d9149e973..e1bb85df76 100644 --- a/techniques/failures/F71.html +++ b/techniques/failures/F71.html @@ -1,34 +1,34 @@ -Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

    Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

    ID: F71

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

    Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative

    ID: F71

    Technology: failures

    Type: Failure

    When to Use

    Any technology.

    -

    Description

    +

    Description

    The objective of this failure condition is to avoid substituting characters whose glyphs look similar to the intended character, for that intended character. The Unicode character set defines thousands of characters, covering dozens of writing systems. While the glyphs for some of these characters may look like the glyphs for other characters in visual presentation, they are not processed the same by text-to-speech tools.

    For example, the characters U+0063 and U+03F2 both look like the letter "c", yet the first is from the Western alphabet and the second from the Greek alphabet and not used in Western languages. The characters U+0033 and U+04E0 both look like the number "3", yet the second is actually a letter from the Cyrillic alphabet.

    This failure also applies to the use of character entities. It is the incorrect character used because of its glyph representation that comprises a failure, not the mechanism by which that character is implemented.

    -

    Examples

    +

    Examples

    -

    Example 1: Characters

    -

    Description

    +

    Characters

    +

    The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string U+03f2 U+043E U+03BF U+006B, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.

    -
    + 
     ϲоοk
    -

    Example 2: Character entities

    -

    Description

    +

    Character entities

    +

    The following example, like the one above, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.

    -
    + 
     &#x03F2;&#x043E;&#x03BF;&#x006B;
    -

    Description

    +

    Working Example: "ϲоοk"

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check the characters or character entities used to represent text.
      2. @@ -40,4 +40,4 @@

      Example 2: Character entities

    2. If look-alike glyphs are used, and there is not a text alternative for any range of text that uses look-alike glyphs, then the content does not meet the Success Criterion.
    -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F72.html b/techniques/failures/F72.html index ef72110907..288cd541de 100644 --- a/techniques/failures/F72.html +++ b/techniques/failures/F72.html @@ -1,13 +1,13 @@ -Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative

    Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative

    ID: F72

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative

    Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative

    ID: F72

    Technology: failures

    Type: Failure

    When to Use

    Any technology.

    -

    Description

    -

    The objective of this failure condition is to avoid the use of ASCII art when a text alternative is not provided. Although ASCII art is implemented as a character string, its meaning comes from the pattern of glyphs formed by a visual presentation of that string, not from the text itself. Therefore ASCII art is non-text content and requires a text alternative. Text alternatives, or links to them, should be placed near the ASCII art in order to be associated with it.

    -

    Examples

    +

    Description

    +

    The objective of this failure condition is to avoid the use of ASCII art when a text alternative is not provided. Although ASCII art is implemented as a character string, its meaning comes from the pattern of glyphs formed by a visual presentation of that string, not from the text itself. Therefore ASCII art is non-text content and requires a text alternative. Text alternatives, or links to them, should be placed near the ASCII art in order to be associated with it.

    +

    Examples

    -

    Example 1: ASCII Art chart without a text alternative

    -

    Description

    +

    ASCII Art chart without a text alternative

    +

    The following ASCII art chart lacks a text alternative and therefore does not meet Success Criterion 1.1.1. Note this failure example does in fact cause this page to fail, but you may skip over the example.

    -
    + 
     <pre>
   %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
@@ -26,7 +26,7 @@ 
    Example 1:  ASCII Art chart without a text alternative 
    
 </pre>
    -

    Tests

    +

    Tests

    Procedure

    1. Access a page with ASCII art.
      2. @@ -38,4 +38,4 @@

      Example 1: ASCII Art chart without a text alternative

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

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F73.html b/techniques/failures/F73.html index febcfb3d2a..b5eff6b446 100644 --- a/techniques/failures/F73.html +++ b/techniques/failures/F73.html @@ -1,6 +1,6 @@ -Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

    Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

    ID: F73

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

    Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision

    ID: F73

    Technology: failures

    Type: Failure

    When to Use

    Any technology.

    -

    Description

    +

    Description

    The objective of this failure is to avoid situations in which people who cannot perceive color differences cannot identify links (when people with color vision can identify links). Link underlines or some other non-color visual distinction are required (when the links are discernible to those with color vision).

    While some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

    @@ -9,18 +9,18 @@

    If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.

    If the link is a different color and bold it would not fail because the boldness is not color dependent.

    -

    Examples

    +

    Examples

    -

    Example 1:

    -

    Description

    +

    +

    A Web page includes a large number of links within the body text. The links are styled so that they do not have underlines and are very similar in color to the body text. This would be a failure because users would be unable to differentiate the links from the body text.

    -
    +
    -

    Example 2:

    -

    Description

    +

    +

    The following code is an example of removing the underline from a link in a sentence or paragraph without providing another visual cue besides color.

    -
    + 
     <head>
 <style type="text/css">
@@ -37,14 +37,14 @@ 
    Example 2: 
    
 
 </body>
    -

    Description

    +

    If the visual cue is only provided on hover (as in the example above), it would still fail.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check that each link in the page that is identifiable by color (hue) is visually identifiable via some other means (e.g., underlined, bolded, italicized, sufficient difference in lightness, etc).
      2. @@ -55,7 +55,7 @@

      Example 2:

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

    Related Techniques

    +
    \ No newline at end of file diff --git a/techniques/failures/F74.html b/techniques/failures/F74.html index eb84c97c5e..74d48b775e 100644 --- a/techniques/failures/F74.html +++ b/techniques/failures/F74.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative

    Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative

    ID: F74

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative

    Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative

    ID: F74

    Technology: failures

    Type: Failure

    When to Use

    Pages that provide synchronized media alternatives to text.

    -

    Description

    +

    Description

    The objective of this failure is to avoid situations in which synchronized media alternatives are not labeled with the text for which they are alternatives. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives. However, they need to be clearly labeled with the text for which they substitute, so users can find them and so users who normally expect text alternatives to synchronized media know not to look for them.

    -

    Examples

    +

    Examples

    -

    Example 1: Synchronized media alternatives provided elsewhere on page

    -

    Description

    +

    Synchronized media alternatives provided elsewhere on page

    +

    A page with instructions to complete a tax form provides a prose description of the fields to complete, data to provide, etc. Additionally, a synchronized media alternative provides spoken instructions, with video of a person completing the section being discussed in the audio. Although both versions are provided on the page, the synchronized media version is provided elsewhere on the page and is not clearly labeled with the part of the text for which it is a substitute. This makes it difficult for users encountering the text to find it, and users encountering the video do not know where its text alternative is.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check pages that provide synchronized media alternatives to text.
      2. @@ -21,4 +21,4 @@

      Example 1: Synchronized media alternatives provided elsewhere on page

    2. If check #2 is false, then this failure condition applies and the content fails these Success Criteria.
    -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F75.html b/techniques/failures/F75.html index a2bebfcd30..b0580e8300 100644 --- a/techniques/failures/F75.html +++ b/techniques/failures/F75.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page

    Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page

    ID: F75

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page

    Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page

    ID: F75

    Technology: failures

    Type: Failure

    When to Use

    Any technology.

    -

    Description

    -

    The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.2 to provide captions and to Success Criterion 1.2. and 1.2.5.

    -

    Examples

    Tests

    +

    Description

    +

    The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.2 to provide captions and to Success Criterion 1.2.3 and 1.2.5.

    +

    Examples

    Tests

    Procedure

    1. Check for captions on synchronized media alternatives.
      2. @@ -19,4 +19,4 @@
    2. If check #2 is false, then this failure condition applies and the content fails these Success Criteria.
    -

    Related Techniques

    \ No newline at end of file +
    \ No newline at end of file diff --git a/techniques/failures/F77.html b/techniques/failures/F77.html index 5d03739ed9..7185240235 100644 --- a/techniques/failures/F77.html +++ b/techniques/failures/F77.html @@ -1,24 +1,24 @@ -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

    +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

    HTML5, and any XML-based markup languages including HTML 4 and SVG

    -

    Description

    +

    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.

    In most markup languages, ID values are attribute values, for example in HTML and SVG.

    -

    XML documents that use only the xml:id attribute as an ID attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.

    +

    XML documents that use only the xml:id attribute as an ID attribute, parsing the XML document with a validating parser that supports the xml:id specification is sufficient.

    -

    Examples

    +

    Examples

    -

    Description

    +

    An author uses an online validation service to check that all id attribute values are unique.

    -
    +
    -

    Description

    +

    A developer utilizes features in their authoring tool to ensure that id attribute values are unique.

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    1. Check that all values of type ID are unique in the Web page
      2. @@ -29,19 +29,19 @@
    2. If Step #1 is false, then this failure condition applies and the content fails the Success Criterion.
    -

    Related Techniques

    +

    Resources

    +

    Resources

    diff --git a/techniques/failures/F78.html b/techniques/failures/F78.html index 910d340371..6bcb7703f7 100644 --- a/techniques/failures/F78.html +++ b/techniques/failures/F78.html @@ -1,30 +1,30 @@ -Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

    Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

    ID: F78

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

    Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator

    ID: F78

    Technology: failures

    Type: Failure

    When to Use

    Any technology

    -

    Description

    +

    Description

    This describes a failure condition that occurs when the user agent's default visual indication of keyboard focus is turned off or rendered non-visible by other styling on the page without providing an author-supplied visual focus indicator. Turning off the focus indicator instructs the user agent not to present the focus indicator. Other styling may make it difficult to see the focus indicator even though it is present, such as outlines that look the same as the focus outline, or thick borders that are the same color as the focus indicator so it cannot be seen against them.

    -

    Examples

    +

    Examples

    -

    Example 1: The focus indicator is turned off with CSS

    -

    Description

    +

    The focus indicator is turned off with CSS

    +

    The following CSS example will remove the default focus indicator, which fails the requirement to provide a visible focus indicator.

    -
    + 
    :focus {outline: none}
    -

    Example 2: The outline of elements is visually similar to the focus indicator

    -

    Description

    +

    The outline of elements is visually similar to the focus indicator

    +

    The following CSS example will create an outline around links that looks the same as the focus indicator. This makes it impossible for users to determine which one in fact has the focus, even though the user agent does draw the focus indicator.

    -
    + 
    a {outline: thin dotted black}
    -

    Example 3: Elements have a border that occludes the focus indicator

    -

    Description

    +

    Elements have a border that occludes the focus indicator

    +

    The following CSS example creates a border around links that does not have enough contrast for the focus indicator to be seen when drawn on top of it. In this case the focus indicator is drawn just ouside the border, but as both are black and the border is thicker than the focus indicator, it no longer meets the definition of "visible".

    -
    + 
    a {border: medium solid black}
    -

    Tests

    +

    Tests

    Procedure

    1. Set the focus to all focusable elements on a page using the keyboard.
      2. @@ -36,4 +36,4 @@

      Example 3: Elements have a border that occludes the focus indicator

    2. #2 is true.
    -

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F79.html b/techniques/failures/F79.html index e1bfd328f5..f071ef9f12 100644 --- a/techniques/failures/F79.html +++ b/techniques/failures/F79.html @@ -1,11 +1,11 @@ -Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available

    Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available

    ID: F79

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available

    Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available

    ID: F79

    Technology: failures

    Type: Failure

    When to Use

    All technologies

    -

    Description

    +

    Description

    Whether a user interface component has focus is a particularly important facet of its state. Many types of assistive technology rely on tracking the current keyboard focus. Screen readers will move the user's point of regard to the focused user interface component, and screen magnifiers will change the display of the content so that the focused component is visible. If assistive technology is not notified when focus moves to a new component, the user will become confused when they attempt to interact with the wrong component.

    While user agents usually handle this functionality for standard controls, custom-scripted user interface components are responsible for using accessibility APIs to make focus information and notifications available.

    -

    Examples

    +

    Examples

    A custom menu displays menu items by rendering them explicitly, handling mouse and key events directly and highlighting the currently selected menu item. The programmer does not expose the menu item that has focus via the Accessibility API, so assistive technology can only determine that focus is somewhere within the menu and cannot determine which menu item has focus.

    -

    Tests

    +

    Tests

    Procedure

    1. Using the accessibility checker for the technology (or if that is not available, inspect the code or test with an assistive technology), check the controls to see if they expose the focus state through the accessibility API.
      2. @@ -17,7 +17,7 @@
    2. If Check #1 or Check #2 is false, then this failure condition applies and the content fails this Success Criterion.
    -

    Resources

    +

    Resources

    • diff --git a/techniques/failures/F8.html b/techniques/failures/F8.html index b4790b6bcb..e6e5d88655 100644 --- a/techniques/failures/F8.html +++ b/techniques/failures/F8.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important - sound effects

      Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important - sound effects

      ID: F8

      Technology: failures

      Type: Failure

      When to Use

      +Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important + sound effects

      Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important + sound effects

      ID: F8

      Technology: failures

      Type: Failure

      When to Use

      Applies to all technologies.

      -

      Description

      +

      Description

      This describes a failure condition for all techniques involving captions. If the "caption" does not include all of the dialogue (either verbatim or in essence) as well as all important sounds then the 'Captions' are not real @@ -10,18 +10,18 @@

      NOTE: Captions sometimes simplify the spoken text both to make it easier to read and to avoid forcing the viewer to read at very high speed. This is standard procedure and does not invalidate a caption.

      -

      Examples

      +

      Examples

      -

      Description

      +

      Examples of text streams that are not captions include:

      • text that contains the dialogue (possibly simplified dialogue) but that does not describe important sounds
      • text that omits dialogue during portions of the material
      -
      +
      -

      Tests

      +

      Tests

      Procedure

      1. View the material with captioning turned on.
        2. @@ -34,4 +34,4 @@
      2. If check #2 and check #3 are false, then this failure condition applies and the content fails the Success Criterion.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F80.html b/techniques/failures/F80.html index f61b36de3a..85989fbc24 100644 --- a/techniques/failures/F80.html +++ b/techniques/failures/F80.html @@ -1,15 +1,15 @@ -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

    +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

    -

    Description

    +

    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.

    -

    Examples

    +

    Examples

    -

    Example 1: A Contact Form

    -

    Description

    +

    A Contact Form

    +

    A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. The heading, introductory text and form control labels have been implemented in a scalable way but the form controls themselves have not.

    The XHTML component:

    -
    + 
     <h1>Contact Us</h1>
  <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
  <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
@@ -17,14 +17,14 @@ 
    Example 1: A Contact Form
    
  <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
  <label for="email">Email</label><input type="text" name="email" id="email" /><br />
  <input type="submit" name="Submit" value="Submit" id="Submit" />
    -

    Description

    +

    The CSS component:

    -
    + 
     h1 { font-size: 2em; }
  p, label { font-size: 1em; }
  input {font-size: 12pt}
    -

    Tests

    +

    Tests

    Procedure

    1. Enter some text into text-based form controls that receive user entered text.
      2. @@ -37,4 +37,4 @@

      Example 1: A Contact Form

    2. If check #3 is false, then the failure condition applies and the content fails these Success Criteria.
    -

    Related Techniques

    Resources

    \ No newline at end of file +

    Resources

    \ No newline at end of file diff --git a/techniques/failures/F81.html b/techniques/failures/F81.html index 306873a426..d35fac5c09 100644 --- a/techniques/failures/F81.html +++ b/techniques/failures/F81.html @@ -1,8 +1,8 @@ -Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

    Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

    ID: F81

    Technology: failures

    Type: Failure

    When to Use

    +Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

    Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only

    ID: F81

    Technology: failures

    Type: Failure

    When to Use

    All technologies

    -

    Description

    +

    Description

    This objective of this technique is to describe the failure that occurs when a required field or an error field is marked with color differences only, without an alternate way to identify the required field or error field. This can cause problems for people who are blind or colorblind, because they may not be able to perceive the color differences that indicate which field is required or which field is causing an error.

    -

    Examples

    +

    Examples

    • A user is completing an online form, and the phone number field is required. To indicate that the phone number field is required, the label "Phone Number" is displayed in a color different from the color used for optional fields, without any other indication that "Phone Number" is a required field. A blind or colorblind user may not be able to identify that "Phone Number" is a required field.
    • A user submits an online form and leaves a required field blank, resulting in an error. The form field that caused the error is indicated by red text only, without an additional non-color indication that the field caused an error.
      • @@ -10,7 +10,7 @@

      In both examples, the color could be used without failure if the text was sufficiently different in visual presentation (e.g. bold or in a different font) that it would be easily differentiated from the surrounding text if the color were removed. It would also not fail if the color chosen had sufficient luminosity difference (lightness) from the other text that it would be easily be seen as different if viewed in black and white. In these cases - the information would not be displayed in color (hue) alone but also in "presentation" or "lightness" respectively.

      -

    Tests

    +

    Tests

    Procedure

    For all required fields or error fields in the Web page that are identified using color differences:

      diff --git a/techniques/failures/F82.html b/techniques/failures/F82.html index 2fdf50129c..f2d59338c8 100644 --- a/techniques/failures/F82.html +++ b/techniques/failures/F82.html @@ -1,15 +1,15 @@ -Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

      Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

      ID: F82

      Technology: failures

      Type: Failure

      When to Use

      +Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

      Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label

      ID: F82

      Technology: failures

      Type: Failure

      When to Use

      Any technology

      -

      Description

      +

      Description

      This failure ensures that people with visual or cognitive disabilities will recognize phone number fields and understand what information to provide to fill in the fields. Phone numbers are frequently formatted in fixed, distinctive ways, and authors may feel that just providing visual formatting of the fields will be sufficient to identify them. However, even if all the fields have programmatically determined names, a text label must also identify the set of fields as a phone number.

      -

      Examples

      +

      Examples

      -

      Example 1:

      -

      Description

      +

      +

      In the United States, phone numbers are broken into a three digit area code, a three digit prefix, and a four digit extension. A web page creates fixed length text input fields for the three parts of the phone number, surrounding the first field with parenthesis and separating the second and third fields with a dash. Because of this formatting, some users recognize the fields as a phone number. However, there is no text label for the phone number on the web page. This is because the label for each field will be the closest preceding text, so the three fields would be labeled "(", ")" , and "-" respectively.

      -
      +
      -

      Tests

      +

      Tests

      Procedure

      1. For each set of phone number fields in the web page that represents a single phone number, check that the set of fields are labeled with a visible text label that is positioned near the set of phone number fields.
        2. diff --git a/techniques/failures/F83.html b/techniques/failures/F83.html index b7cbb74a53..b28ba69d3c 100644 --- a/techniques/failures/F83.html +++ b/techniques/failures/F83.html @@ -1,22 +1,22 @@ -Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

        Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

        ID: F83

        Technology: failures

        Type: Failure

        When to Use

        +Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

        Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

        ID: F83

        Technology: failures

        Type: Failure

        When to Use

        Any technology

        -

        Description

        +

        Description

        This failure occurs when people with low vision are not able to read text that is displayed over a background image. When there is not sufficient contrast between the background image and the text, features of the background image can be confused with the text making it difficult to accurately read the text.

        To satisfy Success Criterion 1.4.3 and 1.4.6, there must be sufficient contrast between the text and its background. For pictures, this means that there would need to be sufficient contrast between the text and those parts of the image that are most like the text and behind the text.

        -

        Examples

        +

        Examples

        -

        Example 1: Failure Example 1

        -

        Description

        +

        Failure Example 1

        +

        Black text overlays an image with black lines. The lines cross behind the letters making F's look like E's etc.

        -
        +
        -

        Example 2: Failure Example 2

        -

        Description

        -

        Black text overlays an image with with dark gray areas. Wherever the text crosses a dark gray area the contrast is so bad that the text cannot be read.

        -
        +

        Failure Example 2

        + +

        Black text overlays an image with dark gray areas. Wherever the text crosses a dark gray area the contrast is so bad that the text cannot be read.

        +
        -

        Tests

        +

        Tests

        Procedure

        1. diff --git a/techniques/failures/F84.html b/techniques/failures/F84.html index 4dedff3f17..347781f6bc 100644 --- a/techniques/failures/F84.html +++ b/techniques/failures/F84.html @@ -1,9 +1,9 @@ -Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

          Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

          ID: F84

          Technology: failures

          Type: Failure

          When to Use

          +Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

          Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

          ID: F84

          Technology: failures

          Type: Failure

          When to Use

          HTML and XHTML

          -

          Description

          +

          Description

          This failure describes a common condition where links such as "click here" or "more" are used as anchor elements where you need to have the surrounding text to understand their purpose and where there isn't any mechanism to make the destination clear by itself, such as a button to expand the link text.

          Many blind people who use screen readers call up a dialog box that has a list of links from the page. They use this list of links to decide where they will go. But if many of the links in that list simply say "click here" or "more" they will be unable to use this feature in their screen reader, which is a core navigation strategy. That's why it's a failure of 2.4.9 to not provide any way of allowing them to know the destination from the link text alone. It is also true for people who tab through links. If all they hear as they tab through the document is "click here, click here, click here etc." they will become confused.

          -

          Examples

          +

          Examples

          <a href="file110.htm">Click here</a> for more information on the Rocky Mountains.
          @@ -12,7 +12,7 @@ The middle east peace meetings have yielded fruitful dialogue. <a href="r4300.htm">read more</a>
          -

          Tests

          +

          Tests

          Procedure

          1. Examine each link on the page.
            2. diff --git a/techniques/failures/F85.html b/techniques/failures/F85.html index c14761afc8..bba5c117b4 100644 --- a/techniques/failures/F85.html +++ b/techniques/failures/F85.html @@ -1,21 +1,21 @@ -Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

            Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

            ID: F85

            Technology: failures

            Type: Failure

            When to Use

            +Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

            Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order

            ID: F85

            Technology: failures

            Type: Failure

            When to Use

            All technologies.

            -

            Description

            +

            Description

            This describes the failure condition that results when a Web page opens a dialog or menu interface component embedded on the page in a way that makes it difficult for a keyboard user to operate because of its position in the sequential navigation order. When the user opens the dialog or menu embedded on the page by activating a button or link, his next action will be to interact with the dialog or menu. If focus is not set to the dialog or menu, and it is not adjacent to the trigger control in the sequential navigation order, it will be difficult for the keyboard user to operate the dialog or menu.

            -

            Examples

            +

            Examples

            -

            Example 1: Adding a dialog or menu embedded on the page to the end of the sequential navigation order

            -

            Description

            +

            Adding a dialog or menu embedded on the page to the end of the sequential navigation order

            +

            When a DHTML menu or dialog is activated, it is created dynamically, positioned visually near the trigger, and appended to the end of the DOM. Because it is appended to the end of the DOM, it is at the end of the sequential navigation order. The user must tab through the rest of the web page before he can interact with the dialog or menu.

            -
            +
            -

            Example 2: Setting focus to the document after dismissing a menu embedded on the page

            -

            Description

            +

            Setting focus to the document after dismissing a menu embedded on the page

            +

            When a menu is dismissed, it is removed or hidden from the web page and focus is set to the document. The user must tab from the beginning of the navigation sequence to reach the point from which the menu was opened.

            -
            +
            -

            Tests

            +

            Tests

            Procedure

            For each menu or dialog embedded on a Web page that is opened via a trigger control:

              @@ -41,6 +41,6 @@

              Example 2: Setting focus to the document after dismissing a menu embedded on
            1. If both points under step 2 are false, then this failure condition applies and the content fails this success criterion.

            -

            Related Techniques

            +
            \ No newline at end of file diff --git a/techniques/failures/F86.html b/techniques/failures/F86.html index 54a0d3af7c..fcdad82bc5 100644 --- a/techniques/failures/F86.html +++ b/techniques/failures/F86.html @@ -1,35 +1,35 @@ -Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number

            Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number

            ID: F86

            Technology: failures

            Type: Failure

            When to Use

            +Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number

            Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number

            ID: F86

            Technology: failures

            Type: Failure

            When to Use

            General

            -

            Description

            +

            Description

            This describes a failure condition of Success Criterion 4.1.2 where some or all of the parts of multi-part form field do not have names. Often there is a label for the multi-part field, which is either programatically associated with the first part, or not programatically associated with any parts.

            A name does not necessarily have to be visible, but is visible to assistive technologies.

            -

            Examples

            +

            Examples

            -

            Description

            +

            A US telephone number consists of a 3-digit area code, a 3-digit prefix, and a 4-digit suffix. They are typically formatted as follows ([area code]) [prefix]-[suffix], such as (206) 555-1212. Often, forms asking for a telephone number will include 3 separate fields, but with a single label, such as:

            Phone number: 
 (<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

            The failure occurs when there is not a name for each of the 3 fields in the Accessibility API. A user with assistive technology will experience these as three undefined text fields. Some assistive technologies will read the punctuation as identification for the text fields, which can be even more confusing. In the case of a 3-field US phone number, some assistive technologies would name the fields "(", ")" and "-", which is not very useful.

            -
            +
            -

            Description

            +

            The same US telephone number. In this case, the label is not programatically associated with any of the parts. 

            Phone number: (<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

            A user with assistive technology will experience these as three undefined text fields.

            -
            +
            -

            Description

            +

            The same US telephone number. In this case, the label is programatically associated with the first part.

            <label for="area">Phone number:</label> 
 (<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">

            A user with assistive technology will be led to believe that the first field is for the entire phone number, and will experience the second and third fields as undefined text fields.

            -
            +
            -

            Tests

            +

            Tests

            Procedure

            For each subfield in the multi-part form field:

              @@ -41,7 +41,7 @@
            1. If check #1 is false for any subfield, then the failure condition applies and the content fails the success criterion.
            -

            Related Techniques

            +

            Resources

            +

            Resources

            • diff --git a/techniques/failures/F87.html b/techniques/failures/F87.html index 1cc1d0dda9..708938c6cc 100644 --- a/techniques/failures/F87.html +++ b/techniques/failures/F87.html @@ -1,21 +1,21 @@ -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

              +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

              +

              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 or turn off style information in order to view content according to their needs, assistive technologies 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.

              -

              Examples

              +

              Examples

              -

              Description

              +

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

              Description

              +

              It is used in this excerpt:

              -
              + 
               <p class="jim">
  <q>Do you think he's going to make it?</q>
 </p>
@@ -24,15 +24,15 @@
 </p>
              -

              Description

              +

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

              Description

              +

              It is used in this excerpt:

              -
              + 
               <p class="fact">
  The defendant was at the scene of the crime when it occurred. 
 </p>
@@ -40,7 +40,7 @@
  The defendant committed the crime. 
 </p>
              -

              Tests

              +

              Tests

              Procedure

              1. Examine all content inserted through use of the :before and :after pseudo-elements and the content property
                2. @@ -53,13 +53,13 @@
              2. If checks #2 or #3 are false, then this failure condition applies and the content fails this Success Criterion.
            -

            Related Techniques

            +

            Resources

            +

            Resources

            diff --git a/techniques/failures/F88.html b/techniques/failures/F88.html index a9d72f192f..74c55d986a 100644 --- a/techniques/failures/F88.html +++ b/techniques/failures/F88.html @@ -1,12 +1,12 @@ -Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

            Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

            ID: F88

            Technology: failures

            Type: Failure

            When to Use

            +Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

            Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

            ID: F88

            Technology: failures

            Type: Failure

            When to Use

            All technologies.

            -

            Description

            +

            Description

            Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).

            -

            Examples

            +

            Examples

            -

            Description

            +

            In the following example of a failure, the HTML align attribute is used to create justified text.

            -
            + 
             
 <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus 
 nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec 
@@ -17,9 +17,9 @@
 </p>
            -

            Description

            +

            In this example of a failure, the CSS text-align property is used to create justified text.

            -
            + 
             
 ...
 p {text-align: justify}
@@ -33,7 +33,7 @@
 primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo 
 justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>
            -

            Tests

            +

            Tests

            Procedure

            1. Open the page in a common browser.
              2. @@ -45,6 +45,6 @@
            2. If test procedure #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.
            -

            Related Techniques

            +
            \ No newline at end of file diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html index 2b28b94c3c..4ce3569e94 100644 --- a/techniques/failures/F89.html +++ b/techniques/failures/F89.html @@ -1,14 +1,14 @@ -Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link

            Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link

            ID: F89

            Technology: failures

            Type: Failure

            When to Use

            +Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link

            Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link

            ID: F89

            Technology: failures

            Type: Failure

            When to Use

            Content that contains links.

            -

            Description

            -

            This failure condition occurs when a link contains only non-text content, such as an image, and that link cannot be identified by an accessible name. The accessible name for a link is defined according to the Accessible Name Calculation.

            -

            This also applies when both text and images are used separately on a page to link to the same target. In this case success technique H2: Combining adjacent image and text links for the same resource is the recommended approach to reduce the number of separate links and the undesirable redundancy.

            -

            Examples

            +

            Description

            +

            This failure condition occurs when a link contains only non-text content, such as an image, and that link cannot be identified by an accessible name. The accessible name for a link is defined according to the Accessible Name Calculation.

            +

            This also applies when both text and images are used separately on a page to link to the same target. In this case success technique H2: Combining adjacent image and text links for the same resource is the recommended approach to reduce the number of separate links and the undesirable redundancy.

            +

            Examples

            -

            Example 1: HTML Search Results

            -

            Description

            +

            HTML Search Results

            +

            A search site returns search results that include both a text link and an image link to the match site. The image has a null alt attribute, since the result already contains a link with a text description. However, the screen reader does not ignore the image link but uses heuristics to find some text that might describe the purpose of the link. For example, the screen reader might announce, "football dot gif Football Scorecard."

            -
            + 
             <a href="scores.html">
    <img src="football.gif" alt="" />
  </a>
@@ -17,7 +17,7 @@ 
            Example 1: HTML Search Results
            
  </a>
 }
            -

            Tests

            +

            Tests

            Procedure

            1. Check whether the link contains only non-text content.
              2. @@ -31,14 +31,14 @@

              Example 1: HTML Search Results

            2. If all checks are true, then this failure condition applies and the content fails the success criteria.
            -

            Related Techniques

            +

            Resources

            +

            Resources

            • diff --git a/techniques/failures/F9.html b/techniques/failures/F9.html index 53acdf6777..d5db09ffcd 100644 --- a/techniques/failures/F9.html +++ b/techniques/failures/F9.html @@ -1,21 +1,21 @@ -Failure of Success Criterion 3.2.5 due to changing the context when the user removes - focus from a form element

              Failure of Success Criterion 3.2.5 due to changing the context when the user removes - focus from a form element

              ID: F9

              Technology: failures

              Type: Failure

              When to Use

              +Failure of Success Criterion 3.2.5 due to changing the context when the user removes + focus from a form element

              Failure of Success Criterion 3.2.5 due to changing the context when the user removes + focus from a form element

              ID: F9

              Technology: failures

              Type: Failure

              When to Use

              General.

              -

              Description

              +

              Description

              This document describes a failure that occurs when removing focus from a form element, such as by moving to the next element, causes a change of context.

              -

              Examples

              +

              Examples

              -

              Example 1:

              -

              Description

              +

              +

              The user is going through the form filling out the fields in order. When he moves from the third field to the forth, the form submits.

              -
              +
              -

              Tests

              +

              Tests

              Procedure

              1. Find all form elements.
                2. @@ -34,9 +34,9 @@

                Example 1:

                the content fails the Success Criterion.
            -

            Related Techniques

            +

            Resources

            +

            Resources

            \ No newline at end of file diff --git a/techniques/failures/F90.html b/techniques/failures/F90.html index e1722180d1..ec25d25a26 100644 --- a/techniques/failures/F90.html +++ b/techniques/failures/F90.html @@ -1,14 +1,14 @@ -Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

            Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

            ID: F90

            Technology: failures

            Type: Failure

            When to Use

            +Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

            Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes

            ID: F90

            Technology: failures

            Type: Failure

            When to Use

            HTML and XHTML.

            -

            Description

            +

            Description

            One way for authors to explicitly associate header cells to data cells is by using the id and headers attributes. These allow the author to associate multiple header cells to a particular data cell, which can be necessary when complex data tables with more than one level of heading are used.

            The failure occurs when the relationship between data cells and corresponding header cells cannot be programmatically determined correctly because the association of id and headers attributes is faulty. This can happen, for example, when copying code within tables and forgetting to update the code.

            -

            Examples

            -

            Note: The example below is based on the complex data table presented as example 1 of Technique H43: Using id and headers attributes to associate data cells with header cells in data tables. +

            Examples

            +

            Note: The example below is based on the complex data table presented as example 1 of Technique H43: Using id and headers attributes to associate data cells with header cells in data tables.

            -

            Example 1: Table content not correctly associated to nested headers

            -

            Description

            +

            Table content not correctly associated to nested headers

            +

            In this example, nested headers are used, but the content cells are incorrectly associated via the id and headers attributes. All cells reference top level header 'Exams' (id="e") - this isn't correct for the last three columns which should reference header 'Projects'. Also, the referencing of the second level column headers has been accidentally swapped even though in this example this makes no difference as the contents (1, 2, Final) are repeated.

            Example Code:

            @@ -38,11 +38,11 @@

            Example 1: Table content not correctly associated to nested headers

            </tr> </table> -

            - Failure example of table incorrectly associating headers attributes in table content (td) to table headers (th).

            -
            +

            + Failure example of table incorrectly associating headers attributes in table content (td) to table headers (th).

            +
            -

            Tests

            +

            Tests

            Procedure

            1. For tables that associate data cells to header cells via the id and headers attributes, check that the programmatic association is correct. @@ -54,7 +54,7 @@

              Example 1: Table content not correctly associated to nested headers

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

            Related Techniques

            +
          -

          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.

          +

          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.

          -

          Example 1: Using automatically generated links

          -

          Description

          +

          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" 
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+  "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>
@@ -77,20 +80,20 @@ 
          Example 1: Using automatically generated links
          
     </div>
   </body>
 </html>
          -

          Description

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

          Description

          +

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

          -
          +
          -

          Example 2: Explicitly identifying existing focusable html element

          -

          Description

          +

          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
            • @@ -103,19 +106,19 @@

            Example 2: Explicitly identifying existing focusable html element

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

          Description

          +

          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" 
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+  "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>
@@ -150,16 +153,16 @@ 
          Example 2: Explicitly identifying existing focusable html element
          
     <a href="http://www.lipsum.com/">lorem</a>
   </body>
 </html>
          -

          Description

          +

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

          Description

          +

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

          -
          +
          -

          Tests

          +

          Tests

          Procedure

          For a Flash content on a web page:

            @@ -174,11 +177,11 @@

            Example 2: Explicitly identifying existing focusable html element

          1. Checks 3 and 4 are true
          -

          Resources

          +

          Resources

          • - Example source containing the SWFFocus class + Example source containing the SWFFocus class
          • Flash and keyboard access across browsers by Henny Swan
            • diff --git a/techniques/flash/FLASH18.html b/techniques/flash/FLASH18.html index 644012839d..2980b6084f 100644 --- a/techniques/flash/FLASH18.html +++ b/techniques/flash/FLASH18.html @@ -1,14 +1,17 @@ -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

            -

            -

            Description

            +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

            +

            Examples

            -

            Example 1: Providing a button in the Flash to stop sound

            -

            Description

            +

            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;
@@ -47,16 +50,16 @@ 
            Example 1: Providing a button in the Flash to stop sound
            
     }
   }
 }
            -

            Description

            -

            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.

            -
            + +

            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.

            +
            -

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

            -

            Description

            +

            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;
@@ -90,12 +93,12 @@ 
            Example 2: Providing a button in the HTML before the Flash object to stop so
     }
   }
 }
            -

            Description

            + HTML code for Example 2 -
            + 
            <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
-  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+  "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"/>
@@ -131,11 +134,11 @@ 
            Example 2: Providing a button in the HTML before the Flash object to stop so
   </body>
 </html>
            -

            Description

            -

            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.

            -
            + +

            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

            +

            Tests

            Procedure

            For Flash movies that automatically start playing sound after loading:

              @@ -150,6 +153,6 @@

              Example 2: Providing a button in the HTML before the Flash object to stop so
            1. Check #1 or #2 is true, and #4 is true.

          -

          Related Techniques

          +
          \ No newline at end of file diff --git a/techniques/flash/FLASH19.html b/techniques/flash/FLASH19.html index 95f75468ae..308d8ed4b7 100644 --- a/techniques/flash/FLASH19.html +++ b/techniques/flash/FLASH19.html @@ -1,14 +1,17 @@ -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

          -

          -

          Description

          +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

          +

          Examples

          -

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

          -

          Description

          +

          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;
 
@@ -45,11 +48,11 @@ 
          Example 1: Using ActionScript to offer a time limit extension before the tim
   if (e && e.detail && e.detail == Alert.YES)
   resetTimeout();
 }
          -

          Description

          -

          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.

          -
          + +

          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

          +

          Tests

          Procedure

          1. load the page and start a timer that is 20 seconds less than the time limit.
            2. @@ -59,6 +62,6 @@

            Example 1: Using ActionScript to offer a time limit extension before the tim

            Expected Results

            Check #2 is true

            -

          Related Techniques

          +
          \ No newline at end of file diff --git a/techniques/flash/FLASH2.html b/techniques/flash/FLASH2.html index 1ab99f8f08..a1202b5c8c 100644 --- a/techniques/flash/FLASH2.html +++ b/techniques/flash/FLASH2.html @@ -1,12 +1,15 @@ -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

          -

          -

          Description

          +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

          +

          Examples

          -

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

          -

          Description

          +

          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. @@ -16,21 +19,21 @@

            Example 1: Applying a Description for a symbol (graphic, button or movieclip

          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. +
          The Accessibility panel in the Flash authoring environment.
          -

          +
          -
          +
          -

          Example 2: Applying Description programmatically in ActionScript 2.0

          -

          Description

          +

          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";
@@ -41,11 +44,11 @@ 
          Example 2: Applying Description programmatically in ActionScript 2.0 
          
   is in sales order.";
          -

          Example 3: Applying Description programmatically in ActionScript 3.0

          -

          Description

          +

          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";
@@ -55,7 +58,7 @@ 
          Example 3: Applying Description programmatically in ActionScript 3.0
          
   with 195.The primary use of the chart is to show leaders, so the description\
   is in sales order.";
          -

          Tests

          +

          Tests

          Procedure

          1. Publish the SWF file
            2. @@ -69,10 +72,10 @@

            Example 3: Applying Description programmatically in ActionScript 3.0

            Expected Results

            #6 is true.

            -

          Related Techniques

          +

          Resources

          +

          Resources

          • diff --git a/techniques/flash/FLASH20.html b/techniques/flash/FLASH20.html index 580324f012..7fda900691 100644 --- a/techniques/flash/FLASH20.html +++ b/techniques/flash/FLASH20.html @@ -1,6 +1,9 @@ -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

            -

            -

            Description

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

            @@ -21,12 +24,12 @@
          • 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).
          • Using ActionScript, associate form component instances with your customized version of focusRectSkin. This can be achieved using the setStyle method.
        -

        - +

        + - editing a duplicate of focusRectSkin +
        editing a duplicate of focusRectSkin
        -

        +

      2. Modifying Existing Skin

        @@ -44,10 +47,10 @@

      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

      +

      Examples

      -

      Example 1: A thick blue border to indicate focus

      -

      Description

      +

      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:

        @@ -55,9 +58,9 @@

        Example 1: A thick blue border to indicate focus

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

      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.

      +

      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;
@@ -115,11 +118,11 @@ 
      Example 1: A thick blue border to indicate focus
      
     }
   }
 }
      -

      Description

      -

      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.

      -
      + +

      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

      +

      Tests

      Procedure

      When a Flash movie contains focusable components, confirm that:

        @@ -132,9 +135,9 @@

        Example 1: A thick blue border to indicate focus

      1. #1 and #2 are true
      -

      Related Techniques

      +

      Resources

      +

      Resources

      • diff --git a/techniques/flash/FLASH21.html b/techniques/flash/FLASH21.html index 67a4adcf21..61608a6c5b 100644 --- a/techniques/flash/FLASH21.html +++ b/techniques/flash/FLASH21.html @@ -1,22 +1,26 @@ -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

        -

        -

        Description

        +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 +
        screenshot of highlighted row in grid component
        -

        -

        Examples

        + +

        Examples

        -

        Example 1: A statistical data table

        -

        Description

        +

        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();
 
@@ -51,11 +55,11 @@ 
        Example 1: A statistical data table
        
   dg.columns[4].width = 120;
   dg.move(50, 50);
 };
        -

        Description

        -

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

        -
        + +

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

        +
        -

        Tests

        +

        Tests

        Procedure

        For Flash content that contains tabular data:

          diff --git a/techniques/flash/FLASH22.html b/techniques/flash/FLASH22.html index a65df138a8..af070f0b92 100644 --- a/techniques/flash/FLASH22.html +++ b/techniques/flash/FLASH22.html @@ -1,16 +1,19 @@ -Adding keyboard-accessible actions to static elements

          Adding keyboard-accessible actions to static elements

          ID: FLASH22

          Technology: flash

          Type: Technique

          When to Use

          -

          -

          Description

          +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

          +

          Examples

          -

          Example 1: MovieClip used as a button

          -

          Description

          +

          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 @@ -18,15 +21,15 @@

          Example 1: MovieClip used as a button

          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.

          +

          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;
@@ -57,7 +60,7 @@ 
          Example 1: MovieClip used as a button
          
   Accessibility.updateProperties();
 }
          -

          Tests

          +

          Tests

          Procedure

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

          @@ -71,7 +74,7 @@

          Example 1: MovieClip used as a button

        1. #1 and #2 are true
      -

      Related Techniques

      +
      \ No newline at end of file diff --git a/techniques/flash/FLASH23.html b/techniques/flash/FLASH23.html index 998e97a958..1b9ad2d59c 100644 --- a/techniques/flash/FLASH23.html +++ b/techniques/flash/FLASH23.html @@ -1,6 +1,9 @@ -Adding summary information to a DataGrid

      Adding summary information to a DataGrid

      ID: FLASH23

      Technology: flash

      Type: Technique

      When to Use

      -

      -

      Description

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

      @@ -13,10 +16,10 @@ 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

      +

      Examples

      -

      Example 1: Adding a summary to a DataGrid in the Accessibility control panel

      -

      Description

      +

      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 @@ -30,14 +33,14 @@

      Example 1: Adding a summary to a DataGrid in the Accessibility control panel to the description field for DataGrid, using the Accessibility control panel.

    -
    +
    -

    Example 2: Adding a summary to a DataGrid with ActionScript 3

    -

    Description

    +

    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;
@@ -91,11 +94,11 @@ 
    Example 2: Adding a summary to a DataGrid with ActionScript 3
    
   dg.columns[3].width = 40;
   dg.columns[4].width = 120;
 };
    -

    Description

    -

    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.

    -
    + +

    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

    +

    Tests

    Procedure

    If the Flash movie contains a DataGrid component, confirm that summary text has been added to it through the corresponding accessible description diff --git a/techniques/flash/FLASH24.html b/techniques/flash/FLASH24.html index 9b3340a686..dc434b8259 100644 --- a/techniques/flash/FLASH24.html +++ b/techniques/flash/FLASH24.html @@ -1,20 +1,23 @@ -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

    -

    -

    Description

    +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

    +

    Examples

    -

    Example 1: Changing timeout with a dropdown list

    -

    Description

    +

    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;
@@ -53,17 +56,17 @@ 
    Example 1: Changing timeout with a dropdown list
    
   Alert.show("please log in again",
   "Your session has expired");
 }
    -

    Description

    -

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

    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 + of Success Criterion 2.2.1 (Timing Adjustable) .

    -
    +
    -

    Tests

    +

    Tests

    Procedure

    For Flash content that include a time limit:

      @@ -78,7 +81,7 @@

      Example 1: Changing timeout with a dropdown list

      Expected Results

      The above is true

      -

    Related Techniques

    +