forked from w3c/wcag
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Restore techniques removed in w3c#2490, with obsolete front-matter
- Loading branch information
1 parent
3b8da67
commit 228fcfc
Showing
5 changed files
with
379 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| --- | ||
| obsoleteMessage: The Java-specific <code class="el">applet</code> element is obsolete. | ||
| obsoleteSince: 20 | ||
| --- | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title> Providing text alternatives on applet elements </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1> Providing text alternatives on <code class="el">applet</code> elements </h1><section class="meta"><p class="id">ID: H35</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p> HTML and XHTML Documents that load Java applets where <code class="el">applet</code> is not deprecated. | ||
| </p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p> Provide a text alternative for an applet by using the <code class="att">alt</code> attribute to label an applet | ||
| and providing the text alternative in the body of the applet element. In this technique, both mechanisms | ||
| are required due to the varying support of the <code class="att">alt</code> attribute and applet body text by | ||
| user agents. </p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3>An applet to play the tic-tac-toe game. </h3> | ||
| <pre xml:space="preserve"><applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game"> | ||
| tic-tac-toe game | ||
| </applet> </pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li> View the source code of the applet element </li> | ||
| <li> Check that the applet element contains an <code class="att">alt</code> attribute with a text alternative | ||
| for the applet </li> | ||
| <li> Check that the applet element contains a text alternative for the applet in the | ||
| body of the applet element </li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li> Checks #2 and #3 are true. </li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../general/G94">G94</a></li> | ||
| </ul></section></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| --- | ||
| obsoleteMessage: Manipulating focus order is discouraged, as it frequently introduces new accessibility issues. | ||
| obsoleteSince: 20 | ||
| --- | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Creating a logical tab order through links, form controls, and objects</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Creating a logical tab order through links, form controls, and objects</h1><section class="meta"><p class="id">ID: H4</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>HTML and XHTML</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to provide a logical tab order when the default tab | ||
| order does not suffice. Often, <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G59">placing the | ||
| interactive elements in an order that follows sequences and relationships within the | ||
| content</a> is sufficient and this technique is not necessary. It can be very easy | ||
| to introduce usability bugs when setting the tab order explicitly.</p> | ||
| <p>In some cases, the author may want to specify a tab order that follows relationships in | ||
| the content without following the order of the interactive elements in the code. In | ||
| these cases, an alternative order can be specified using the <code class="att">tabindex</code> | ||
| attribute of the interactive element. The <code class="att">tabindex</code> is given a value between | ||
| 0 and 32767. </p> | ||
| <p>When the interactive elements are navigated using the tab key, the elements are given | ||
| focus in increasing order of the value of their <code class="att">tabindex</code> attribute. | ||
| Elements that have a <code class="att">tabindex</code> value higher than zero will receive focus | ||
| before elements without a <code class="att">tabindex</code> or a <code class="att">tabindex</code> of 0. After | ||
| all of the elements with a tabindex higher than 0 have received focus, the rest of the | ||
| interactive elements are given focus in the order in which they appear in the Web | ||
| page.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
|
|
||
| <p>A genealogical search form searches for marriage records. The search form includes | ||
| several input fields for the bride and the groom. The form is marked up using a data | ||
| table that includes the fields of the groom in the first column and the fields of | ||
| the bride in the second column. The order in the content is row by row but the | ||
| author feels it is more logical to navigate the form column by column. This way, all | ||
| the groom's criteria can be filled in before moving on to the bride's criteria. The | ||
| <code class="att">tabindex</code> attributes of the input fields are used to specify a tab | ||
| order that navigates column by column.</p> | ||
|
|
||
| <pre xml:space="preserve"><form action="#" method="post"> | ||
| <table summary="the first column contains the search criteria | ||
| of the groom, the second column the search criteria of | ||
| of the bride"> | ||
| <caption>Search for marriage records</caption> | ||
| <tr> | ||
| <th>Search criteria</th> | ||
| <th>Groom</th> | ||
| <th>Bride</th> | ||
| </tr> | ||
| <tr> | ||
| <th>First name</th> | ||
| <td><input type="text" size="30" value="" name="groomfirst" | ||
| title="First name of the groom" tabindex="1"></td> | ||
| <td><input type="text" size="30" value="" name="bridefirst" | ||
| title="First name of the bride" tabindex="4"></td> | ||
| </tr> | ||
| <tr> | ||
| <th>Last name</th> | ||
| <td><input type="text" size="30" value="" name="groomlast" | ||
| title="Last name of the groom" tabindex="2"></td> | ||
| <td><input type="text" size="30" value="" name="bridelast" | ||
| title="Last name of the bride" tabindex="5"></td> | ||
| </tr> | ||
| <tr> | ||
| <th>Place of birth</th> | ||
| <td><input type="text" size="30" value="" name="groombirth" | ||
| title="Place of birth of the groom" tabindex="3"></td> | ||
| <td><input type="text" size="30" value="" name="bridebirth" | ||
| title="Place of birth of the bride" tabindex="6"></td> | ||
| </tr> | ||
| </table> | ||
| </form> </pre> | ||
| </section> | ||
| <section class="example"> | ||
|
|
||
| <p>A Web page contains a search field in the upper right corner. The field is given | ||
| tabindex="1" so that it will occur first in the tab order, even though it is not | ||
| first in the content order.</p> | ||
|
|
||
| </section> | ||
| <section class="example"> | ||
|
|
||
| <p> | ||
| <code class="att">Tabindex</code> values need not be sequential nor must they begin with any | ||
| particular value. The values do not have to be unique. Elements that have identical | ||
| <code class="att">tabindex</code> values are navigated in the order they appear in the | ||
| character stream. </p> | ||
|
|
||
|
|
||
| <p>In sections of the content where the tab order follows the content order, it can be | ||
| less error prone to give all elements the same tabindex value rather than specifying | ||
| a different number for each element. Then it is easy to rearrange those elements or | ||
| add new elements and maintain a logical tab order.</p> | ||
|
|
||
| <pre xml:space="preserve"> <a href="xxx" tabindex = "1">First link in list</a> | ||
| <a href="xxx" tabindex = "1">Second link in list</a> | ||
| <a href="xxx" tabindex = "1">Link that was added long | ||
| after the original list was created</a> | ||
| <a href="xxx" tabindex = "1">Third link in list</a> | ||
| ... | ||
| <a href="xxx" tabindex = "1">Twentieth link in list</a> </pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check if <code class="att">tabindex</code> is used</li> | ||
| <li>If <code class="att">tabindex</code> is used, check that the tab order specified by the | ||
| <code class="att">tabindex</code> attributes follows relationships in the content.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>Check #2 is true.</li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2><ul> | ||
| <li><a href="../general/G59">G59</a></li> | ||
| <li><a href="../failures/F44">F44</a></li> | ||
| <li><a href="../failures/F85">F85</a></li> | ||
| </ul></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/html4/interact/forms.html#adef-tabindex">Tabbing | ||
| navigation in the HTML 4.01 specification</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| </section></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| --- | ||
| obsoleteMessage: <code class="el">noembed</code> is obsolete. Use <code class="el">object</code> instead when fallback is necessary. | ||
| obsoleteSince: 20 | ||
| --- | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using noembed with embed | ||
| </title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using <code class="el">noembed</code> with <code class="el">embed</code> | ||
| </h1><section class="meta"><p class="id">ID: H46</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>Documents that load plugins with the <code class="el">embed</code> element.</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to provide alternative content for the | ||
| <code class="el">embed</code> element in a <code class="el">noembed</code> element. The <code class="el">noembed</code> is rendered | ||
| only if the <code class="el">embed</code> is not supported. While it can be positioned anywhere on the | ||
| page, it is a good idea to include it as a child element of <code class="el">embed</code> so that it is | ||
| clear to assistive technologies that a text alternative is associated with the | ||
| <code class="el">embed</code> element it describes.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3> | ||
| <code class="el">noembed</code> is provided inside an <code class="el">embed</code> | ||
| </h3> | ||
| <pre xml:space="preserve"><embed src="../movies/history_of_rome.mov" | ||
| height="60" width="144" autostart="false"> | ||
| <noembed> | ||
| <a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a> | ||
| </noembed> | ||
| </embed></pre> | ||
| </section> | ||
| <section class="example"> | ||
| <h3> | ||
| <code class="el">noembed</code> is provided beside an <code class="el">embed</code> | ||
| </h3> | ||
| <pre xml:space="preserve"><embed src="moviename.swf" width="100" height="80" | ||
| pluginspage="http://example.com/shockwave/download/" /> | ||
| <noembed> | ||
| <img alt="Still from Movie" src="moviename.gif" | ||
| width="100" height="80" /> | ||
| </noembed>;</pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <ol> | ||
| <li>Check if <code class="el">embed</code> element has a child <code class="el">noembed</code> element </li> | ||
| <li>Check if <code class="el">embed</code> element has a <code class="el">noembed</code> element that | ||
| immediately follows it. </li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>#1 is true or #2 is true </li> | ||
| </ul> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2></section></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| --- | ||
| obsoleteMessage: The glossary link type is obsolete. | ||
| obsoleteSince: 20 | ||
| --- | ||
| <!DOCTYPE html><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Using the link element to link to a glossary</title><link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"></link></head><body><h1>Using the link element to link to a glossary</h1><section class="meta"><p class="id">ID: H60</p><p class="technology">Technology: html</p><p class="type">Type: Technique</p></section><section id="applicability"><h2>When to Use</h2> | ||
| <p>HTML and XHTML</p> | ||
| </section><section id="description"><h2>Description</h2> | ||
| <p>The objective of this technique is to provide a mechanism for locating a glossary. When | ||
| terms in the content are defined on a separate glossary page, the glossary is referenced | ||
| using a <code class="el">link</code> element in the <code class="el">head</code> element of the document that | ||
| uses the glossary. The <code class="att">rel</code> attribute of the <code class="el">link</code> element is | ||
| set to "glossary", and the <code class="att">href</code> attribute contains the URI of the glossary | ||
| page. User agents can then assist users in accessing the glossary quickly and | ||
| easily.</p> | ||
| </section><section id="examples"><h2>Examples</h2> | ||
| <section class="example"> | ||
| <h3> The WCAG 2.0 Glossary. </h3> | ||
| <pre xml:space="preserve"> <link rel="glossary" href="https://www.w3.org/TR/WCAG20/#glossary"></pre> | ||
| </section> | ||
| </section><section id="tests"><h2>Tests</h2> | ||
| <section class="procedure"><h3>Procedure</h3> | ||
| <p>For any set of words and their definitions that are meant to serve as a glossary: </p> | ||
| <ol> | ||
| <li>Check that the <code class="el">head</code> section of the Web page that contains words, | ||
| phrases or abbreviations defined in a glossary contains a <code class="el">link</code> | ||
| element</li> | ||
| <li>Check that the <code class="el">link</code> element has attribute | ||
|
|
||
| <code class="att">rel</code>="glossary" | ||
| </li> | ||
| <li>Check that the <code class="att">href</code> attribute of the <code class="el">link</code> element | ||
| refers to the glossary page.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="results"><h3>Expected Results</h3> | ||
| <ul> | ||
| <li>All checks above are true.</li> | ||
| </ul> | ||
| <p>Note: The definition of abbreviation used in WCAG is : "shortened form of a word, | ||
| phrase, or name where the original expansion has not been rejected by the organization | ||
| that it refers to and where the abbreviation has not become part of the language."</p> | ||
| </section> | ||
| </section><section id="related"><h2>Related Techniques</h2></section><section id="resources"><h2>Resources</h2> | ||
|
|
||
| <ul> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/REC-html40/struct/links.html#edef-LINK">HTML 4.01 | ||
| LINK element</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/TR/REC-html40/types.html#type-links">HTML 4.01 link | ||
| types</a> | ||
| </li> | ||
| <li> | ||
| <a href="https://www.w3.org/QA/Tips/use-links">Use <link>s in your | ||
| document</a> from W3C's Quality Web Tips </li> | ||
| <li> | ||
| <a href="http://www.htmlhelp.com/reference/html40/head/link.html">LINK - | ||
| Document Relationship</a> from Web Design Group </li> | ||
| </ul> | ||
|
|
||
| </section></body></html> |
Oops, something went wrong.