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
@@ -16,18 +16,18 @@
When to Use
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.
+
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 ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.
-
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.
+
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
-
Using aria-describedby to associate instructions with form fields
+
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.
+
Sample form field using aria-describedby to associate instructions with form fields while there is a form label.
Using WAI-ARIA in HTML.
diff --git a/techniques/aria/ARIA10.html b/techniques/aria/ARIA10.html
index c051e96e0f..2888725b07 100644
--- a/techniques/aria/ARIA10.html
+++ b/techniques/aria/ARIA10.html
@@ -1,12 +1,12 @@
Using aria-labelledby to provide a text alternative for non-text content
Using aria-labelledby to provide a text alternative for non-text content
The purpose of this technique is to provide a short description for an element that can be read by assistive technologies 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.
+
The purpose of this technique is to provide a short description for an element that can be read by assistive technologies 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
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.
+
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.
Providing a short description for a complex graphic
Tests
Procedure
-
Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
-
Check whether the value of the aria-labelledby attribute is the id of an element on the web page.
-
Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.
+
Examine each element where the aria-labelledby attribute is present and the element does not support the alt attribute.
+
Check whether the value of the aria-labelledby attribute is the id of an element on the web page.
+
Determine that the text of the element identified by the aria-labelledby attribute accurately labels the element, provides a description of its purpose, or provides equivalent information.
Using ARIA landmarks to identify regions of a page
Landmarks are inserted into the page using the role attribute on an element that marks the section. The value of the attribute designates the type of landmark. These role values are listed below. For HTML mappings of landmark roles, refer to the Rules of ARIA attribute usage by HTML element table in the ARIA In HTML recommendation.
-
banner: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.
-
navigation: A region that contains navigation links to other pages or different parts of the same page.
-
main: A region that contains a page's main content.
-
region: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A region landmark isn't exposed as a landmark region unless it has an accessible name, often provided using aria-label or aria-labelledby.
-
form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form landmark isn't exposed as a landmark region unless it has an accessible name.
-
search: A region of the page containing search functionality.
-
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
-
contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
+
banner: A region that contains mostly site-oriented content, such as the logo or a site-specific search tool.
+
navigation: A region that contains navigation links to other pages or different parts of the same page.
+
main: A region that contains a page's main content.
+
region: A region that contains a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section. A region landmark isn't exposed as a landmark region unless it has an accessible name, often provided using aria-label or aria-labelledby.
+
form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form landmark isn't exposed as a landmark region unless it has an accessible name.
+
search: A region of the page containing search functionality.
+
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
+
contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
There are cases when a particular landmark role could be used more than once on a page, such as on primary and secondary blocks of navigation. In these cases, identical roles should be named using a valid technique for labeling regions.
@@ -56,7 +56,7 @@
Simple landmarks
Multiple landmarks of the same type and aria-labelledby
-
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
+
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a navigation role is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
Examine whether the correct element has been used to mark up content. For example: a navigation role has been used to mark up a section with navigation links, or the main role is used to contain the page's main content.
+
Examine whether the correct element has been used to mark up content. For example: a navigation role has been used to mark up a section with navigation links, or the main role is used to contain the page's main content.
If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.
If the same type of landmark appears multiple times on the page, check that each one is given a unique and meaningful accessible name.
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. The role="heading" property must be paired with the aria-level property to define the heading level.
-
When possible, use native heading markup. For example, it is preferable to use an h1 element, rather than using <div role="heading" aria-level="1">. Native HTML elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <div role="heading" aria-level="1"> will not be styled as a heading, because the underlying element is a div. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.
+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. The role="heading" property must be paired with the aria-level property to define the heading level.
+
When possible, use native heading markup. For example, it is preferable to use an h1 element, rather than using <div role="heading" aria-level="1">. Native HTML elements have implicit styling and features that won't necessarily be replicated with ARIA equivalents. For instance, heading elements will have specific styling adjustments made when viewing a page in a browser's Reader Mode. Whereas a <div role="heading" aria-level="1"> will not be styled as a heading, because the underlying element is a div. ARIA only modifies the way an element is exposed to assistive technology, it does nothing to change the implicit style or functionality of the element it is applied to.
Examples
Simple headings
-
This example demonstrates how to implement headings using role="heading" and aria-level.
+
This example demonstrates how to implement headings using role="heading" and aria-level.
<div role="heading" aria-level="2">Global News Items</div>
... a list of global news with editorial comment....
@@ -36,7 +36,7 @@
Simple headings
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 up to level 6, there is no native element to provide these semantics.
+
This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings up to level 6, there is no native element to provide these semantics.
<h5>Fruit Trees</h5>
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
@@ -44,7 +44,7 @@
Additional heading levels
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>
@@ -53,9 +53,9 @@
Tests
Procedure
-
Examine each element with the attribute role="heading".
+
Examine each element with the attribute role="heading".
Determine whether the content of the element is appropriate as a heading.
-
Determine whether the aria-level value is the appropriate hierarchical level.
+
Determine whether the aria-level value is the appropriate hierarchical level.
diff --git a/techniques/aria/ARIA13.html b/techniques/aria/ARIA13.html
index d673287611..72a99aa245 100644
--- a/techniques/aria/ARIA13.html
+++ b/techniques/aria/ARIA13.html
@@ -1,18 +1,18 @@
Using aria-labelledby to name regions and landmarks
Using aria-labelledby to name regions and landmarks
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 a section of the page marked up as a region or landmarks with text that is on the page that labels it.
+
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 a 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.
+
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
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.
+
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.
<div role="complementary" aria-labelledby="hdr1">
<h1 id="hdr1">Top News Stories</h1>
...
diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html
index 4bc4484186..68e03b1099 100644
--- a/techniques/aria/ARIA14.html
+++ b/techniques/aria/ARIA14.html
@@ -1,17 +1,17 @@
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
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.
+
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 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.
+
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
A close button 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.
+
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">X</button>
@@ -33,10 +33,10 @@
A phone number with multiple fields
Tests
Procedure
-
For elements that use aria-label:
+
For elements that use aria-label:
-
Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required
+
Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required
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. Descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology.
+
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. Descriptive text provided using aria-describedby is separate from the short name provided using the alt attribute in HTML. An advantage of providing long descriptions using content from the same page as the image is that the alternative is available to all, including sighted people who do not have assistive technology.
-
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.
+
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
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.
+
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 1889 and is oil on canvas. It was created by
@@ -21,9 +21,9 @@
Describing an image
Tests
Procedure
-
Examine each image element where a aria-describedby attribute is present.
+
Examine each image element where a aria-describedby attribute is present.
-
Examine whether the aria-describedby attribute programmatically associates an element with its text description, via the id attribute on the element where the text to be used as the description is found.
+
Examine whether the aria-describedby attribute programmatically associates an element with its text description, via the id attribute on the element where the text to be used as the description is found.
Examine whether the combined text equivalent and associated text description accurately describe or provide the equivalent purpose to the object.
diff --git a/techniques/aria/ARIA16.html b/techniques/aria/ARIA16.html
index 8164affc8e..cd70190248 100644
--- a/techniques/aria/ARIA16.html
+++ b/techniques/aria/ARIA16.html
@@ -1,18 +1,18 @@
Using aria-labelledby to provide a name for user interface controls
Using aria-labelledby to provide a name for user interface controls
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.
+
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.
+
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.
While the function of aria-labelledby appears similar to the native HTML label element, there are some differences:
- aria-labelledby can reference more than one text element; label can only reference one.
+ aria-labelledby can reference more than one text element; label can only reference one.
- aria-labelledby can be used for a variety of elements while the label element can only be used on form elements.
-
Clicking on a label focuses the associated form field. This does not occur with aria-labelledby. If this behavior is required then use label or implement this functionality using scripting.
+ aria-labelledby can be used for a variety of elements while the label element can only be used on form elements.
+
Clicking on a label focuses the associated form field. This does not occur with aria-labelledby. If this behavior is required then use label or implement this functionality using scripting.
@@ -20,7 +20,7 @@
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.
+
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.
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.
+
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>
@@ -37,7 +37,7 @@
Labelling a slider
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.
+
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.
<option value="2">2</option>
</select>
<span id="l2">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. However, a span would lose the advantage of the larger clickable region.
+
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. However, a span would lose the advantage of the larger clickable region.
Tests
Procedure
-
For each user interface control element where an aria-labelledby attribute is present:
+
For each user interface control element where an aria-labelledby attribute is present:
-
Check that the value of the aria-labelledby attribute is the id of an element or a space separated list of ids on the web page.
+
Check that the value of the aria-labelledby attribute is the id of an element or a space separated list of ids on the web page.
Check that the text of the referenced element or elements accurately labels the user interface control.
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 should 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".
+
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 should 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
Social Security Number
-
Social security number fields which are nine digits long and broken up into three segments can be grouped using role="group".
+
Social security number fields which are nine digits long and broken up into three segments can be grouped using role="group".
This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. 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.
+
This example demonstrates use role=radiogroup. Note also that the radio buttons are custom controls with role=radio. 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">
<p id="alert1">Send an alert when balance exceeds $3,000</p>
@@ -64,7 +64,7 @@
- The script to make the span actually work like radio buttons is not included in this example. For a similar, but coded slightly differently, working example, see the the ARIA Authoring Practices' Radio Group Example Using aria-activedescendant example.
+ The script to make the span actually work like radio buttons is not included in this example. For a similar, but coded slightly differently, working example, see the the ARIA Authoring Practices' Radio Group Example Using aria-activedescendant example.
@@ -75,8 +75,8 @@
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:
-
Check that the group of logically related input or select elements are contained within an element with role=group, or role=radiogroup depending on the type of elements the group contains.
-
Check that this group has an accessible name defined using aria-label or aria-labelledby.
+
Check that the group of logically related input or select elements are contained within an element with role=group, or role=radiogroup depending on the type of elements the group contains.
+
Check that this group has an accessible name defined using aria-label or aria-labelledby.
The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
+
The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
-
aria-label or aria-labelledby attribute gives the alertdialog an accessible name.
-
The alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
-
The tab order is constrained within the alertdialog whilst it is open.
-
When the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
+
aria-label or aria-labelledby attribute gives the alertdialog an accessible name.
+
The alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
+
The tab order is constrained within the alertdialog whilst it is open.
+
When the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
-
Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
+
Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
Examples
Alert dialog
-
This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
+
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">
<h1 id="alertHeading">Error</h1>
<p>Employee's Birth Date is after their hire date.
@@ -30,13 +30,13 @@
Alert dialog
Tests
Procedure
-
Trigger the error that causes the alertdialog to appear.
-
Determine that the alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
-
Determine that the tab order is constrained within the alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
-
Examine the element with alertdialog applied.
-
Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
-
Determine that the contents of the alertdialog identifies the input error.
-
Determine whether contents of the alertdialog suggests how to fix the error.
+
Trigger the error that causes the alertdialog to appear.
+
Determine that the alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
+
Determine that the tab order is constrained within the alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
+
Examine the element with alertdialog applied.
+
Determine that either the aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
+
Determine that the contents of the alertdialog identifies the input error.
+
Determine whether contents of the alertdialog suggests how to fix the error.
Expected Results
diff --git a/techniques/aria/ARIA19.html b/techniques/aria/ARIA19.html
index 0af24250d9..0a0ee0147d 100644
--- a/techniques/aria/ARIA19.html
+++ b/techniques/aria/ARIA19.html
@@ -1,7 +1,7 @@
Using ARIA role=alert or Live Regions to Identify Errors
Using ARIA role=alert or Live Regions to Identify Errors
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.
+
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
@@ -52,7 +52,7 @@
Injecting error messages into a container with role=alert already present in
Tests
Procedure
-
Determine that an empty error container with role=alert or aria-live=assertive attribute is present in the DOM at page load.
+
Determine that an empty error container with role=alert or aria-live=assertive attribute is present in the DOM at page load.
Trigger the error that causes the content in the live region to appear or update.
Determine that the error message was injected into the already present error container.
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.
+
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.
-
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 ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.
+
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 ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.
Examples
-
The required property is indicated by an asterisk placed in the label element
+
The required property is indicated by an asterisk placed in the label element
For each control which is shown via presentation to be required.
-
Check whether the aria-required attribute is present:
-
Check whether the value of the aria-required attribute is the correct required state of the user interface component.
+
Check whether the aria-required attribute is present:
+
Check whether the value of the aria-required attribute is the correct required state of the user interface component.
diff --git a/techniques/aria/ARIA20.html b/techniques/aria/ARIA20.html
index 64e94d45f9..f3a4cf5e10 100644
--- a/techniques/aria/ARIA20.html
+++ b/techniques/aria/ARIA20.html
@@ -1,13 +1,13 @@
Using the region role to identify a region of the page
Using the region role to identify a region of the page
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.
+
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
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 above the form is referenced as the region's name using aria-labelledby.
+
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 above the form is referenced as the region's name using aria-labelledby.
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.
+
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.
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.
+
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.
This technique demonstrates how aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:
+
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
The failed fields are identified in a manner that is not available to some users - for example by using an error-icon rendered visually by some technique that does not rely on color such as a visual cue like a border.
-
One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.
-
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.
+
One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the required property.
+
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
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.
+
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:
<script>
...
@@ -64,7 +64,7 @@
Using aria-invalid on required fields
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.
+
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:
<div class="control">
<div>
@@ -108,10 +108,10 @@
Identifying errors in data format
Tests
Procedure
-
For each form control that relies on aria-invalid to convey a validation failure:
+
For each form control that relies on aria-invalid to convey a validation failure:
-
Check that aria-invalid is not set to true when a validation failure does not exist.
-
Check that aria-invalid is set to true when a validation failure does exist.
+
Check that aria-invalid is not set to true when a validation failure does not exist.
+
Check that aria-invalid is set to true when a validation failure does exist.
Check that the programmatically associated labels / programmatically associated instructional text for the field provide enough information to understand the error.
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 aria-atomic value, a screen reader will announce "Shopping cart, six items".
+
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 aria-atomic value, a screen reader will announce "Shopping cart, six items".
Check that the container destined to hold the status message has a role attribute with a value of statusbefore the status message occurs.
+
Check that the container destined to hold the status message has a role attribute with a value of statusbefore the status message occurs.
Check that when the status message is triggered, it is inside the container.
-
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.
+
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.
Semantically identifying a font icon with role="img"
+
Semantically identifying a font icon with role="img"
Metadata
@@ -22,7 +22,7 @@
Description
Some low vision users need user stylesheets, scripts, or extensions to override the fonts on a page to perceive text content. However, they need to be able to perceive icon fonts that are meaningful, such as a star signifying a favorite, or an email icon in a link.
-
The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.
+
The key is for the author to semantically markup icon fonts with role="img". Then the user's font replacement selector can hook into that semantic and exclude role="img". This results in those icon fonts being shown.
Basic principle of the technique
diff --git a/techniques/aria/ARIA4.html b/techniques/aria/ARIA4.html
index dbce07bd40..518a73757e 100644
--- a/techniques/aria/ARIA4.html
+++ b/techniques/aria/ARIA4.html
@@ -1,12 +1,12 @@
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
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.
+
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
A simple toolbar
-
A toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:
+
A toolbar containing three buttons. The div element has a role of "toolbar", and the img elements have "button" roles:
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.
+
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 a element has a role="button" and an aria-pressed attribute. The following excerpt from the Javascript for this example updates the value of the aria-pressed attribute:
+
The a element has a role="button" and an aria-pressed attribute. The following excerpt from the Javascript for this example updates the value of the aria-pressed attribute:
/**
* Toggles the toggle button's state between *pressed* and *not pressed*.
*
@@ -33,7 +33,7 @@
A toggle button
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.
+
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 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 accessible name and description computation section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.
+
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 accessible name and description computation section of the Accessible Name And Description Computation recommendation. Authors should be aware that use of aria-label will override any native naming such as alt on images or label associated with a form field using the for attribute.
Examples
Distinguishing navigation landmarks
-
The following example shows how aria-label could be used to distinguish two navigation landmarks in an HTML document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.
+
The following example shows how aria-label could be used to distinguish two navigation landmarks in an HTML document, where there are more than two of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label.
<div role="navigation" aria-label="Primary">
<ul>
<li>...a list of links here ...</li>
@@ -23,7 +23,7 @@
Distinguishing navigation landmarks
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.
+
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.
For each element where a aria-label attribute is present.
+
For each element where a aria-label attribute is present.
Examine whether the text description accurately labels the object or provides a description of its purpose or provides equivalent information.
diff --git a/techniques/aria/ARIA7.html b/techniques/aria/ARIA7.html
index b850510175..506a1c7f02 100644
--- a/techniques/aria/ARIA7.html
+++ b/techniques/aria/ARIA7.html
@@ -1,11 +1,11 @@
Using aria-labelledby for link purpose
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.
+
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 each link that has an aria-labelledby attribute:
+
For each link that has an aria-labelledby attribute:
-
Check that each id in the value of the aria-labelledby attribute matches an id of a text element used as part of the link purpose.
-
Check that the combined value of the text referenced by the one or more ids in the aria-labelledby attribute properly describes the purpose of the link element.
+
Check that each id in the value of the aria-labelledby attribute matches an id of a text element used as part of the link purpose.
+
Check that the combined value of the text referenced by the one or more ids in the aria-labelledby attribute properly describes the purpose of the link element.
Expected Results
diff --git a/techniques/aria/ARIA8.html b/techniques/aria/ARIA8.html
index 4a5a03c96a..cdce6379c1 100644
--- a/techniques/aria/ARIA8.html
+++ b/techniques/aria/ARIA8.html
@@ -1,8 +1,8 @@
Using aria-label for link purpose
The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
-
Per the Accessible Name and Description Computation and the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by assistive technology. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
+
The objective of this technique is to describe the purpose of a link using the aria-label attribute. The aria-label attribute provides a way to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. If descriptive elements are visible on the page, the aria-labelledby attribute should be used instead of aria-label. Providing a descriptive text label lets a user distinguish the link from links in the web page that lead to other destinations and helps the user determine whether to follow the link. In some assistive technologies the aria-label value will show in the list of links instead of the actual link text.
+
Per the Accessible Name and Description Computation and the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by assistive technology. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
Examples
Describing the purpose of a link in HTML using aria-label.
@@ -24,9 +24,9 @@
Describing the purpose of a link in HTML using aria-label.
Tests
Procedure
-
For link elements that use aria-label:
+
For link elements that use aria-label:
-
Check that the value of the aria-label attribute properly describes the purpose of the link element.
+
Check that the value of the aria-label attribute properly describes the purpose of the link element.
Expected Results
diff --git a/techniques/aria/ARIA9.html b/techniques/aria/ARIA9.html
index f24463597b..09d453480c 100644
--- a/techniques/aria/ARIA9.html
+++ b/techniques/aria/ARIA9.html
@@ -1,21 +1,21 @@
Using aria-labelledby to concatenate a name from several text nodes
Using aria-labelledby to concatenate a label from several text nodes
The aria-labelledby property can be used to provide a name for all visual objects. Applied to inputs, the aria-labelledby property can be used to provide a name to native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".
-
One particular use of aria-labelledby is for text inputs in situations where a meaningful name should consist of more than one text string.
-
Authors assign unique ids to the label strings to be concatenated as the name 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 name for the input.
-
The concatenation of strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.
-
Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as name for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into names for the text input elements inside the table.
+
The aria-labelledby property can be used to provide a name for all visual objects. Applied to inputs, the aria-labelledby property can be used to provide a name to native inputs as well as non-native elements, such as custom text inputs constructed with div contenteditable="true".
+
One particular use of aria-labelledby is for text inputs in situations where a meaningful name should consist of more than one text string.
+
Authors assign unique ids to the label strings to be concatenated as the name 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 name for the input.
+
The concatenation of strings can be useful for different reasons. In example 1, an input is nested within the context of a full sentence. The desired screen reader output is "Extend time-out to [ 20 ] minutes - edit with autocomplete, selected 20". Since the id of the text input is included in the string of ids referenced by aria-labelledby, the value of the input is included in the concatenated name at the right position.
+
Another application of aria-labelledby is when there is no space to provide a visible label next to the input, or when using native labels would create unnecessary redundancy. Here, the use aria-labelledby makes it possible to associate visible elements on the page as name for such inputs. This is demonstrated in example 2 where table column and row headings are concatenated into names for the text input elements inside the table.
-
The Accessible Name and Description Computation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.
+
The Accessible Name and Description Computation specifies that the string specified in aria-labelledby should replace rather than add to the content of the element that carries the property. So adding the aria-labelledby property to a native label should replace the text content inside that label unless the label itself is referenced as part of the sequence of ids in aria-labelledby.
Examples
A time-out input field with concatenated name
A text input allows users to extend the default time before a time-out occurs.
-
The string "Extend time-out to" is contained in a native label element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the name for the input is provided only by aria-labelledby, per the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0.
-
The aria-labelledby attribute on the text input references three elements: (1) the span containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full name for the text input
+
The string "Extend time-out to" is contained in a native label element and is associated with the input with the input by id="timeout-duration" . This label is associated with this input using the for/id association only on user agents that don't support ARIA. On user agents that support ARIA, the for/id association is ignored and the name for the input is provided only by aria-labelledby, per the Accessible Name and Description Computation in the HTML Accessibility API Mappings 1.0.
+
The aria-labelledby attribute on the text input references three elements: (1) the span containing the native label, (2) the text input containing the default text '20' (recall that this input is not labelled with the for/id associated label text), and (3) the string 'minutes' contained in a span. These elements should be concatenated to provide the full name for the text input
A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.
+
A simple data table containing text inputs. The input labels are concatenated through aria-labelledby referencing the respective column and row headers.
<table>
<tr>
<td></td>
@@ -54,7 +54,7 @@
A simple data table with text inputs
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 name for the checkboxes via aria-labelledby.
+
A conference workshop booking table with two parallel tracks allows users to select the workshop they want to attend. When tabbing through the checkbox inputs in the table, the track (1 or 2), the title, and the speaker of the workshop followed by the adjacent checkbox label "Attend" are provided as concatenated name for the checkboxes via aria-labelledby.
The objective of this technique is to toggle announcements to screen readers of changes in a stock-price alert component. By default, when the stock price changes, the change is announced by screen readers. This could be annoying to some users, so there are buttons to allow users to toggle the announcements on or off.
-
This technique uses the aria-live property to turn the stock component into a live region and the aria-atomic property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the aria-live property is set to assertive; if announcements are turned off, the aria-live property is set to off. The two buttons used to control the announcements use the aria-pressed property, updated to either true or false, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.
+
This technique uses the aria-live property to turn the stock component into a live region and the aria-atomic property to tell screen readers to announce all of the component's content rather than just what was updated when the stock is updated. For the sake of this demo, the stock updates every 10 seconds. If announcements are turned on, the aria-live property is set to assertive; if announcements are turned off, the aria-live property is set to off. The two buttons used to control the announcements use the aria-pressed property, updated to either true or false, to inform screen reader users which button is pressed and therefore whether their screen reader will announce the stock updates or not. In a real-life situation, an author should consider setting a cookie (or equivalent) to store the user's preference so that it's set over multiple visits to the page.
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.
+
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.
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.
+
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.
-
Although this example uses an onsubmit attribute on the form element for brevity, normal practice is to create a submit event listener when the page is loaded.
+
Although this example uses an onsubmit attribute on the form element for brevity, normal practice is to create a submit event listener when the page is loaded.
Script code:
function validate() {
diff --git a/techniques/client-side-script/SCR19.html b/techniques/client-side-script/SCR19.html
index 29908885ec..142fd2bde4 100644
--- a/techniques/client-side-script/SCR19.html
+++ b/techniques/client-side-script/SCR19.html
@@ -1,5 +1,5 @@
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
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 with support for scripting.
Description
@@ -10,8 +10,8 @@
This example contains two select elements. When an item is selected in the first select, the choices in the other select are updated appropriately. The first select element contains a list of continents. The second select element will contain a partial list of countries located in the selected continent. There is an onchange event associated with the continent select. When the continent selection changes, the items in the country select are modified using JavaScript via the Document Object Model (DOM). All of the data required, the list of countries and continents, is included within the web page.
Overview of the code below
-
countryLists array variable which contains the list of countries for each continent in the trigger select element.
-
countryChange() function which is called by the onchange event of the continent select element.
+
countryLists array variable which contains the list of countries for each continent in the trigger select element.
+
countryChange() function which is called by the onchange event of the continent select element.
The HTML code to create the select elements in the body of the web page.
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 attribute based on the boolean value. Note that since the image is for decorative purposes, it has a null alt attribute.
+
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 attribute 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.
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.
-
In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
+
In JavaScript, commonly used event handlers include, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Some mouse-specific functions have a logical corresponding keyboard-specific function (such as 'onmouseover' and 'onfocus'). A keyboard event handler should be provided that executes the same function as the mouse event handler.
The following table suggests keyboard event handlers to pair mouse event handlers.
@@ -31,24 +31,24 @@
Description
...with
-
mousedown
-
keydown
+
mousedown
+
keydown
-
mouseup
-
keyup
+
mouseup
+
keyup
-
click[1]
-
keypress[2]
+
click[1]
+
keypress[2]
-
mouseover
-
focus
+
mouseover
+
focus
-
mouseout
-
blur
+
mouseout
+
blur
diff --git a/techniques/client-side-script/SCR21.html b/techniques/client-side-script/SCR21.html
index 6015611716..b6324c34d6 100644
--- a/techniques/client-side-script/SCR21.html
+++ b/techniques/client-side-script/SCR21.html
@@ -6,16 +6,16 @@
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
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. 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.
+
The objective of this technique is to demonstrate how to use functions of the Document Object Model (DOM) to add content to a page. 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.
+
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
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.
+
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.
Here is the validation function. Note the use of the createElement(), createTextNode(), and appendChild() DOM functions to create the error message elements.
+
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) {
// Test whether fields are valid
diff --git a/techniques/client-side-script/SCR24.html b/techniques/client-side-script/SCR24.html
index 84d9e2a7e3..8f9e490ee5 100644
--- a/techniques/client-side-script/SCR24.html
+++ b/techniques/client-side-script/SCR24.html
@@ -17,7 +17,7 @@
When to Use
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. New windows / tabs can be opened with the HTML target attribute or JavaScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link and warns the user that the content will open in a new window.
+
The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient or be missed completely by some users. New windows / tabs can be opened with the HTML target attribute or JavaScript. The example below demonstrates how to open new windows with script: it adds an event handler to a link and warns the user that the content will open in a new window.
Examples
@@ -25,7 +25,7 @@
Examples
Using JavaScript to open a new tab / window
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.
+
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.
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 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.
+
The reading order in a screen-reader is based on the order of the HTML elements in the Document Object Model, as is the default tab order. This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its 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
-
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.
+
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.
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 menu. When the user hits tab, the focus will go to the first focusable item in the menu, the link we created.
+
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 menu. 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);
@@ -38,7 +38,7 @@
}
}
-
CSS is used to make the div and link look like a menu.
+
CSS is used to make the div and link look like a menu.
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.
+
The modules are list items, and each module, in addition to content in div elements, contains a menu represented as a nested list.
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.
+
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){
diff --git a/techniques/client-side-script/SCR29.html b/techniques/client-side-script/SCR29.html
index a0f09d8266..edcce18e58 100644
--- a/techniques/client-side-script/SCR29.html
+++ b/techniques/client-side-script/SCR29.html
@@ -17,18 +17,18 @@
When to Use
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().
+
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.
+
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
-
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.
+
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>
// this is the function to perform the action. This simple example toggles a message.
diff --git a/techniques/client-side-script/SCR32.html b/techniques/client-side-script/SCR32.html
index 36ec3cd34b..056b766a4d 100644
--- a/techniques/client-side-script/SCR32.html
+++ b/techniques/client-side-script/SCR32.html
@@ -17,7 +17,7 @@
When to Use
Description
-
The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.
+
The objective of this technique is to demonstrate the display of an error message when client side validation of a form field has failed. Anchor elements are used to display the error messages in a list and are inserted above the fields to be validated. Anchor elements are used in the error messages so that focus can be placed on the error message(s), drawing the user's attention to it. The href of the anchor elements contain an in-page link which references the fields where error(s) have been found.
In a deployed application, if Javascript is turned off, client side validation will not occur. Therefore, this technique would only be sufficient in situations where scripting is relied upon for conformance or when server side validation techniques are also used to catch any errors and return the page with information about the fields with errors.
The objective of this technique is to calculate the size and position of elements in a way that will scale appropriately as the text size is scaled.
There are four properties in JavaScript that help determine the size and position of elements:
-
offsetHeight (the height of the element in pixels)
-
offsetWidth (the width of the element in pixels)
-
offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
-
offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)
+
offsetHeight (the height of the element in pixels)
+
offsetWidth (the width of the element in pixels)
+
offsetLeft (the distance of the element from the left of its parent (offsetParent) in pixels)
+
offsetTop (the distance of the element from the top of its parent (offsetParent) in pixels)
-
Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):
+
Calculating the height and width using offsetHeight and offsetWidth is straightforward, but when calculating an object's left and top position as absolute values, we need to consider the parent element. The calculatePosition function below iterates through all of an element's parent nodes to give a final value. The function takes two parameters: objElement (the name of the element in question), and the offset property (offsetLeft or offsetTop):
Making actions keyboard accessible by using the onclick event of anchors and buttons
+
Making actions keyboard accessible by using the onclick event of anchors and buttons
ID: SCR35
Technology: client-side-script
@@ -17,16 +17,16 @@
When to Use
Description
-
The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
-
This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the href attribute. When using buttons, it is provided via a form post.
+
The objective of this technique is to demonstrate how to invoke a scripting function in a way that is keyboard accessible by attaching it to a keyboard-accessible control. In order to ensure that scripted actions can be invoked from the keyboard, they are associated with "natively actionable" HTML elements (links and buttons). The onclick event of these elements is device independent. While "onclick" sounds like it is tied to the mouse, the onclick event is actually mapped to the default action of a link or button. The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
+
This technique relies on client-side scripting. However, it is beneficial to provide a backup implementation or explanation for environments in which scripting is not available. When using anchor elements to invoke a JavaScript action, a backup implementation or explanation is provided via the href attribute. When using buttons, it is provided via a form post.
Examples
Link that runs a script and has no fallback for non-scripted browsers
This approach should only be used when script is relied upon as an Accessibility Supported Technology.
-
Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.
-
The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
+
Even though we do not want to navigate from this link, we must use the href attribute on the a element in order to make this a true link and get the proper eventing. In this case, we're using "#" as the link target, but you could use anything. This link will never be navigated.
+
The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the page would refresh after the script ran.
<script>
function doStuff() {
@@ -38,7 +38,7 @@
Link that runs a script and has no fallback for non-scripted browsers
Link that runs script, but navigates to another page when script is not available
-
This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.
+
This approach can be used to create sites that don't rely on script, if and only if the navigation target provides the same functionality as the script. This example is identical to the example 1, except that its href is now set to a real page, dostuff.html. The dostuff.html page must provide the same functionality as the script. The "return false;" at the end of the doStuff() event handling function tells the browser not to navigate to the URI. Without it, the browser would navigate to dostuff.html after the script ran.
<script>
function doStuff() {
@@ -67,8 +67,8 @@
Button that runs a script and falls back to a form post for users without sc
Button that runs a script, implemented with input type="image"
-
Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.
+
Button that runs a script, implemented with input type="image"
+
Note that an alt attribute must be added to the input to provide a text equivalent for the image. This approach should only be used when script is relied upon.
<script>
function doStuff() {
@@ -79,13 +79,13 @@
Button that runs a script, implemented with inpu
<input type="image" src="stuff.gif" alt="Do stuff" onclick="return doStuff();">
-
Button that runs a script, implemented with input type="submit", input type="reset" or input type="button"
+
Button that runs a script, implemented with input type="submit", input type="reset" or input type="button"
This approach should only be used when script is relied upon.
Button that runs a script, implemented with button
+
Button that runs a script, implemented with button
This is valuable when you want more control over the look of your button. In this particular example, the button contains both an icon and some text. This approach should only be used when script is relied upon.
diff --git a/techniques/client-side-script/SCR37.html b/techniques/client-side-script/SCR37.html
index bbdc93f3b8..2e062b044f 100644
--- a/techniques/client-side-script/SCR37.html
+++ b/techniques/client-side-script/SCR37.html
@@ -6,11 +6,11 @@
Creating Custom Dialogs in a Device Independent Way
Creating Custom Dialogs in a Device Independent Way
ID: SCR37
Technology: client-side-script
Type: Technique
When to Use
HTML and XHTML used with script.
Description
-
Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS.
+
Site designers often want to create dialogs that do not use the pop-up windows supplied by the browser. This is typically accomplished by enclosing the dialog contents in a div and placing the div above the page content using z-order and absolute positioning in CSS.
To be accessible, these dialogs must follow a few simple rules.
Trigger the script that launches the dialog from the onclick event of a link or button.
-
Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script.
+
Place the dialog div into the Document Object Model (DOM) immediately after the element that triggered it. The triggering element will maintain focus, and inserting the dialog content after that element will make the content inside the dialog next in the screen-reader reading order and next in the tab order. The dialog can still be absolutely positioned to be elsewhere on the page visually. This can be done either by creating the dialog in the HTML and hiding it with CSS, as in the example below, or by inserting it immediately after the triggering element with script.
Ensure that the HTML inside the dialog div meets the same accessibility standard as other content.
It is also nice, but not always necessary, to make the launching link toggle the dialog open and closed, and to close the dialog when the keyboard focus leaves it.
@@ -20,7 +20,7 @@
An options button that opens a dialog
The HTML for this example includes a triggering Element, in this case a button, and a div that acts as the frame for the dialog.
The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM.
-
In this example, the Submit and Reset buttons inside the dialog simply hide the div.
+
In this example, the Submit and Reset buttons inside the dialog simply hide the div.
The example uses JavaScript in the "accToggle.js" file to store the initial pre-enhanced version of the web page, created solely from the HTML in the source code, so that it can act as a "conforming alternate version" for any later enhanced versions of the web page; and inserts a toggle link into all enhanced versions of the web page which allows a user to revert the web page back to the stored pre-enhanced "Conforming Alternate Version". Note: The "sayhello.js" file is simply there as an example payload external file, and is to be replaced by any other external scripts which are desired.
-
The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the body element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).
+
The script in the acctoggle.js file stores the pre-enhanced version - assigning the version the url postfix #accessible. Clicking the "WCAG 2 conforming alternate version" link (inserted as the first child of the body element in any enhanced versions) changes the url to include the postfix "#accessible" which then resets the html located in the body element and the head element to pre-enhanced code. The pre-enhanced state can be reached from the link, or directly from a url typed into the browser. In addition, a link is inserted into the pre-enhanced "Conforming Alternate Version" which allows the user to re-enhance the web page (something which can also be done using the web browser's back button).
The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, by using JavaScript to evaluate the prefers-reduced-motion CSS Media Query.
+
The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, by using JavaScript to evaluate the prefers-reduced-motion CSS Media Query.
Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling the content, which is under the user's control) it can trigger vestibular disorders.
Media queries that selectively enable/disable JavaScript-driven animations based on operating system or user agent preferences allow users to avoid those triggers.
The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.
The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
+
The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
Examples
Percent font sizes in CSS
-
This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
+
This example defines the font size for the strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
+
The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.
Examples
Named font sizes in CSS
-
This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
+
This example selects a larger font size for strong elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.
Check that the value of the CSS property that defines the font size is one of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger.
+
Check that the value of the CSS property that defines the font size is one of xx-small, x-small, small, medium, large, x-large, xx-large, smaller, or larger.
The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
+
The objective of this technique is to specify text font size in em units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the body element, all other elements inherit that value, unless overridden by a more specific selector.
Examples
-
em font sizes in CSS
+
em font sizes in CSS
This example defines the font size for strong element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.
The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.
-
Text-based form controls include input boxes (text and textarea) as well as buttons.
+
Text-based form controls include input boxes (text and textarea) as well as buttons.
Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
+
Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
Eric Meyer - Unitless line heights
diff --git a/techniques/css/C22.html b/techniques/css/C22.html
index 35f8adf1a9..5347ffea1e 100644
--- a/techniques/css/C22.html
+++ b/techniques/css/C22.html
@@ -28,19 +28,19 @@
Description
It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.
The following CSS properties are useful to style text and avoid the need for text in images:
-
The font-family property is used to display the code aspect in a monospace font family.
-
The text-align property is used to display the text to the right of the viewport.
-
The font-size property is used to display the text in a larger size.
-
The font-style property is used to display text in italics.
-
The font-weight property is used to set how thick or thin characters in text should be displayed.
-
The color property is used to display the color of text or text containers.
-
The line-height property is used to display the line height for a block of text.
-
The text-transform property is used to control the case of letters in text.
-
The letter-spacing property is used to control the spacing of letters in text.
-
The background-image property can be used to display text on a non-text background.
-
The ::first-line pseudo-element can be used to modify the presentation of the first line in a block of text.
-
The ::first-letter pseudo-element can be used to modify the presentation of the first letter in a block of text.
-
The ::before and ::after pseudo-elements can be used to insert decorative non-text content before or after blocks of text.
+
The font-family property is used to display the code aspect in a monospace font family.
+
The text-align property is used to display the text to the right of the viewport.
+
The font-size property is used to display the text in a larger size.
+
The font-style property is used to display text in italics.
+
The font-weight property is used to set how thick or thin characters in text should be displayed.
+
The color property is used to display the color of text or text containers.
+
The line-height property is used to display the line height for a block of text.
+
The text-transform property is used to control the case of letters in text.
+
The letter-spacing property is used to control the spacing of letters in text.
+
The background-image property can be used to display text on a non-text background.
+
The ::first-line pseudo-element can be used to modify the presentation of the first line in a block of text.
+
The ::first-letter pseudo-element can be used to modify the presentation of the first letter in a block of text.
+
The ::before and ::after pseudo-elements can be used to insert decorative non-text content before or after blocks of text.
@@ -141,8 +141,8 @@
The CSS component
-
Using CSS line-height to control spacing between lines of text
-
The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.
+
Using CSS line-height to control spacing between lines of text
+
The CSS line-height property is used to display the line height for the paragraph at twice the height of the font.
The HTML component
@@ -156,7 +156,7 @@
The CSS component
p { line-height:2; }
-
The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.
+
The CSS line-height property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.
The HTML component
@@ -178,8 +178,8 @@
The CSS component
-
Using CSS letter-spacing to space text
-
The CSS letter-spacing property is used to display the letters farther apart in the heading.
+
Using CSS letter-spacing to space text
+
The CSS letter-spacing property is used to display the letters farther apart in the heading.
The CSS letter-spacing property is used to display the letters closer together in the second line of text.
+
The CSS letter-spacing property is used to display the letters closer together in the second line of text.
The HTML component
@@ -213,9 +213,9 @@
The CSS component
-
Using CSS background-image to layer text and images
+
Using CSS background-image to layer text and images
-
The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.
+
The CSS font-style property is used to display the textual component of a banner and background-image property is used to display a picture behind the text.
The HTML component
@@ -249,9 +249,9 @@
The CSS component
-
Using CSS ::first-line to control the presentation of the first line of text
+
Using CSS ::first-line to control the presentation of the first line of text
-
The CSS ::first-line pseudo-element is used to display the first line of text in a larger, red font.
+
The CSS ::first-line pseudo-element is used to display the first line of text in a larger, red font.
The HTML component
@@ -266,9 +266,9 @@
The CSS component
-
Using CSS ::first-letter to control the presentation of the first letter of text
+
Using CSS ::first-letter to control the presentation of the first letter of text
-
The CSS ::first-letter pseudo-element is used to display the first letter in a larger font size, red and vertically aligned in the middle.
+
The CSS ::first-letter pseudo-element is used to display the first letter in a larger font size, red and vertically aligned in the middle.
There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.
When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.
-
The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.
+
The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.
Specifying the size of text containers using em units
+
Specifying the size of text containers using em units
ID: C28
Technology: css
@@ -17,7 +17,7 @@
When to Use
Description
-
The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
+
The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in em units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.
The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.
The containers generally control the placement of text within the web page and can include layout elements, structural elements and form controls.
@@ -28,31 +28,31 @@
Description
Examples
-
em units for sizes for layout container containing text
+
em units for sizes for layout container containing text
-
In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the web page. The navigation menu consists of a list of text links, with id value of "nav_list". The text size for the navigation links and the width of the container are specified in em units.
+
In this example, a div element, with id value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the web page. The navigation menu consists of a list of text links, with id value of "nav_list". The text size for the navigation links and the width of the container are specified in em units.
In this example, input elements that contain text or accept text input by the user have been given the class name "form1". CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).
+
In this example, input elements that contain text or accept text input by the user have been given the class name "form1". CSS rules are used to define the font size in percent units and width for these elements in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).
input.form1 { font-size: 100%; width: 15em; }
-
em units in dropdown boxes
+
em units in dropdown boxes
-
In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.
+
In this example, select elements have been given the class name "pick." CSS rules are used to define the font size in percent units and width in em units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.
select.pick { font-size: 100%; width: 10em; }
-
em units for non-text-based form controls
+
em units for non-text-based form controls
-
In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
+
In this example, input elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.
input.choose { width: 1.2em; height: 1.2em; }
@@ -63,7 +63,7 @@
Tests
Procedure
Identify containers that contain text or allow text input.
-
Check the container's width and/or height are specified in em units.
+
Check the container's width and/or height are specified in em units.
Using the following CSS will cause long URLs to break at appropriate places (hyphens, forward slashes, etc.) and within words without causing reflow.
List of CSS declarations used and why they are used:
-
overflow-wrap: break-word: Allows words to be broken and wrapped within words.
-
word-wrap: break-word: Allows words to be broken and wrapped within.
+
overflow-wrap: break-word: Allows words to be broken and wrapped within words.
+
word-wrap: break-word: Allows words to be broken and wrapped within.
a {
overflow-wrap: break-word;
diff --git a/techniques/css/C34.html b/techniques/css/C34.html
index 5b8127580c..7888e75f6e 100644
--- a/techniques/css/C34.html
+++ b/techniques/css/C34.html
@@ -20,7 +20,7 @@
When to Use
Description
-
The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height, and min-width media queries techniques that adapt to the available space of the viewport.
+
The objective of this technique is to be able to present content with sticky headers and footers when there is enough space. This is done by using min-height, max-height, and min-width media queries techniques that adapt to the available space of the viewport.
Sticky regions always stay visible in the viewport while the other content will disappear underneath when scrolling. In terms of content visibility, this is often not a problem on the desktop and on mobile devices in portrait orientation. However, when using mobile devices in landscape orientation or when zooming in on the desktop, sticky regions may block a big portion of the screen: the height of the sticky region may leave only a small part of the screen for the display of page content.
@@ -30,9 +30,9 @@
Description
The basic approach for un-fixing sticky headers / footers is to:
-
Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space;
+
Define the first sticky regions using media query min-height properties, so they get fixed or un-fixed depending on the available space;
-
Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device.
+
Define other sticky regions using media query min-width and max-height properties for specific viewport sizes, so they get fixed or un-fixed depending on the available space, e.g. for tablets depending on the portrait or landscape position of the device.
@@ -40,7 +40,7 @@
Description
Examples
Un-fix sticky headers / footers in HTML and CSS
-
The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the min-height property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS min-height, max-height and min-width media query properties.
+
The following example uses HTML and CSS to un-fix sticky headers / footers. The sticky regions get un-fixed as the height of the viewport is limited or the orientation is changed. When the min-height property matches the viewport space defined via media queries, regions which are not sticky get fixed or vice versa. This particular example uses the CSS min-height, max-height and min-width media query properties.
allow the containers to expand in the direction of text.
There is some variability in the width that words or phrases will grow to when setting the letter and word spacing. If elements must use a fixed width, a safe value is 20% wider than the default maximum width. For example, if a small text-container allows for 20 characters, allowing enough width for 24 characters should allow enough space for text-spacing to be applied.
-
For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.
+
For boxes which can expand with the text, authors can take advantage of the inline-block value of the CSS display property and not set negative margins to allow for text-spacing overrides.
Examples
When a user adapts the page to increase the text spacing, text fits within the bounds of its containing box.
-
The ex unit has been used as as the closest available unit for character width, exRepresents the x-height of the element's font. (MDN page for CSS units). It is not perfect, different characters have different default widths.
+
The ex unit has been used as as the closest available unit for character width, exRepresents the x-height of the element's font. (MDN page for CSS units). It is not perfect, different characters have different default widths.
A box sized with space to allow for expansion
The containers are sized to a value greater than the default width of the text.
The objective of this technique is to allow a user to override text spacing via user stylesheet, bookmarklet, extension, or application. Increased spacing between paragraphs, lines, words, and characters benefits people with low vision or some cognitive disabilities. Content needs to allow spacing changes without loss of content or functionality, so text containers must either have room for the text to expand or the container must be able to expand. This technique will typically apply to short strings of text such as in a navigation bar, as longer strings of text are increasingly likely to require wrapping to be readable when styles are changed.
-
In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.
+
In English languages, if authors do not set the CSS height property, it can help ensure paragraphs expand. Paragraphs need to allow text to increase vertically for languages or scripts such as English which are read horizontally or to increase horizontally for languages or scripts which are read vertically.
The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS max-width and height property techniques that adapt to the available space and keep the original dimensions of the image.
+
The objective of this technique is to be able to present images without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for content intended to scroll horizontally. This is done by using CSS max-width and height property techniques that adapt to the available space and keep the original dimensions of the image.
Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures images do not break out of their layout area, including in one-column layouts where it would cause scrolling.
The basic principles of fitting images are to:
-
Define the max-width property for images, and;
-
Define the height property for images, so they enlarge or shrink in the available space and respond to zoom levels.
+
Define the max-width property for images, and;
+
Define the height property for images, so they enlarge or shrink in the available space and respond to zoom levels.
All images require design finesse by making sure the original size fits the biggest size of the available spaces to achieve good-looking results at a wide range of viewport sizes and zoom levels.
@@ -35,7 +35,7 @@
Examples
Fitting images in HTML and CSS
The following simple example uses HTML and CSS to create a fitting image. The layout regions adjust their size as the viewport is adjusted. The images subsequently adjust their size to fit within the layout region containers.
-
The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions.
+
The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses a percent size for the max-width and auto size for the height of the image to remain the original dimensions.
Using CSS width, max-width and flexbox to fit labels and inputs
+
Using CSS width, max-width and flexbox to fit labels and inputs
Metadata
@@ -18,7 +18,7 @@
When to Use
Description
-
The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for width, max-width and flexbox that adapt to the available space.
+
The objective of this technique is to be able to present labels and inputs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels for content intended to scroll vertically. When space is limited in the viewport for the label and input to sit next to each other horizontally, they will be changed to a vertical alignment. This is done by using CSS properties for width, max-width and flexbox that adapt to the available space.
Responsive layouts can add or remove columns or layout blocks, and each part of the layout can be wider or smaller at different points. This technique ensures labels and inputs do not break out of their layout area, including in one-column layouts where it would cause horizontal scrolling.
@@ -38,7 +38,7 @@
Examples
Fitting labels, inputs and flexbox layout with HTML and CSS.
The following example uses HTML and CSS to fit labels and inputs within various width containers, including the viewport. The layout regions adjust their size as the viewport is adjusted. The labels and inputs subsequently adjust their size to fit within the layout region containers.
-
The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.
+
The zoom level can be increased to 400% without requiring horizontal scrolling. This particular example uses a percent size for the width and max-width for the labels and inputs. The max-width is applied in order to fix elements spilling out of the grid in a cross-browser way, as replaced elements such as the select have intrinsic sizing.
The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, via the use of the prefers-reduced-motion CSS Media Query.
+
The objective of this technique is to allow users to prevent animations (including motion animations) from being displayed on web pages, via the use of the prefers-reduced-motion CSS Media Query.
Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling the content, which is under the user's control) it can trigger vestibular disorders.
Media queries that selectively enable/disable CSS-driven animations based on operating system or user agent preferences allow users to avoid those triggers.
The understanding document for Animation from Interactions includes links for changing the 'reduced motion' setting.
This technique only guarantees that an indicator will pass if the entire indicator is drawn over the background, not within the boundary of the focused component, and if the entire background behind the indicator is one single, solid color. For example, if the background is an image or gradient, or if the indicator is partially overlaid on top of a different UI component, it may still be necessary to compare the indicator pixel-by-pixel against the background.
-
In CSS, two-color indicators can be implemented by combining the outline and box-shadow properties with the :focus or :focus-visible pseudo-classes.
+
In CSS, two-color indicators can be implemented by combining the outline and box-shadow properties with the :focus or :focus-visible pseudo-classes.
-
Avoid setting outline: none to use box-shadow on its own. User agents commonly suppress the box-shadow property in forced-color modes, so authors should avoid relying on box-shadow alone to implement focus indicators. If box-shadow only styling is required, consider combining it with an outline: 2px transparent solid property to ensure compatibility with forced-color modes.
+
Avoid setting outline: none to use box-shadow on its own. User agents commonly suppress the box-shadow property in forced-color modes, so authors should avoid relying on box-shadow alone to implement focus indicators. If box-shadow only styling is required, consider combining it with an outline: 2px transparent solid property to ensure compatibility with forced-color modes.
Using min-height and min-width to ensure sufficient target spacing
+
Using min-height and min-width to ensure sufficient target spacing
Metadata
@@ -26,7 +26,7 @@
Examples
The following examples can be seen as rendered versions in the working examples.
-
Using a display value of inline-block, min-height, and min-width
+
Using a display value of inline-block, min-height, and min-width
The first example shows a situation where the targets (in this case, the linked numbers in the pagination navigation) are smaller than 44 × 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.
@@ -56,8 +56,8 @@
The CSS
-
Using a display value of flex and min-height / width
-
The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing success criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.
+
Using a display value of flex and min-height / width
+
The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing success criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.
Example of using CSS to ensure enough spacing within targets
diff --git a/techniques/css/C43.html b/techniques/css/C43.html
index 4ef4dd0e6c..3c72c24857 100644
--- a/techniques/css/C43.html
+++ b/techniques/css/C43.html
@@ -5,7 +5,7 @@
-
Using CSS scroll-padding to un-obscure content
+
Using CSS scroll-padding to un-obscure content
Metadata
@@ -18,18 +18,18 @@
When to Use
Description
-
The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using CSS padding and scroll-padding properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.
+
The objective of this technique is to ensure that user interface components (for example: links, buttons, and form fields) that are initially completely obscured by a fixed-position component can still be accessed by users. In this example, this is achieved using CSS padding and scroll-padding properties to create space underneath the site footer and allow the link in the footer to scroll into view when it is focused with a keyboard.
Examples
-
Using CSS scroll-padding to un-obscure content
+
Using CSS scroll-padding to un-obscure content
This example shows a situation where there is a fixed-position banner at the bottom of the screen that is covering up the site footer, which contains a link. This type of fixed-position banner is a common design for cookie-consent banners.
Using CSS :focus-visible to provide keyboard focus indication
+
Using CSS :focus-visible to provide keyboard focus indication
Metadata
@@ -18,24 +18,24 @@
When to Use
Description
-
The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS :focus-visible pseudo-class.
-
Styles defined with the regular :focus pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show :focus-visible styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally not show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <input> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).
+
The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS :focus-visible pseudo-class.
+
Styles defined with the regular :focus pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show :focus-visible styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally not show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as <input> elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).
This satisfies the requirement of providing a mode of operation where the keyboard focus indicator is visible.
This technique is only sufficient if it uses styles that provide a visible focus indicator.
-
There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.
+
There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit :focus style for these cases.
Examples
-
Using CSS :focus-visible to provide keyboard focus indication
+
Using CSS :focus-visible to provide keyboard focus indication
In this example, we have a standard <button> control in the HTML.
By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using Tab.
-
In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
In order to make this focus indication more prominent, we use the :focus-visible pseudo-class selector to define a more intentional and pronounced focus style.
In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the dd element indented.
+
In this example structural markup (description lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the dd element indented.
The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link and styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.
-
This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow:hidden. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these have the effect of hiding the text from assistive technology in addition to preventing on-screen display.
+
This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow:hidden. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use visibility:hidden or display:none properties, since these have the effect of hiding the text from assistive technology in addition to preventing on-screen display.
This technique is not a method for hiding complete links, only a section of text within a link. The resources section includes methods for hiding and showing links aimed at screen reader users.
This technique to hide link text has been advocated by some screen reader users and corporate web authors. It has proved effective on some websites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for web pages that do not have repetitive content in the hidden text areas.
The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.
+
The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS letter-spacing property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.
The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.
Background images can be included with the following CSS properties:
-
background;
-
background-image;
-
content, combined with the ::before and ::after pseudo-elements;
-
list-style-image.
+
background;
+
background-image;
+
content, combined with the ::before and ::after pseudo-elements;
+
list-style-image.
This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.
The up-event does not reverse the outcome of the activation;
It is not essential for the functionality to execute and complete on the down-event.
-
Rather than taking advantage of the click event, authors may use down-events such as mousedown, touchstart or pointerdown. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.
+
Rather than taking advantage of the click event, authors may use down-events such as mousedown, touchstart or pointerdown. As a result, functionality will be executed as soon as a mouse button is pressed (but not released yet), or a finger or stylus makes contact with a touchscreen.
It is possible to use the down event and mitigate potential issues to avoid failing the Success Criterion. For example, provide a method to easily undo or abort the functionality, or reverse the outcome on the up-event (when the mouse button is released, or when the finger or stylus are lifted from the touchscreen). And note that some uses of the down-event are essential for the functionality (e.g., where the control simulates the operation of a musical instrument like a set of piano keys, or when the control is used as an on-screen control for a game where a fast and immediate response is required), in which case they would not fail this Success Criterion.
-
The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as mousedown, touchstart, or pointerdown. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.
+
The test procedure outlined below could be supplemented with automated or semi-automated tests to scan for JavaScript that registers event listeners such as mousedown, touchstart, or pointerdown. The automated test would not be sufficient to make a pass/fail determination, but it can help narrow down the number of potentially problematic controls.
@@ -37,7 +37,7 @@
Examples
A close button that triggers on down-events
-
A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the click event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.
+
A modal dialog contains a lengthy form that a user needs to complete. The modal provides a simple "Close" control that closes the dialog and loses all information the user may already have entered in the form. However, instead of simply listening to the click event - which in most user agents is triggered on the up-event - the author decided to close the dialog on the down-event. This may lead to the user accidentally closing the dialog and losing all the data they entered into the form up to that point.
<!-- modal dialog with a form -->
...
<button id="close" type="button">Close</button>
diff --git a/techniques/failures/F103.html b/techniques/failures/F103.html
index e25253a719..4b3e29c807 100644
--- a/techniques/failures/F103.html
+++ b/techniques/failures/F103.html
@@ -32,11 +32,11 @@
Description
Where updated content does not conform to the definition of status messages, a failure of 4.1.3 has not taken place.
The second step in this failure technique involves examining code. Where dynamic content meets the definition of a status message, its container can be examined for an appropriate WAI-ARIA role or property which allows it to be programmatically determinable as a status message. Currently there are only a small number of techniques available to indicate status messages to assistive technologies. They are:
-
the HTML output element
-
role="status"
-
role="alert"
-
role="log"
-
the use of an aria-live attribute on an element, set to either "polite" or "assertive"
+
the HTML output element
+
role="status"
+
role="alert"
+
role="log"
+
the use of an aria-live attribute on an element, set to either "polite" or "assertive"
The absence of all of these techniques predicts a failure for the status message be announced to the user. Additionally, if the role or property is not set before the dynamic content is added, this also predicts a failure.
Since additional techniques may exist to alert an assistive technology, the final step of this failure technique is confirming whether an assistive technology (such as a screen reader) detects the dynamic content and exposes the information to users. Where a status message exists but is not surfaced by assistive technology, it is confirmation that a failure has taken place.
The purpose of this technique is to identify and test a failure condition where part of the content clips and is unreadable when the user overrides the spacing of the text within the boundaries set out in the Text Spacing success criterion. In general, this failure occurs when text is presented in a size-constrained block which does not expand if the size of the content increases. Some of the ways in which this can occur include:
- Setting the overflow property of the enclosing element to hidden
+ Setting the overflow property of the enclosing element to hidden
Using absolutely positioned content
diff --git a/techniques/failures/F107.html b/techniques/failures/F107.html
index 1e48148a7a..f6ce093c2a 100644
--- a/techniques/failures/F107.html
+++ b/techniques/failures/F107.html
@@ -5,7 +5,7 @@
-
Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values
+
Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values
ID: F107
Technology: failures
@@ -17,9 +17,9 @@
Applicability
Description
-
The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for inputs that request information about the user of the form.
+
The purpose of this technique is to identify a failure condition where form inputs do not have the correct autocomplete attribute values for inputs that request information about the user of the form.
-
Success Criterion 1.3.5 uses a fixed list of tokens in Input Purposes for user interface components (based on the HTML 5.2 autocomplete attribute's fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.
+
Success Criterion 1.3.5 uses a fixed list of tokens in Input Purposes for user interface components (based on the HTML 5.2 autocomplete attribute's fixed list of token values) because the programmatic association of specified token values (metadata) allows for other machine processing, such as expressing the input label in different modalities.
Another important part of this success criterion is that the token values are associated with inputs that are scoped directly to the primary end user.
@@ -28,7 +28,7 @@
Description
Examples
Incorrect attribute
-
An online form used to collect the user's name and birthday which uses incorrect autocomplete attributes. The correct attribute value for the first control is name, and for the second control the made-up attribute value birthday was used instead of bday.
+
An online form used to collect the user's name and birthday which uses incorrect autocomplete attributes. The correct attribute value for the first control is name, and for the second control the made-up attribute value birthday was used instead of bday.
A fieldset that prompts a user to "Enter the 2nd, 6th and last characters of your password", with separate input fields for each character.
A fieldset that prompts a user to enter each digit of a verification code in a separate input (unless the user can paste the entire code in the first input, and the remaining inputs are populated automatically).
-
A password input fieldset composed of <select> elements that requires a user to select each character of a fixed-length password from individual dropdown fields.
+
A password input fieldset composed of <select> elements that requires a user to select each character of a fixed-length password from individual dropdown fields.
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
-
Using CSS to style the p element to look like a heading
+
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 Assistive Technology could not distinguish it as a heading.
@@ -21,7 +21,7 @@
Using CSS to style the p element to look
-
In this case, the proper approach would be to use CSS to style the H1 element in HTML.
+
In this case, the proper approach would be to use CSS to style the H1 element in HTML.
diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
index ac63a8a4a1..f217e6dee1 100644
--- a/techniques/failures/F38.html
+++ b/techniques/failures/F38.html
@@ -5,19 +5,19 @@
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.
+
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
-
Decorative images that have no alt
- attribute and no role attribute
+
Decorative images that have no alt
+ attribute and no role attribute
Tests
Procedure
-
For any img element that is used for purely decorative content:
+
For any img element that is used for purely decorative content:
-
Check whether the element has no role attribute or has a role attribute value that is not presentation.
-
Check whether the element has no alt attribute or has an alt attribute with a value that is not null.
+
Check whether the element has no role attribute or has a role attribute value that is not presentation.
+
Check whether the element has no alt attribute or has an alt attribute with a value that is not null.
Expected Results
diff --git a/techniques/failures/F39.html b/techniques/failures/F39.html
index c575271fe2..25bf156032 100644
--- a/techniques/failures/F39.html
+++ b/techniques/failures/F39.html
@@ -15,7 +15,7 @@
of this Success Criterion.
Examples
-
Decorative images that have no alt attribute
+
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
diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html
index 90cd0e3fe4..9b174febff 100644
--- a/techniques/failures/F40.html
+++ b/techniques/failures/F40.html
@@ -3,7 +3,7 @@
ID: F40
Technology: failures
Type: Failure
When to Use
All pages
Description
-
meta http-equiv content="{time} url=..." is often used to
+
meta http-equiv content="{time} url=..." is often used to
automatically redirect users. When this occurs after a time delay, it is an
unexpected change of context that may interrupt the user.
It is acceptable to use the meta element to create a redirect
@@ -33,7 +33,7 @@
Tests
Procedure
-
For a page that uses meta http-equiv="refresh":
+
For a page that uses meta http-equiv="refresh":
Check that the numerical value for seconds until refresh in the content attribute is present.
Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
meta http-equiv of refresh is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.
+
meta http-equiv of refresh is often used to periodically refresh pages or to redirect users to another page. If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh.
Examples
@@ -23,13 +23,13 @@
Examples
Tests
Procedure
-
For a page that uses meta http-equiv="refresh":
+
For a page that uses meta http-equiv="refresh":
-
Check that the numerical value for seconds until refresh in the content attribute is present.
-
Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
+
Check that the numerical value for seconds until refresh in the content attribute is present.
+
Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.
-
Check if the page does not refresh after the duration specified in the content attribute.
+
Check if the page does not refresh after the duration specified in the content attribute.
Expected Results
diff --git a/techniques/failures/F42.html b/techniques/failures/F42.html
index 798048f15b..0d0ccbc22e 100644
--- a/techniques/failures/F42.html
+++ b/techniques/failures/F42.html
@@ -7,23 +7,23 @@
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.
-
The a and area
+
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
-
Scripting a span element
+
Scripting a span element
-
Scripted event handling is added to a span element so
+
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.
Scripted event handling is added to an img element so
+
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.
@@ -31,10 +31,10 @@
Scripting an img element
-
Scripting an img element, with keyboard
+
Scripting an img element, with keyboard
support
-
Scripted event handling is added to an img element so
+
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
@@ -62,12 +62,12 @@
Scripting an img element, with keyboard
</p>
-
Scripting a div element
+
Scripting a div element
-
This example uses script to make a div element behave
+
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
+ repurposing of the content, the div element will not be
recognized as a link by assistive technology.
window.onload = init;
@@ -97,7 +97,7 @@
Scripting a div element
window.location.href = strLocation;
}
-
The markup for the div element is:
+
The markup for the div element is:
<div id="linklike">View the results of the survey.</div>
diff --git a/techniques/failures/F43.html b/techniques/failures/F43.html
index b382c78ab8..d956578c9e 100644
--- a/techniques/failures/F43.html
+++ b/techniques/failures/F43.html
@@ -13,7 +13,7 @@
<th> or <caption>
elements.
-
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.
+
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
@@ -46,7 +46,7 @@
Using heading elements for presentational effect
<p>A study was conducted in early 2006 ...</p>
-
Using blockquote elements to provide additional
+
Using blockquote elements to provide additional
indentation
The following example uses blockquote for text that is
diff --git a/techniques/failures/F44.html b/techniques/failures/F44.html
index b28cb68e32..8e40077650 100644
--- a/techniques/failures/F44.html
+++ b/techniques/failures/F44.html
@@ -63,7 +63,7 @@
Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table:
- headers attributes
+ headers attributes
- scope attributes
+ scope attributes
Assistive technologies use the structure of an HTML table to present data to
diff --git a/techniques/failures/F49.html b/techniques/failures/F49.html
index 364869b9ca..b3d9ef74d4 100644
--- a/techniques/failures/F49.html
+++ b/techniques/failures/F49.html
@@ -3,7 +3,7 @@
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
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.
+
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
presentation is lost because HTML tables used to control the visual
diff --git a/techniques/failures/F59.html b/techniques/failures/F59.html
index 2b58b4a030..e5a06b788f 100644
--- a/techniques/failures/F59.html
+++ b/techniques/failures/F59.html
@@ -6,12 +6,12 @@
technology. Assistive technologies rely on knowledge of the role and current
state of a component in order to provide that information to the user. Many
HTML elements have well defined roles, such as links, buttons, text fields,
- etc. Generic elements such as div and span do not
+ etc. Generic elements such as div and span do not
have any predefined roles. When these generic elements are used to create
user interface controls in HTML the assistive technology may not have the
necessary information to describe and interact with the control.
Attaching event handlers to elements that are not normally interactive, such
- as span and div, can be disorienting to
+ as span and div, can be disorienting to
users. Even if care is taken to provide keyboard access to such elements,
users may have a difficult time discovering that there are interactive
controls in the content or understanding what type of behavior to expect
@@ -29,7 +29,7 @@
<img src="unchecked.gif" id="chkbox" alt=""> Include Signature
</span>
</p>
-
Here is the scripting code which changes the image source when the span is clicked with the mouse.
+
Here is the scripting code which changes the image source when the span is clicked with the mouse.
var CHECKED = "check.gif";
var UNCHECKED = "unchecked.gif";
function toggleCheckbox(imgId) {
diff --git a/techniques/failures/F63.html b/techniques/failures/F63.html
index 9086bbac28..9d324512df 100644
--- a/techniques/failures/F63.html
+++ b/techniques/failures/F63.html
@@ -4,7 +4,7 @@
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
-
via a suitable ARIA property such as aria-label or aria-labelledby
+
via a suitable ARIA property such as aria-label or aria-labelledby
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.
@@ -42,7 +42,7 @@
A Link in an Adjacent Cell Within a Layout Table
Locate links where some additional link context is needed to understand the purpose of the link. For each link:
Check whether the context is contained in the same sentence, paragraph, list item, table cell, or associated table headers.
-
Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as aria-label, aria-labelledby or aria-describedby on the link to provide sufficient context
+
Check whether the link context can be programmatically determined in some other way, for example, by using a WAI-ARIA property such as aria-label, aria-labelledby or aria-describedby on the link to provide sufficient context
Expected Results
diff --git a/techniques/failures/F65.html b/techniques/failures/F65.html
index 5b5447ac96..d8d1c576e7 100644
--- a/techniques/failures/F65.html
+++ b/techniques/failures/F65.html
@@ -1,9 +1,9 @@
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
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 Name and Description Computation described the method of deriving text alternative from the HTML and WAI-ARIA attributes of an element.
+
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 Name and Description Computation described the method of deriving 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.
+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
@@ -15,12 +15,12 @@
Missing text alternative
Tests
Procedure
-
Identify img, area, and input elements of type image. For each of these elements:
+
Identify img, area, and input elements of type image. For each of these elements:
-
Check if the alt attribute is present.
-
Check if aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.
-
Check if the aria-label attribute is present AND check if aria-label is accessibility supported.
Check if aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.
+
Check if the aria-label attribute is present AND check if aria-label is accessibility supported.
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.
+
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:
+
Elements that can use an explicitly-associated label element are:
- input
+ input
- textarea
+ textarea
- select
+ select
-
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):
+
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button):
-
Submit and Reset buttons (<input type="submit"> or <input type="reset">)
-
Image buttons (<input type="image">)
-
Hidden input fields (<input type="hidden">)
-
Buttons (button elements or <input type="button">)
+
Submit and Reset buttons (<input type="submit"> or <input type="reset">)
+
Image buttons (<input type="image">)
+
Hidden input fields (<input type="hidden">)
+
Buttons (button elements or <input type="button">)
Examples
-
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.
+
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.
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.
+
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.
For all input, textarea, and select elements in the web page (except inputs of type hidden, submit, reset, or button:
+
For all input, textarea, and select elements in the web page (except inputs of type hidden, submit, reset, or button:
Check that each element has a programmatically determined name using one of the following ways:
-
the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).
-
the control is programmatically determined through the value of its aria-label attribute.
-
the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the input element).
-
the control is contained within a label element that also contains the label text.
-
the control is an input of typeimage and the alt attribute provides a text label.
-
the control is programmatically determined through the value of title attribute.
+
the text label or labels are programmatically associated with the control element via the aria-labelledby attribute (each id given as a value in the aria-labelledby attribute matches the id of the text label element).
+
the control is programmatically determined through the value of its aria-label attribute.
+
the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the input element).
+
the control is contained within a label element that also contains the label text.
+
the control is an input of typeimage and the alt attribute provides a text label.
+
the control is programmatically determined through the value of title attribute.
diff --git a/techniques/failures/F77.html b/techniques/failures/F77.html
index 531f2be0f7..90caaa74a8 100644
--- a/techniques/failures/F77.html
+++ b/techniques/failures/F77.html
@@ -6,27 +6,27 @@
Failure of Success Criterion 4.1.1 due to duplicate values of type ID
Failure of Success Criterion 4.1.1 due to duplicate values of type ID
ID: F77
Technology: failures
Type: Failure
When to Use
HTML, and any XML-based markup languages including SVG
Description
-
This describes a failure condition where duplicate id errors are known to cause problems for assistive technologies when they are trying to interact with content. Duplicate values of type id can be problematic for user agents that rely on this attribute to accurately convey relationships between different parts of content to users. For example, a screen reader may use id values to identify the applicable header content for a data cell within a data table, or an input control to which a given label applies. If these values are not unique, the screen reader will be unable to programmatically determine which headers are associated with the data cell or which control is associated with which label or name.
-
Checking that id attribute values are unique within a document can be done by validating the document against its specification, because the specification defines which attributes contain document-wide unique identifiers.
+
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.
+
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.
Examples
-
An author uses an online validation service to check that all id attribute values are unique.
+
An author uses an online validation service to check that all id attribute values are unique.
-
A developer utilizes features in their authoring tool to ensure that id attribute values are unique.
+
A developer utilizes features in their authoring tool to ensure that id attribute values are unique.
Tests
Procedure
-
Check that all values of type id are unique in the web page
+
Check that all values of type id are unique in the web page
In the following example of a failure, the HTML align attribute is used to create justified text.
+
In the following example of a failure, the HTML align attribute is used to create justified text.
<p align="justify">
Peter Piper picked a peck of pickled peppers
diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html
index 38eee87f45..0e3cd0371c 100644
--- a/techniques/failures/F89.html
+++ b/techniques/failures/F89.html
@@ -7,7 +7,7 @@
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 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."
Check whether the link contains only non-text content.
-
Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt=""
+
Check whether the non-text content has been implemented in a way that it can be ignored by assistive technologies, such as using role="presentation" or alt=""
.
-
Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.
+
Check that the link does not have an accessible name provided in another way such as aria-label or aria-labelledby.
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.
+
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.
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.
+
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:
<table>
diff --git a/techniques/failures/F91.html b/techniques/failures/F91.html
index 2ef437b939..0e90aa2d81 100644
--- a/techniques/failures/F91.html
+++ b/techniques/failures/F91.html
@@ -1,12 +1,12 @@
Failure of Success Criterion 1.3.1 for not correctly marking up table headers
Failure of Success Criterion 1.3.1 for not correctly marking up table headers
ID: F91
Technology: failures
Type: Failure
When to Use
HTML
Description
-
This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA columnheader and rowheader) roles to make the headers programmatically determinable from within table content. Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.
+
This failure occurs when data tables do not use header elements (th) or other appropriate table mark-up (the scope attribute, headers and id or the ARIA columnheader and rowheader) roles to make the headers programmatically determinable from within table content. Making headers programmatically determinable is especially important when data cells are only intelligible together with header information. When screen reader users navigate through the table content horizontally or vertically, the headers that change can be read out to provide the necessary context for the information in the data cells.
Examples
Headers not marked up appropriately
-
This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
+
This table does not use th (or other appropriate header markup) for headers. Instead, it uses td elements for all cells. Navigating cell by cell, screen readers will often fail to read the header cells associated with content.
Example Code:
<table>
@@ -51,11 +51,11 @@
Headers not marked up appropriately
For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms:
-
headers marked up with table header (th) elements
-
scope attributes on th for tables with more than a single row or column of table headers.
-
headers and data cells associated using headers and id attributes
-
headers marked up as td elements with the scope attribute
-
headers marked up with ARIA role attributes rowheader or columnheader
+
headers marked up with table header (th) elements
+
scope attributes on th for tables with more than a single row or column of table headers.
+
headers and data cells associated using headers and id attributes
+
headers marked up as td elements with the scope attribute
+
headers marked up with ARIA role attributes rowheader or columnheader
Expected Results
diff --git a/techniques/failures/F92.html b/techniques/failures/F92.html
index 8eb6ae11e4..19394a5184 100644
--- a/techniques/failures/F92.html
+++ b/techniques/failures/F92.html
@@ -1,9 +1,9 @@
Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information
ID: F92
Technology: failures
Type: Failure
When to Use
HTML
Description
-
This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as table, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of
- presentation
- on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the presentation role for content which should convey semantic information may prevent the user from understanding that content.
+
This failure occurs when a role of presentation is applied to an element whose purpose is to convey information or relationships in the content. Elements such as table, can convey information about the content contained in them via their semantic markup. The WAI-ARIA role of
+ presentation
+ on the other hand, is intended to suppress semantic information of content from the accessibility API and prevent user agents from conveying that information to the user. Use of the presentation role for content which should convey semantic information may prevent the user from understanding that content.
Examples
@@ -33,7 +33,7 @@
Check if an element which conveys information, structure, or relationships through its semantic markup
-
Element has the attribute role="presentation".
+
Element has the attribute role="presentation".
diff --git a/techniques/failures/F93.html b/techniques/failures/F93.html
index 573d21b0ca..c8f26a4a2d 100644
--- a/techniques/failures/F93.html
+++ b/techniques/failures/F93.html
@@ -1,17 +1,17 @@
Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays
Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays
ID: F93
Technology: failures
Type: Failure
When to Use
HTML
Description
-
This failure occurs when an audio or video element with an audio track contains the autoplay attribute and does not contain the muted attribute, and no controls or commands have been provided to pause or stop the media resource.
-
When the autoplay attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the muted attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.
+
This failure occurs when an audio or video element with an audio track contains the autoplay attribute and does not contain the muted attribute, and no controls or commands have been provided to pause or stop the media resource.
+
When the autoplay attribute is present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping. When the muted attribute is present, the user agent will initially mute the media resource's audio output, overriding any user preference.
If the media element is shorter than 3 seconds, the failure does not occur. If the user agent provides user preferences to override autoplay behavior, the failure does not occur.
The HTML spec contains the following notes:
-
User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.
-
Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
+
User agents do not need to support autoplay, and it is suggested that user agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the video to play, so as to allow the user to override the behavior if so desired.
+
Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
Examples
An auto-playing audio track
-
In this example, the advertising video contains an audio track. The video will play continuously because of the loop attribute, and the video will start automatically because of the autoplay attribute and because there does not appear to be any controls to allow the user to stop the video.
+
In this example, the advertising video contains an audio track. The video will play continuously because of the loop attribute, and the video will start automatically because of the autoplay attribute and because there does not appear to be any controls to allow the user to stop the video.
The use of a single key keyboard shortcut is not a failure if the shortcut is only active when a particular interface element has focus. For example, when a select element or a custom listbox has focus, the input of single character keys to navigate the list is a useful feature.
The test procedure suggests asking the author (often the developer of the site) whether keyboard shortcuts are used. If that information is trusted then the procedure can be simpler than pressing all the keys.
-
The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a select element. Here, pressing a letter key is used for fast navigation within the select options.
-
Viewing page scripts and searching for typical keyboard event handlers such as document.addEventListener('keydown' ...) or the handling of keyboard-related event properties with code such as .key, .code, .charCode, or .keyCode
+
The success criterion does not apply when single key shortcuts are only active when interface elements have the focus, for example, a select element. Here, pressing a letter key is used for fast navigation within the select options.
+
Viewing page scripts and searching for typical keyboard event handlers such as document.addEventListener('keydown' ...) or the handling of keyboard-related event properties with code such as .key, .code, .charCode, or .keyCode
may establish the presence of scripts that intercept keyboard shortcuts without modification keys like ALT or Ctrl being held down at the same time. As there are several ways of implementing character key events, this method is not considered reliable.
Some browsers employ single key shortcuts with Shift. For example, Firefox opens a page search when pressing Shift + / and a search in page links when pressing Shift + '. In these cases, it will be necessary to press Esc or click an empty part of the page to remove the focus from the browser input.
The objective of this technique is to show how non-text objects in Flash can be marked so that they can be read by assistive technology.
-
The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.
-
When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object.
+
The Flash Player supports text alternatives to non-text objects using the name property in the accessibility object, which can be defined in ActionScript or within Flash authoring tools.
+
When an object contains words that are important to understanding the content, the name property should include those words. This will allow the name property to play the same function on the page as the object. Note that it does not necessarily describe the visual characteristics of the object itself but must convey the same meaning as the object.
Examples
Applying a textual alternative for a symbol (graphic, button or movieclip)
@@ -38,7 +38,7 @@
Applying textual alternatives programmatically in ActionScript 2.0
Applying textual alternatives programmatically in ActionScript 3.0
-
To manage an object's text equivalents programmatically using ActionScript 3, the AccessibilityProperties object and name property must be used. The code example below shows a simple example of how the name property is used to set an objects name in ActionScript.
+
To manage an object's text equivalents programmatically using ActionScript 3, the AccessibilityProperties object and name property must be used. The code example below shows a simple example of how the name property is used to set an objects name in ActionScript.
// 'print_btn' is an instance placed on the movie's main timeline
print_btn.accessibilityProperties = new AccessibilityProperties();
diff --git a/techniques/flash/FLASH11.html b/techniques/flash/FLASH11.html
index d625fba567..c8b8edcb32 100644
--- a/techniques/flash/FLASH11.html
+++ b/techniques/flash/FLASH11.html
@@ -11,7 +11,7 @@
Making a hidden description visible on request
In this example, an image containing statistical data is shown. The image is provided a short textual alternative ("Graph of percentage of total U.S. noninstitutionalized population age 16-64 declaring one or more disabilities"). Below the image, the user can click a button that will overlay a long textual description of the statistical information itself. When the button is clicked, the following actions are taken:
-
The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.
+
The MovieClip containing the long text description is made visible, and its AccessibilityProperties.silent property is set to false to make it visible to assistive technology. Its contents are placed in the tab order.
The original image and button are temporarily hidden from assistive technology and the tab order.
The image and descriptive text were taken from a previously published HTML example for long image descriptions on WebAIM.org
diff --git a/techniques/flash/FLASH12.html b/techniques/flash/FLASH12.html
index 0a7ce7166d..2999c10ef8 100644
--- a/techniques/flash/FLASH12.html
+++ b/techniques/flash/FLASH12.html
@@ -10,9 +10,9 @@
Validating a text field
-
In this example, a sample form is shown with two text fields ('name' and 'zip code'). Both fields are required. When the form's submit button is pressed, the values of the text fields will be validated. If a textfield contains an invalid value, an _accProps object is created for the textfield, and its description property is set the error message.
+
In this example, a sample form is shown with two text fields ('name' and 'zip code'). Both fields are required. When the form's submit button is pressed, the values of the text fields will be validated. If a textfield contains an invalid value, an _accProps object is created for the textfield, and its description property is set the error message.
-
Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.
+
Instead of using the accessible description, the error text can also be added to the accessible name (_accProps.name), which is supported by a wider range of assistive technology than the _accProps.description property.
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.
+
The Flash Player supports long text alternatives to non-text objects, which can be defined in ActionScript or within Flash authoring tools using the description property, as indicated in the examples below.
Examples
Applying a Description for a symbol (graphic, button or movieclip)
@@ -31,7 +31,7 @@
Applying a Description for a symbol (graphic, button or movieclip)
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.
+
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
@@ -46,7 +46,7 @@
Applying Description programmatically in ActionScript 2.0
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.
+
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
diff --git a/techniques/flash/FLASH22.html b/techniques/flash/FLASH22.html
index 23b896cc08..f64469d717 100644
--- a/techniques/flash/FLASH22.html
+++ b/techniques/flash/FLASH22.html
@@ -7,7 +7,7 @@
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
+ 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
@@ -19,7 +19,7 @@
MovieClip used as a button
the tabEnabled. Additionally, redundant event handlers are added so
that the custom button responds to both a mouse click and a space bar
keypress. Finally, the custom button is provided an accessible name
- using the MovieClip's AccessibilityProperties object. This makes the
+ using the MovieClip's AccessibilityProperties object. This makes the
button's label perceivable by assistive technology.
The objective of this technique is to provide an accessible name to
the built in form components provided by Flash. Some components, such
- as radio buttons, checkboxes and buttons, have their own label property.
+ as radio buttons, checkboxes and buttons, have their own label property.
For other components, the developer needs to specify the component's
label text as accessible name. This can be either be achieved through
the Accessibility panel (for components placed on the stage during
@@ -15,11 +15,11 @@
ActionScript 2
In ActionScript 2 the accessible name needs to be set on a component's
- _accProps property. This property must be an object. If the property
+ _accProps property. This property must be an object. If the property
has not been set yet, the developer needs to create a custom object
- and assign it to the _accProps property. The object itself can have
- several accessibility related properties, one of them being _accProps.name,
- which specifies the accessible name. When an _accProps property is
+ and assign it to the _accProps property. The object itself can have
+ several accessibility related properties, one of them being _accProps.name,
+ which specifies the accessible name. When an _accProps property is
updated, the developer must call Accessibility.UpdateProperties() for
the changes to take effect. Before calling Accessibility.UpdateProperties(),
it is recommended to check the System.capabilities.hasAccessibility
@@ -42,13 +42,13 @@
ActionScript 3
In ActionScript 3 the accessible name needs to be set on a component's
- accessibilityProperties property. This property must be an instance
- of flash.accessibility.AccessibilityProperties. If the property has
- not been set yet, the developer needs to create the a new AccessibilityProperties
- instance and assign it to the accessibilityProperties property. The
+ accessibilityProperties property. This property must be an instance
+ of flash.accessibility.AccessibilityProperties. If the property has
+ not been set yet, the developer needs to create the a new AccessibilityProperties
+ instance and assign it to the accessibilityProperties property. The
object itself can have several accessibility related properties, one
- of them being accessibilityProperties.name which specifies the accessible
- name. When an accessibilityProperties property is updated, the developer
+ of them being accessibilityProperties.name which specifies the accessible
+ name. When an accessibilityProperties property is updated, the developer
must call flash.accessibility.Accessibility.UpdateProperties() for the
changes to take effect. Before calling Accessibility.UpdateProperties(),
it is recommended to check the flash.system.capabilities.hasAccessibility
@@ -137,9 +137,9 @@
Setting the accessible name through ActionScript 3.0
The selected component's label text is specified in the Accessibility
Panel's "name" field.
In ActionScript 2.0: Scripting is used to dynamically set the
- component's _accProps.name property
+ component's _accProps.name property
In ActionScript 3.0: Scripting is used to dynamically set the
- component's accessibilityProperties.name property
Using the label property to describe the button's purpose
Using scripting to set the accessible name for an image button using Actionscript 3.0
-
In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.
+
In this example, the button's label property is deliberately set to an empty string. To be perceivable to assistive technology, the button's accessibilityProperties.name property is set.
import fl.controls.Button;
import fl.accessibility.ButtonAccImpl;
diff --git a/techniques/flash/FLASH28.html b/techniques/flash/FLASH28.html
index 9018eb6889..597a0da4a7 100644
--- a/techniques/flash/FLASH28.html
+++ b/techniques/flash/FLASH28.html
@@ -9,7 +9,7 @@
through the visual appearance of groupings of individual characters.
In Flash, such groupings of characters can be made accessible
by wrapping them in a MovieClip, and providing an accessible
- name. It is crucial that the forceSimple property for the
+ name. It is crucial that the forceSimple property for the
MovieClip is set to true also. This will hide the actual ASCII
characters from assistive technology.
Examples
@@ -52,7 +52,7 @@
Providing a text alternative for ASCII art using ActionScript
Place the ASCII characters in a MovieClip instance
Provide an instance name for the MovieClip instance (e.g. myASCII)
Set the accessible name for the MovieClip and set the
- forceSimple property to true to hide the text inside the
+ forceSimple property to true to hide the text inside the
MovieClip.
The objective of this technique is to explicitly associate a form
- component with its label text by setting the component's label property.
+ component with its label text by setting the component's label property.
Setting this property will visually place a label next to the component,
and exposes the label text to assistive technology.
The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.
-
The Flash Player supports the ability for authors to control which graphics appear to assistive technologies using the silent property of the accessibility object, as indicated in the examples below.
+
The Flash Player supports the ability for authors to control which graphics appear to assistive technologies using the silent property of the accessibility object, as indicated in the examples below.
Examples
Hiding a graphic in the Flash Professional authoring tool
@@ -22,7 +22,7 @@
Hiding a graphic in the Flash Professional authoring tool
Applying textual alternatives programmatically in ActionScript 2.0
-
To manage an object's text equivalents programmatically using ActionScript, the _accProps property must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps property is used to remove an object from the accessibility information for the movie using ActionScript.
+
To manage an object's text equivalents programmatically using ActionScript, the _accProps property must be used. This references an object containing accessibility related properties set for the object. The code example below shows a simple example of how the _accProps property is used to remove an object from the accessibility information for the movie using ActionScript.
// 'decorative_mc' is an instance placed on the movie's main timeline
_root.decorative_mc._accProps = new Object();
diff --git a/techniques/flash/FLASH31.html b/techniques/flash/FLASH31.html
index ca26139950..eee5a242ff 100644
--- a/techniques/flash/FLASH31.html
+++ b/techniques/flash/FLASH31.html
@@ -15,7 +15,7 @@
the grid's caption text.
Duplicate the caption text and add it as the grid's accessible
name. This can either be achieved by setting a value to the grid's "name" field
- in the Accessibility panel or by setting the grid's AccessibilityProperties.name
+ in the Accessibility panel or by setting the grid's AccessibilityProperties.name
property.
Examples
@@ -116,8 +116,8 @@
Associating a caption with a DataGrid using ActiveScript 3
In the above example, the text used for the DataGrid caption will
be read twice, once as the text label that is offered for sighted
users, and again as the accessible name for the DataGrid. Authors
- can avoid duplicate voicing by setting the silent property for the
- label text to true.
+ can avoid duplicate voicing by setting the silent property for the
+ label text to true.
diff --git a/techniques/flash/FLASH32.html b/techniques/flash/FLASH32.html
index 41110000c0..be7d6f7065 100644
--- a/techniques/flash/FLASH32.html
+++ b/techniques/flash/FLASH32.html
@@ -4,12 +4,12 @@
Adobe Flex
Description
-
Except for the CheckBox and RadioButton component, the built in Flash
+
Except for the CheckBox and RadioButton component, the built in Flash
components are not automatically provided an associated label. For
these components, label text has to be placed adjacent to their control
- manually, using the Label component. If the 'auto-label' feature is
+ manually, using the Label component. If the 'auto-label' feature is
enabled in the Accessibility panel, then the Flash Player will automatically
- associate the label text for the TextInput and TextArea components.
+ associate the label text for the TextInput and TextArea components.
This means that for these components, it is not necessary to duplicate
the label text for the control using the Accessibility panel. The auto
label feature is enabled by default.
@@ -42,8 +42,8 @@
As an alternative to using the Accessibility panel, the auto
- label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel
- to true for the stage object.
+ label feature can also be turned off by setting the AccessibilityProperties.noAutoLabel
+ to true for the stage object.
The objective of this technique is to specify the width and/or height
- of an embedded Flash object using relative units such as em values.
+ of an embedded Flash object using relative units such as em values.
The size of the Flash object is allowed to expand to fill the size
of its container (a parent element) by setting the movie width and
height to 100%. The container's width and height is set with relative
@@ -28,7 +28,7 @@
Scaling text while keeping a minimum size
relative em values. When the user increases or decreases the browser's
text size, the Flash object will scale accordingly. To ensure that
the object does not become too small when text size is decreased,
- the min-width and min-height properties are set to the default dimensions.
+ the min-width and min-height properties are set to the default dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
diff --git a/techniques/flash/FLASH34.html b/techniques/flash/FLASH34.html
index 1a93778f23..020f951cfc 100644
--- a/techniques/flash/FLASH34.html
+++ b/techniques/flash/FLASH34.html
@@ -11,13 +11,13 @@
and language disabilities). By default, the sound will be played automatically.
When a screen reader such as JAWS is detected however, the sound will
have to be started manually.
-
To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active
- property. If this property is set to true, it means that the Flash
+
To perform screen reader detection, Flash provides the flash.accessibility.Accessibility.active
+ property. If this property is set to true, it means that the Flash
player has detected running assistive technology. Based on this flag,
the Flash developer can choose to run different functionality.
The Flash Player requires some time to detect active assistive
- technology and set the Accessibility.active property. To get accurate
+ technology and set the Accessibility.active property. To get accurate
results, do not check for this property immediately on the first frame
of the movie. Instead, perform the check 5 frames in or based on a
timed event.
@@ -26,15 +26,15 @@
is running.
Other assistive technology tools, including screen magnifiers,
or tools not used as assistive technologies may also utilize MSAA in
- ways that result in Accessibility.active being set to true.
+ ways that result in Accessibility.active being set to true.
Examples
A SoundHandler class
A class called SoundHandler is created which automatically starts
- playing an MP3 file only when Accessibility.active is set to false.
- Note that this example also checks the flash.system.Capabilities.hasAccessibility
+ playing an MP3 file only when Accessibility.active is set to false.
+ Note that this example also checks the flash.system.Capabilities.hasAccessibility
property. This property does not check whether a screen reader is running,
but instead indicates whether the Flash Player is running in an environment
that supports MSAA (which basically means the Windows operating system).
Using ActionScript to add contextual information directly to the label of a button
-
This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.
+
This example uses ActionScript to add contextual information directly to the label of a button. When the "Expand Button Labels" button is toggled, each button on the page has its label property modified.
Adding a group name to the accessible name of radio buttons
This example shows how the group name for radio buttons in a group can be made accessible by adding it to each button's accessible name:
Add radio button components to the stage:
-
Enter each button's label using its label property
+
Enter each button's label using its label property
Add the visual group label to the left or above the buttons added in step 1
Select each radio button. In the Accessibility panel, add the group name to the "Name" field;
@@ -38,7 +38,7 @@
Adding a group name to the accessible name of radio buttons
Programmatically adding a group name with the accessible name of radio buttons
-
The code example below shows a basic proof of concept of a class that automatically places a set of form controls inside a fieldset like rectangle, including a legend. For each added control an AccessibilityProperties object is created, and its name property is set to a combination of the legend text and the actual form control label.
+
The code example below shows a basic proof of concept of a class that automatically places a set of form controls inside a fieldset like rectangle, including a legend. For each added control an AccessibilityProperties object is created, and its name property is set to a combination of the legend text and the actual form control label.
package wcagSamples {
@@ -206,7 +206,7 @@
Programmatically adding a group name with the accessible name of radio butto
When a Flash Movie contains grouped form controls, confirm that either :
The group's name is included in the Accessibility panel's "name" field for each control.
-
Each control has an AccessibilityProperties.name property, which contains both the group's name and the control's label text
+
Each control has an AccessibilityProperties.name property, which contains both the group's name and the control's label text
The objective of this technique is to mark up the structure of the web content using the appropriate semantic elements. In other words, the elements are used according to their meaning, not because of the way they appear visually.
Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content. The nature of a piece of content as a paragraph, header, emphasized text, table, etc. can all be indicated in this way. In some cases, the relationships between units of content should also be indicated, such as between headings and subheadings, or amongst the cells of a table. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.
-
In HTML, for example, phrase-level elements such as em, abbr, and cite add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.
+
In HTML, for example, phrase-level elements such as em, abbr, and cite add semantic information within sentences, marking text for emphasis and identifying abbreviations and citations, respectively. MathML, a markup language designed to maintain important distinctions between structure and presentation in mathematics, includes special "presentation" markup for the complex notations used to represent mathematical ideas as well as "content" (semantic) markup for the mathematical ideas themselves.
Examples
Linking to another page
-
A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.
+
A paragraph contains a hyperlink to another page. The hyperlink is marked up using the a element.
<p>Do you want to try our new tool yourself? A free demonstration
version is available in our <a href="download.html">download section</a>
</p>
-
Using cite and blockquote to reference a book and a quotation from it
-
A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.
+
Using cite and blockquote to reference a book and a quotation from it
+
A page about the history of marriage uses a quotation from Jane Austen's novel, Pride and Prejudice, as an example. The reference to the book is marked up using the cite element and the quotation itself is marked up using the blockquote element.
<p>Marriage was considered a logical step for a bachelor, as can be seen in the
first chapter of the novel <cite>Pride and Prejudice</cite>:</p>
<blockquote>
@@ -44,14 +44,14 @@
Using cite and
-
Using the strong element to emphasize important text
-
A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.
+
Using the strong element to emphasize important text
+
A car manual explains how to start the engine. The instructions include a warning to make sure the gear is in neutral. The author feels the warning is so important that it should be emphasized so the warning is marked up using the strong element.
<h1>How to start the engine</h1>
<p>Before starting the engine, <strong>make sure the gear is in neutral</strong>
Next, turn the key in the ignition. The engine should start.</p>
-
Using the em and strong elements to emphasize text
+
Using the em and strong elements to emphasize text
<p>What the user <em>really</em> meant to say was,
<q>This is not ok, it is <strong>excellent</strong>!</q>
diff --git a/techniques/general/G134.html b/techniques/general/G134.html
index d5f3049553..84ebeb9923 100644
--- a/techniques/general/G134.html
+++ b/techniques/general/G134.html
@@ -29,7 +29,7 @@
Description
Examples
Validating HTML
-
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see Resources section) to check the validity of the HTML pages.
+
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement) and are valid according to the HTML version specified by the document type declaration. The developer can use off-line or online validators (see Resources section) to check the validity of the HTML pages.
Validating XML
@@ -37,7 +37,7 @@
Validating XML
Batch validation with Ant
-
The xmlvalidate task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory dev\\Web (relative to the Ant build file).
+
The xmlvalidate task of Apache Ant can be used for batch validation of XML files. The following Apache Ant target is a simple example for the validation of files with the extension .xml in the directory dev\\Web (relative to the Ant build file).
The objective of this technique is to ensure that sections have headings that identify them. Success Criterion 1.3.1 requires that the headings be marked such that they can be programmatically identified.
-
In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).
+
In HTML, this could be done using the HTML heading elements (h1, h2, h3, h4, h5, and h6). These allow user agents to automatically identify section headings. Other technologies use other techniques for identifying headers. To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).
A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is alt text on each button.
+
A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is alt text on each button.
A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.
A site includes the text "Change text size:" followed by text links "Up" and "Down" on every web page. The links trigger a Javascript that alters the value of the text-size property accordingly.
A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.
The accessible name should be assigned through native elements and semantics where possible. That helps ensure an exact match between the visible label and name.
Anchor text provides both the link's label and its accessible name
-
Using conventional HTML, the text between the a element's tags provides both the link's visible text and the accessible name "Code of conduct":
+
Using conventional HTML, the text between the a element's tags provides both the link's visible text and the accessible name "Code of conduct":
<p>Go to our <a href="url-to-page-about-code.html">Code of conduct</a></p>
Non-working sample of anchor
@@ -41,8 +41,8 @@
Non-working sample of anchor
-
Text in label element provides name for input via for attribute
-
The text between the label tags also serves as the checkbox input's accessible name "Notify me of delays" by using the for attribute which references the id of the input.
+
Text in label element provides name for input via for attribute
+
The text between the label tags also serves as the checkbox input's accessible name "Notify me of delays" by using the for attribute which references the id of the input.
<input type="checkbox" id="notification" name="notify" value="delays">
<label for="notification">Notify me of delays</label>
@@ -54,7 +54,7 @@
Working sample of input
The button text provides the accessible name
-
The text inside a button element becomes both its visible label and its accessible name:
+
The text inside a button element becomes both its visible label and its accessible name:
<button>Send</button>
Non-working sample of button
@@ -69,7 +69,7 @@
Simple Radio Button Group
Figure 1 "Call me when balance exceeds $10,000 radio group, with Yes and No choices
-
The label for each component should be restricted to "Yes" and "No". To meet 1.3.1 Information and Relationships and 3.3.2 Labels or Instructions, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a fieldset and legend.
+
The label for each component should be restricted to "Yes" and "No". To meet 1.3.1 Information and Relationships and 3.3.2 Labels or Instructions, the "Call me…" text can be coded to convey the relationship to ATs, in this example by using a fieldset and legend.
If the label is not restricted to the string adjacent to the radio button, multiple interpretations of what constitutes the label can result in less uniform functionality. If "Yes" alone is not the label for the first radio button, is it "Call me when balance exceeds $10,000"? Or is it a combination of text strings, in which case is the order "Call me when balance exceeds $10,000 Yes" or "Yes, Call me when balance exceeds $10,000"? Decisions to combine text strings can have negative effects on screen reader users since the order of concatenation can affect meaning. In this example, "No, call me when balance exceeds $10,000" could be very confusing to a screen reader user.
<fieldset>
<legend>Call me when balance exceeds $10,000?</legend><br />
@@ -103,7 +103,7 @@
Stacked Labels
In Figure 3, the inputs are stacked and left-aligned, with the labels immediately preceding each input, also left-aligned. There is additional white space between the label and the preceding input so that the label is closest to its associated text input. Stacked labels are relatively common in mobile designs, where horizontal space is constrained.
-
Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of aria-describedby and the label is properly associated with the input.
+
Figure 4 shows a variation on stacked labels, where hints and guidance are included between the label and the input. This design does not provide an adjacent label. However, the "New Password" label is still considered to be in close enough proximity, especially given its size and boldness relative to the smaller and lower-contrast guidance text. The associations are reinforced programmatically, where the hint text is given a role of aria-describedby and the label is properly associated with the input.
Figure 4 "New password" label positioned above input with a smaller-point text string about the password requirements positioned between the large label and the input.
@@ -129,7 +129,7 @@
Range of inputs with few labels
Figure 5 Line of 5 radio buttons with Hated it and Loved it labels at each end
-
The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using legend). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.
+
The two labels, "Hated it" and "Loved it", are adjacent to the first and last radio buttons, and should be their accessible names. Speech-input users can speak either of these labels to select a radio button, and then use arrow navigation (e.g., "Press right arrow") to modify the selection. "Rate your response" is the text describing the whole widget and can be associated as the group label (here using legend). The three middle radio buttons do not have visible labels. In the code example they are given title attributes of "Disliked", "So-so" and "Liked" in order to meet 3.3.2 Labels or Instructions.
Technique G211 is not intended to complicate existing conventions for the construction of accessible form inputs. As described in the Punctuation and capitalization and Text in parentheses subsections of the Understanding document, information does not always need to be included in the accessible name in an attempt to meet the Label in Name requirement, especially where the text would not normally be spoken when using speech recognition to navigate to controls. Where there are established ways of ensuring information and relationships conveyed visually are present programmatically, it is acceptable to leave text in parentheses and punctuation out of the accessible name.
-
The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through aria-describedby, the asterisk and parenthetical information has been left out of the accessible name.
+
The following snippet demonstrates possible techniques mentioned in the Understanding document. Since the required field is programmatically indicated, and the input restrictions on the date are surfaced through aria-describedby, the asterisk and parenthetical information has been left out of the accessible name.
Figure 6 The "Name" and "Birth date" labels with additional information (and asterisk and an input formatting instruction, respectively)
diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index ec2e644b1a..95fb4d8d86 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -29,8 +29,8 @@
Photographer's portfolio
Home / Galleries / Antarctica / Penguins / Gentoo Penguin
-
The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
-
The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that represents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
+
The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
+
The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that represents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.
You are here: Acme Company → Electronics → Computers → Laptops
The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here", which is a static heading. This example uses a right arrow symbol (→) as a separator.
-
In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.
+
In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.
HTML
@@ -108,7 +108,7 @@
Procedure
For a breadcrumb trail that does include the current location and it behaves as a link:
Check that all elements are implemented as links.
-
Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
+
Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
Check that all links navigate to the correct web page as specified by the breadcrumb trail.
The objective of this technique is to notify the user when a field that must be completed has not been completed. When users fail to provide input for any mandatory form fields, information is provided in text to enable the users to identify which fields were omitted. One approach is to use client-side validation and provide an alert dialog box identifying the mandatory fields which were omitted. Another approach, using server-side validation, is to re-display the form (including any previously entered data), with either a text description at the location of the omitted mandatory field, or a text description that identifies the omitted mandatory fields.
-
The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (title element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.
+
The best practice is to include a message or alert, as some users may not be aware that an error has occurred and could assume that the form is not functioning correctly. It is also best practice to include an error notification in the page title (title element) since a screen reader user is likely to believe the page was submitted correctly and continue to navigate to another page as soon as the new page is returned instead of reading the main content area of the page again.
Landmarks provide an easy way for users of assistive technology understand the programmatic structure of a page and skip over content they're not interested in. For instance, if a site's header, global navigation, main content area, and footer are marked up as landmarks, a screen reader user can easily skip to the landmark they're interested in without having to work their way through all the preceding content. A blind user who may be familiar with a news site's menu, and is only interested in getting to the top story, could easily navigate to the "main" landmark, and bypass dozens of menu links. In another circumstance, a user who is blind may want to quickly find a navigation menu, and can do so by jumping to the navigation landmark.
Landmark regions are implicitly created when certain semantic HTML elements are used, which is different from using ARIA to explicitly create landmarks. These elements are:
-
<header>: When a header is a direct child of the body element, it creates a banner role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.
-
<nav>: A region that contains navigation links to other pages or different parts of the same page.
-
<main>: A region that contains a page's main content.
-
<section>: A region that contains a generic section of a document or application. A section element isn't exposed as a landmark region unless it has an accessible name.
-
<form>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form element isn't exposed as a landmark region unless it has an accessible name.
-
<aside>: A region of the document that supports the main content, yet is separate and meaningful on its own.
-
<footer>: A region that, when its nearest ancestor is the body element, contains information about the page such as copyrights and links to privacy statements.
+
<header>: When a header is a direct child of the body element, it creates a banner role, a region that typically contains the site's logo, name, and other persistent site-wide content at the top of a page.
+
<nav>: A region that contains navigation links to other pages or different parts of the same page.
+
<main>: A region that contains a page's main content.
+
<section>: A region that contains a generic section of a document or application. A section element isn't exposed as a landmark region unless it has an accessible name.
+
<form>: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing. A form element isn't exposed as a landmark region unless it has an accessible name.
+
<aside>: A region of the document that supports the main content, yet is separate and meaningful on its own.
+
<footer>: A region that, when its nearest ancestor is the body element, contains information about the page such as copyrights and links to privacy statements.
-
Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <main role="main"> is unnecessary, and should just be <main>.
+
Modern web browsers don't need to have the HTML element's related ARIA role added to them to be exposed as a landmark region. For example, <main role="main"> is unnecessary, and should just be <main>.
There are cases when a particular landmark role can be used more than once on a page, for example, primary and secondary blocks of navigation. In these cases, identical roles should be labeled using a valid technique for labelling regions.
It is a best practice to include all content on the page in landmarks, so that screen reader users who rely on landmarks to navigate from section to section do not lose track of content.
@@ -50,7 +50,7 @@
Simple landmarks
Multiple landmarks of the same type and aria-labelledby
-
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
+
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
Examine each HTML element that creates a landmark role.
-
Examine whether the correct element has been used to mark up content. For example: a nav element has been used to mark up a section with navigation links, or the main element is used to contain the page's main content.
+
Examine whether the correct element has been used to mark up content. For example: a nav element has been used to mark up a section with navigation links, or the main element is used to contain the page's main content.
If a landmark region needs to have an accessible name to be exposed as a landmark, check to see that there is an accessible name.
Creating modal dialogs with the HTML dialog element
+
Creating modal dialogs with the HTML dialog element
ID:
Technology: html
@@ -17,21 +17,21 @@
When to Use
Description
-
Website authors often use modal dialogs to focus a user's attention on information, or a task-related activity beyond the scope of the primary page's content. Modal dialogs can be built in markup using ARIA's dialog role and related attributes, or the HTML's dialog element. As well as meeting the first rule of ARIA, the HTML dialog element offers several advantages to its ARIA counterpart, with the browser handling these features:
+
Website authors often use modal dialogs to focus a user's attention on information, or a task-related activity beyond the scope of the primary page's content. Modal dialogs can be built in markup using ARIA's dialog role and related attributes, or the HTML's dialog element. As well as meeting the first rule of ARIA, the HTML dialog element offers several advantages to its ARIA counterpart, with the browser handling these features:
-
keyboard focus is moved to the newly-opened modal dialog;
-
keyboard focus returns to the invoking element (assuming the element is still on the page) when the modal dialog is closed;
-
keyboard focus is limited to the contents of the modal dialog and the browser's chrome (e.g., the browser-specific UI, such as the address bar, etc.);
-
the page's content 'outside' of the modal dialog becomes inert, resulting in the content becoming hidden from assistive technologies, and inoperable to all users, so long as the modal dialog remains open;
-
the use of the Escape key to close the modal dialog.
+
keyboard focus is moved to the newly-opened modal dialog;
+
keyboard focus returns to the invoking element (assuming the element is still on the page) when the modal dialog is closed;
+
keyboard focus is limited to the contents of the modal dialog and the browser's chrome (e.g., the browser-specific UI, such as the address bar, etc.);
+
the page's content 'outside' of the modal dialog becomes inert, resulting in the content becoming hidden from assistive technologies, and inoperable to all users, so long as the modal dialog remains open;
+
the use of the Escape key to close the modal dialog.
-
This technique uses the HTML dialog element rather than a custom ARIA implementation, reducing the level of effort to create an accessible modal dialog.
+
This technique uses the HTML dialog element rather than a custom ARIA implementation, reducing the level of effort to create an accessible modal dialog.
Examples
A dialog to sign up to a mailing list
-
This is an example of using a modal dialog element to show a mailing-list sign-up form to a user. The main part of the page contains a button element that, when activated, invokes the modal dialog. The button uses the type attribute to tell the browser that this isn't a submitbutton.
+
This is an example of using a modal dialog element to show a mailing-list sign-up form to a user. The main part of the page contains a button element that, when activated, invokes the modal dialog. The button uses the type attribute to tell the browser that this isn't a submitbutton.
-
When the modal dialog is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the dialog element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's DOM. In this example the h1 element will receive focus because it has a tabindex="-1" attribute. Note that, although the dialog's close button is visibly before the h1, it is the last item in the dialog's DOM. If the button was first, it would receive focus when dialog was opened.
+
When the modal dialog is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the dialog element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's DOM. In this example the h1 element will receive focus because it has a tabindex="-1" attribute. Note that, although the dialog's close button is visibly before the h1, it is the last item in the dialog's DOM. If the button was first, it would receive focus when dialog was opened.
The HTML
<!doctype html>
@@ -151,8 +151,8 @@
The CSS
The JavaScript
-
The script is necessary to display the dialog when invoked. The HTML dialog element can be opened using two different commands: show() (for non-modal dialogs), and showModal() (for modal dialogs) - used in this example.
-
Note: instead of writing a function to close the dialog, the close button is nested within a separate form element with a method="dialog" attribute. This method allows the dialog to be closed when activating this button, and the browser will handle returning keyboard focus to the invoking element,
+
The script is necessary to display the dialog when invoked. The HTML dialog element can be opened using two different commands: show() (for non-modal dialogs), and showModal() (for modal dialogs) - used in this example.
+
Note: instead of writing a function to close the dialog, the close button is nested within a separate form element with a method="dialog" attribute. This method allows the dialog to be closed when activating this button, and the browser will handle returning keyboard focus to the invoking element,
document.addEventListener("DOMContentLoaded", function(e){
const d = document.querySelector("dialog");
@@ -168,11 +168,11 @@
The JavaScript
Tests
Procedure
-
Find the components on the page that invoke modal dialog elements.
-
Check that each dialog can be opened using the keyboard to activate the invoking element (for example, activate a button by pressing the Enter key or Spacebar.
-
When the modal dialog is opened, check that focus has moved to it / one of its focusable descendants.
-
While the modal dialog is open, check that keyboard focus cannot move to elements of the primary document.
-
When the modal dialog is closed, check that focus is placed back onto the invoking element, if the element still exists on the page.
+
Find the components on the page that invoke modal dialog elements.
+
Check that each dialog can be opened using the keyboard to activate the invoking element (for example, activate a button by pressing the Enter key or Spacebar.
+
When the modal dialog is opened, check that focus has moved to it / one of its focusable descendants.
+
While the modal dialog is open, check that keyboard focus cannot move to elements of the primary document.
+
When the modal dialog is closed, check that focus is placed back onto the invoking element, if the element still exists on the page.
This objective of this technique is to provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.
-
Many links have both a text and iconic representation adjacent to each other, but rendered in separate a elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.
+
Many links have both a text and iconic representation adjacent to each other, but rendered in separate a elements. Visually they appear to be a single link, but many users encounter them as adjacent identical links. For a keyboard user, it is tedious to navigate through redundant links. For users of assistive technologies, it can be confusing to encounter successive identical links. When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.
If the author omitted alternative text from the link image, it would fail Success Criterion 1.1.1 because the text alternative would not serve the same purpose as the graphical link.
-
This technique provides such links by putting the text and image together in one a element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.
+
This technique provides such links by putting the text and image together in one a element and providing null alternative text on the image to eliminate duplication of text. In this way, both representations of the link are provided, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.
Sometimes the text and the icon link are rendered in separate, adjacent table cells to facilitate page layout. Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. If CSS is used, this technique can be applied to combine the links.
Examples
-
The icon and text are contained in the same a element.
+
The icon and text are contained in the same a element.
A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.
+
A link contains an icon and text, and the site help refers to the icon. The img has a text alternative which is the name used for the icon in the site help, which describes clicking the home page icon.
<a href="home.html">
<img src="house.gif" alt="home page icon">Go to the home page
@@ -45,10 +45,10 @@
Examples
Tests
Procedure
-
For each a applying this technique:
+
For each a applying this technique:
-
Check that every img element contained within the a element has a null value set for its alt attribute.
-
Check that the a element contains an img element that has either a null alt attribute value or a value that supplements the link text and describes the image
+
Check that every img element contained within the a element has a null value set for its alt attribute.
+
Check that the a element contains an img element that has either a null alt attribute value or a value that supplements the link text and describes the image
Providing text alternatives for the area elements of image maps
+
Providing text alternatives for the area elements of image maps
ID: H24
Technology: html
@@ -13,21 +13,21 @@
Providing text alternatives for the area
When to Use
-
HTML documents that contain area elements.
+
HTML documents that contain area elements.
Description
The objective of this technique is to provide text alternatives that serve the same
purpose as the selectable regions of an image map. An image map is an image divided into
- selectable regions defined by area elements. Each area is a link to another
- web page or another part of the current web page. The alt attribute of each
- area element serves the same purpose as the selectable area of the
+ selectable regions defined by area elements. Each area is a link to another
+ web page or another part of the current web page. The alt attribute of each
+ area element serves the same purpose as the selectable area of the
image.
Examples
-
This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.
+
This example uses the alt attribute of the area element to provide text that describes the purpose of the image map areas.
<img src="welcome.gif" usemap="#map1"
alt="Areas in the library. Select an area for more information on that area.">
@@ -41,11 +41,11 @@
Examples
Tests
Procedure
-
For each area element in an image map:
+
For each area element in an image map:
-
Check that the area element has an alt attribute.
-
Check that the text alternative specified by the alt attribute serves the same
- purpose as the part of image map image referenced by the area element
+
Check that the area element has an alt attribute.
+
Check that the text alternative specified by the alt attribute serves the same
+ purpose as the part of image map image referenced by the area element
of the image map.
All HTML documents, including those in frames, have a title element in the head section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.
-
Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML element.
+
All HTML documents, including those in frames, have a title element in the head section that defines in a simple phrase the purpose of the document. This helps users to orient themselves within the site quickly without having to search for orientation information in the body of the page.
+
Note that the (mandatory) title element, which only appears once in a document, is different from the title attribute, which may be applied to almost every HTML element.
Examples
@@ -41,8 +41,8 @@
Tests
Procedure
-
Examine the source code of the HTML document and check that a non-empty title element appears in the head section.
-
Check that the title element describes the document.
+
Examine the source code of the HTML document and check that a non-empty title element appears in the head section.
+
Check that the title element describes the document.
The objective of this technique is to provide expansions or definitions for
- abbreviations by using the abbr element. It is always appropriate to use the abbr element for any abbreviation, including acronyms and initialisms.
+ abbreviations by using the abbr element. It is always appropriate to use the abbr element for any abbreviation, including acronyms and initialisms.
This technique has been altered from a sufficient technique to an advisory technique because it uses the title attribute of abbr to provide the expansion of the abbreviation needed to achieve a sufficient technique when used in combination with G102. As noted in the specification:
Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g., requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).
@@ -26,13 +26,13 @@
Description
Examples
-
Using abbr element to expand abbreviations
+
Using abbr element to expand abbreviations
<p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>
<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>
-
Using dfn and abbr element to define abbreviations
+
Using dfn and abbr element to define abbreviations
Using the HTML title attribute
diff --git a/techniques/html/H30.html b/techniques/html/H30.html
index 1a16de5f7e..7a065bb009 100644
--- a/techniques/html/H30.html
+++ b/techniques/html/H30.html
@@ -13,32 +13,32 @@
Providing link text that describes the purpose of a link for anchor elements
When to Use
-
HTML documents that contain links, (<a href> elements)
+
HTML documents that contain links, (<a href> elements)
Description
-
The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.
+
The objective of this technique is to describe the purpose of a link by providing descriptive text as the content of the a element. The description lets a user distinguish this link from other links in the web page and helps the user determine whether to follow the link. The URI of the destination is generally not sufficiently descriptive.
When an image is the only content of a link, the text alternative for the image describes the unique function of the link.
Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.
+
Using an empty alt attribute when the anchor (a) element contains text that describes the purpose of the link in addition to the img element. Note that the link text will appear on the page next to the image.
For each link in the content that uses this technique:
Check that text or a text alternative for non-text content is included in the
- a element.
-
If an img element is the only content of the a element,
+ a element.
+
If an img element is the only content of the a element,
check that its text alternative describes the purpose of the link.
-
If the a element contains one or more img element(s)
- and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link.
-
If the a element only contains text, check that the text describes
+
If the a element contains one or more img element(s)
+ and the text alternative of the img element(s) is empty, check that the text of the link describes the purpose of the link.
+
If the a element only contains text, check that the text describes
the purpose of the link.
The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
+
The objective of this technique is to demonstrate how to use a title attribute on an anchor element to provide additional text describing a link. The title attribute is used to provide additional information to help clarify or further describe the purpose of a link. If the supplementary information provided through the title attribute is something the user should know before following the link, such as a warning, then it should be provided in the link text rather than in the title attribute.
Unicode right-to-left marks and left-to-right marks can be entered directly or by means of character entities or numeric character references, as shown here.
-
left-to-right mark: ‎ or ‎ (U+200E)
-
right-to-left mark: ‏ or ‏ (U+200F)
+
left-to-right mark: ‎ or ‎ (U+200E)
+
right-to-left mark: ‏ or ‏ (U+200F)
Due to the bidi algorithm, a source code editor may not display character entities or numeric character references as expected.
diff --git a/techniques/html/H35.html b/techniques/html/H35.html
index cd2c491059..f15fc9c37c 100644
--- a/techniques/html/H35.html
+++ b/techniques/html/H35.html
@@ -5,13 +5,13 @@
Use embed or object instead.
obsoleteSince: 20
---
- Providing text alternatives on applet elements
Providing text alternatives on applet elements
ID: H35
Technology: html
Type: Technique
When to Use
-
HTML and XHTML Documents that load Java applets where applet is not deprecated.
+
Providing text alternatives on applet elements
Providing text alternatives on applet elements
ID: H35
Technology: html
Type: Technique
When to Use
+
HTML and XHTML Documents that load Java applets where applet is not deprecated.
Description
-
Provide a text alternative for an applet by using the alt attribute to label an applet
+
Provide a text alternative for an applet by using the alt attribute to label an applet
and providing the text alternative in the body of the applet element. In this technique, both mechanisms
- are required due to the varying support of the alt attribute and applet body text by
+ are required due to the varying support of the alt attribute and applet body text by
user agents.
Examples
@@ -24,7 +24,7 @@
An applet to play the tic-tac-toe game.
Procedure
View the source code of the applet element
-
Check that the applet element contains an alt attribute with a text alternative
+
Check that the applet element contains an alt attribute with a text alternative
for the applet
Check that the applet element contains a text alternative for the applet in the
body of the applet element
Using alt attributes on images used as submit buttons
+
Using alt attributes on images used as submit buttons
ID: H36
Technology: html
@@ -17,12 +17,12 @@
When to Use
Description
-
For input elements of type image, the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.
+
For input elements of type image, the alt attribute of the input element is used to provide a functional label. This label indicates the button's function, but does not attempt to describe the image. The label is especially important if there are multiple submit buttons on the page that each lead to different results.
When using the img element, specify a short text alternative with the
- alt attribute. Note. The value of this attribute is referred to as "alt
+
When using the img element, specify a short text alternative with the
+ alt attribute. Note. The value of this attribute is referred to as "alt
text".
When an image contains words that are important to understanding the content, the alt
text should include those words. This will allow the alt text to play the same function
@@ -48,8 +48,8 @@
Tests
Procedure
-
Examine each img element in the content.
-
Check that each img element which conveys meaning contains an alt attribute.
+
Examine each img element in the content.
+
Check that each img element which conveys meaning contains an alt attribute.
If the image contains words that are important to understanding the content, the words are included in the text alternative.
Using caption elements to associate data table captions with data tables
+
Using caption elements to associate data table captions with data tables
ID: H39
Technology: html
@@ -18,16 +18,16 @@
When to Use
Description
The objective of this technique is to programmatically associate captions for data
- tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.
-
The caption element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.
+ tables where captions are provided in the presentation. The caption for a table is a table identifier and acts like a title or heading for the table.
+
The caption element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen reading software to navigate directly to the caption for a table if one is present.
-
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 table is used for layout, the caption element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is "transparent" to the user. A caption would "break" this transparency by calling attention to the table. See F46 for details.
+
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 table is used for layout, the caption element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is "transparent" to the user. A caption would "break" this transparency by calling attention to the table. See F46 for details.
Examples
-
An appointment calendar with a caption
+
An appointment calendar with a caption
<table>
<caption>Schedule for the week of March 6</caption>
...
@@ -40,8 +40,8 @@
Tests
Procedure
For each data table:
-
Check that the table includes a caption element.
-
Check that the text that titles or describes the table is included in the caption element.
+
Check that the table includes a caption element.
+
Check that the text that titles or describes the table is included in the caption element.
diff --git a/techniques/html/H4.html b/techniques/html/H4.html
index 383f7fcec1..5328a3f1a9 100644
--- a/techniques/html/H4.html
+++ b/techniques/html/H4.html
@@ -12,13 +12,13 @@
to introduce usability bugs when setting the tab order explicitly.
In some cases, the author may want to specify a tab order that follows relationships in
the content without following the order of the interactive elements in the code. In
- these cases, an alternative order can be specified using the tabindex
- attribute of the interactive element. The tabindex is given a value between
+ these cases, an alternative order can be specified using the tabindex
+ attribute of the interactive element. The tabindex is given a value between
0 and 32767.
When the interactive elements are navigated using the tab key, the elements are given
- focus in increasing order of the value of their tabindex attribute.
- Elements that have a tabindex value higher than zero will receive focus
- before elements without a tabindex or a tabindex of 0. After
+ focus in increasing order of the value of their tabindex attribute.
+ Elements that have a tabindex value higher than zero will receive focus
+ before elements without a tabindex or a tabindex of 0. After
all of the elements with a tabindex higher than 0 have received focus, the rest of the
interactive elements are given focus in the order in which they appear in the web
page.
@@ -31,7 +31,7 @@
the bride in the second column. The order in the content is row by row but the
author feels it is more logical to navigate the form column by column. This way, all
the groom's criteria can be filled in before moving on to the bride's criteria. The
- tabindex attributes of the input fields are used to specify a tab
+ tabindex attributes of the input fields are used to specify a tab
order that navigates column by column.
<form action="#" method="post">
@@ -78,9 +78,9 @@
- Tabindex values need not be sequential nor must they begin with any
+ Tabindex values need not be sequential nor must they begin with any
particular value. The values do not have to be unique. Elements that have identical
- tabindex values are navigated in the order they appear in the
+ tabindex values are navigated in the order they appear in the
character stream.
@@ -100,9 +100,9 @@
Tests
Procedure
-
Check if tabindex is used
-
If tabindex is used, check that the tab order specified by the
- tabindex attributes follows relationships in the content.
+
Check if tabindex is used
+
If tabindex is used, check that the tab order specified by the
+ tabindex attributes follows relationships in the content.
The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.
+
The objective of this technique is to provide the description of names or terms by presenting them in a description list. The list is marked up using the dl element. Within the list, each term is put in a separate dt element, and its description goes in the dd element directly following it. Multiple terms can be associated with a single description, as can a single term with multiple descriptions, provided that semantic sequence is maintained. The title attribute can be used to provide additional information about the description list. Usage of description lists ensures that terms and their descriptions are semantically related even as presentation format changes, as well as ensuring that these terms and descriptions are semantically grouped as a unit.
Description lists are easiest to use when the descriptions are ordered alphabetically. A common use for description lists is a glossary of terms.
@@ -54,11 +54,11 @@
Tests
Procedure
For any set of terms and their associated descriptions:
-
Check that the list is contained within a dl element.
-
Check that each term in the list being described is contained within a dt element.
-
Check that when there is more than one term that shares the same description that the dt elements immediately follow each other.
-
Check that the description for each term is contained in one or more dd elements.
-
Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.
+
Check that the list is contained within a dl element.
+
Check that each term in the list being described is contained within a dt element.
+
Check that when there is more than one term that shares the same description that the dt elements immediately follow each other.
+
Check that the description for each term is contained in one or more dd elements.
+
Check that the one or more dd elements immediately follow the one or more dt elements containing the term being described.
In the following example, headings are used in a hierarchical layout with h3 as a subsection of h2, which is a subsection of h1.
+
In the following example, headings are used in a hierarchical layout with h3 as a subsection of h2, which is a subsection of h1.
<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat ...</p>
@@ -50,9 +50,9 @@
Hierarchical Heading Organization
Headings in a three-column layout
-
In this example, the main content of the page is in the middle column of a three-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.
+
In this example, the main content of the page is in the middle column of a three-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.
-
It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.
+
It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.
Nomensa: How to structure headings for web accessibility.
diff --git a/techniques/html/H43.html b/techniques/html/H43.html
index 06abe569ed..c87d44f405 100644
--- a/techniques/html/H43.html
+++ b/techniques/html/H43.html
@@ -5,7 +5,7 @@
-
Using id and headers attributes to associate data cells with header cells in data tables
+
Using id and headers attributes to associate data cells with header cells in data tables
ID: H43
Technology: html
@@ -17,8 +17,8 @@
When to Use
Description
-
The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.
-
This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.
+
The objective of this technique is to associate each data cell (in a data table) with the appropriate headers. This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells. If there is more than one id, they are separated by spaces.
+
This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute. Using this technique also makes these complex relationships perceivable when the presentation format changes.
This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.
@@ -57,13 +57,13 @@
Tests
Procedure
Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If "no", the table is a layout table. If "yes", the table is a data table.
-
For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.
+
For data tables, check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.
-
For data tables where any cell contains an id or headers attribute:
+
For data tables where any cell contains an id or headers attribute:
-
Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element.
-
Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell.
-
Check that all ids are unique (that is, no two elements in the page have the same id).
+
Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element.
+
Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell.
+
Check that all ids are unique (that is, no two elements in the page have the same id).
@@ -71,8 +71,8 @@
Procedure
Expected Results
-
If table is a layout table, no cells contain headers or id attributes.
-
If table is a data table and any cell contains an id attribute, checks #3.1, #3.2, and #3.3 are true.
+
If table is a layout table, no cells contain headers or id attributes.
+
If table is a data table and any cell contains an id attribute, checks #3.1, #3.2, and #3.3 are true.
If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.
The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
-
The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the web page.
The objective of this technique is to use the label element to explicitly associate a form control with a label. A label is attached to a specific form control through the use of the for attribute. The value of the for attribute must be the same as the value of the id attribute of the form control.
+
The id attribute may have the same value as the name attribute, but both must be provided, and the id must be unique in the web page.
An additional benefit of this technique is a larger clickable area for the control, since clicking on either the label or the control will activate the control. This can be helpful for users with impaired motor control.
-
Note that the label is positioned after input elements of type="checkbox" and type="radio".
+
Note that the label is positioned after input elements of type="checkbox" and type="radio".
Elements that use explicitly associated labels are:
inputs for text entry:
-
input type="date"
-
input type="datetime-local"
-
input type="email"
-
input type="month"
-
input type="number"
-
input type="password"
-
input type="search"
-
input type="tel"
-
input type="text"
-
input type="time"
-
input type="url"
-
input type="week"
+
input type="date"
+
input type="datetime-local"
+
input type="email"
+
input type="month"
+
input type="number"
+
input type="password"
+
input type="search"
+
input type="tel"
+
input type="text"
+
input type="time"
+
input type="url"
+
input type="week"
- input type="checkbox"
+ input type="checkbox"
- input type="color"
+ input type="color"
- input type="file"
+ input type="file"
- input type="radio"
+ input type="radio"
- input type="range"
+ input type="range"
- select
+ select
- textarea
+ textarea
-
The label element is not used for the following elements:
+
The label element is not used for the following elements:
-
button (the label is provided by the content)
-
input type="button" (the label is provided by the content)
-
input type="hidden"
-
input type="image" (the label is provided by the alt attribute)
-
input type="reset" (the label is label provided by the value attribute)
-
input type="submit" (the label is label provided by the value attribute)
+
button (the label is provided by the content)
+
input type="button" (the label is provided by the content)
+
input type="hidden"
+
input type="image" (the label is provided by the alt attribute)
+
input type="reset" (the label is label provided by the value attribute)
+
input type="submit" (the label is label provided by the value attribute)
@@ -78,7 +78,7 @@
Description
Examples
A text input field
-
The text field in this example has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.
+
The text field in this example has the explicit label of "First name:". The label element's for attribute matches the id attribute of the input element.
diff --git a/techniques/html/H45.html b/techniques/html/H45.html
index a19568f4c4..a12a13b9a7 100644
--- a/techniques/html/H45.html
+++ b/techniques/html/H45.html
@@ -11,8 +11,8 @@
described in a short text alternative.
Description
The objective of this technique is to provide information in a file designated by the
- longdesc attribute when a short text alternative does not adequately convey the function
- or information provided in the image. The longdesc attribute is a URI, the target of
+ longdesc attribute when a short text alternative does not adequately convey the function
+ or information provided in the image. The longdesc attribute is a URI, the target of
which contains a long description of the non-text content.
Authors can provide a description for an image by including text in a separate resource or within the text of the page containing the image. An advantage of using a separate resource for the description is that it is easily reusable for multiple instances of the same image, it does not add on-page visual clutter to the original document, and the description's end-point is apparent to the user. An advantage of providing the description within the same page as the image is that all users can access the description. A limitation of the on-page method, as well as in providing multiple descriptions on a single separate page, is that current implementations supporting longdesc do not identify the long description's end-point. Authors can solve this by providing a well-formed description, which identifies the where the description ends.
Examples
@@ -32,8 +32,8 @@
Using longdesc to refer to a long description within the same page.
Tests
Procedure
-
Check that the img element has a longdesc attribute.
-
Check that the value of the longdesc attribute is a valid URI of an existing resource.
+
Check that the img element has a longdesc attribute.
+
Check that the value of the longdesc attribute is a valid URI of an existing resource.
Check that the content at the target of that URI contains a long description describing the original non-text content associated with it.
diff --git a/techniques/html/H46.html b/techniques/html/H46.html
index 2669e535c9..4e7c8ec7f0 100644
--- a/techniques/html/H46.html
+++ b/techniques/html/H46.html
@@ -6,20 +6,20 @@
obsoleteSince: 20
---
Using noembed with embed
-
Using noembed with embed
+
Using noembed with embed
ID: H46
Technology: html
Type: Technique
When to Use
-
Documents that load plugins with the embed element.
+
Documents that load plugins with the embed element.
Description
The objective of this technique is to provide alternative content for the
- embed element in a noembed element. The noembed is rendered
- only if the embed is not supported. While it can be positioned anywhere on the
- page, it is a good idea to include it as a child element of embed so that it is
+ embed element in a noembed element. The noembed is rendered
+ only if the embed is not supported. While it can be positioned anywhere on the
+ page, it is a good idea to include it as a child element of embed so that it is
clear to assistive technologies that a text alternative is associated with the
- embed element it describes.
+ embed element it describes.
Examples
- noembed is provided inside an embed
+ noembed is provided inside an embed
The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Description lists (dl) are used to group name-value pairs of information, for example: terms and definitions or questions and answers. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
-
When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using br elements to separate the list items.
+
The objective of this technique is to create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Description lists (dl) are used to group name-value pairs of information, for example: terms and definitions or questions and answers. Although the use of this markup can make lists more readable, not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup.
+
When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information. An example of such visual formatting is including asterisks in the content at the beginning of each list item and using br elements to separate the list items.
Some assistive technologies allow users to navigate from list to list or item to item. Style sheets can be used to change the presentation of the lists while preserving their integrity.
The list structure, commonly unordered lists, is also useful to group hyperlinks. When this is done, it helps screen reader users to navigate from the first item in a list to the end of the list or jump to the next list. This helps them to bypass groups of links if they choose to.
@@ -76,7 +76,7 @@
Contact information using a description list
Using lists to group links
-
In this example the links are grouped using the ul and li elements.
+
In this example the links are grouped using the ul and li elements.
Using the em and strong elements
to emphasize text
-
The em and strong elements are
+
The em and strong elements are
designed to indicate structural emphasis that may be rendered in a variety of ways
(font style changes, speech inflection changes, etc.).
@@ -42,9 +42,9 @@
Using the em and
-
Using the blockquote element to mark up long quotations from another source
+
Using the blockquote element to mark up long quotations from another source
-
This example also demonstrates the use of the cite element to specify a reference.
+
This example also demonstrates the use of the cite element to specify a reference.
<p>The following is an excerpt from the <cite>The Story Of My Life</cite>
by Helen Keller:</p>
@@ -56,7 +56,7 @@
Using the blockquote element to mark up l
</blockquote>
-
Using the q element to mark up a shorter quotation from another source
+
Using the q element to mark up a shorter quotation from another source
Quotation marks aren't manually added to the quote because they are added by the user agent.
@@ -64,15 +64,15 @@
Using the q element to mark up a shorter
we can never do anything good in the world</q>.</p>
-
Using the sup and sub elements to mark up superscripts and subscripts
+
Using the sup and sub elements to mark up superscripts and subscripts
-
The sup and sub elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.
+
The sup and sub elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.
<p>Henry won 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>
-
Using the code element to mark up code
+
Using the code element to mark up code
This example shows use of the code element to provide visual emphasis for a CSS rule:
<code>
.trial {
@@ -87,7 +87,7 @@
Using the code element to mark up code
Procedure
Examine the content for information that is conveyed through variations in presentation of text.
-
Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.
+
Check that appropriate semantic markup (such as em, strong, cite, blockquote, sub, and sup) have been used to mark the text that conveys information through variations in text.
(vertical and horizontal). These relationships are represented in columns and rows, and
the columns and rows must be recognizable in order for the logical relationships to be
perceived.
-
Using the table element with the child elements tr,
- th, and td makes these relationships perceivable. Techniques
- such as inserting tabs to create columns or using the pre element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.
+
Using the table element with the child elements tr,
+ th, and td makes these relationships perceivable. Techniques
+ such as inserting tabs to create columns or using the pre element are purely visual, and visually implied logical relationships are lost if the user cannot see the table or the visual presentation is changed.
Simple tables generally have only one level of headers for columns and/or one level of headers on the rows.
Usually, for simple tables, row 1 column 1 is either blank or describes the contents of the entire column 1. Row 1 columns are not blank (i.e., they contain "column headings"), describe the contents of the entire column, and allow the reader to distinguish the difference in meaning between that column and other columns.
Column 1 rows are usually not blank, they often contain "row headings" which describe the contents of the entire row, and allow the reader to distinguish the difference in meaning between that row and the other rows. Otherwise, the Column 1 would contain simple data.
@@ -36,7 +36,7 @@
Examples
A schedule marked up as a simple data table with column and row headers
-
This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.
+
This example uses markup for a simple data table. The first row shows the days of the week. Time intervals are shown in the first column. These cells are marked with the th element. This identifies the days of the week as column headers and the time intervals as row headers.
Screen readers speak header information that changes as the user navigates the table. Thus, when screen reader users move to left or right along a row, they will hear the day of the week (the column header) followed by the appointment (if any). They will hear the time interval as they move up or down within the same column.
<table>
@@ -76,7 +76,7 @@
Procedure
For each occurrence of tabular information:
-
Check that table markup with at least the elements table, tr, th, and td is used.
+
Check that table markup with at least the elements table, tr, th, and td is used.
Documents that load media with the object element.
+
Documents that load media with the object element.
Description
The objective of this technique is to provide a text alternative for content rendered
- using the object element. The body of the object element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.
-
Fallback content for the object element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.
+ using the object element. The body of the object element can be used to provide a complete text alternative for the object, or may contain additional non-text content with text alternatives.
+
Fallback content for the object element is only available to the user when the media loaded by the element is not rendered by the user agent, because the user agent does not support the media technology or the user has instructed the user agent not to render that technology. In these situations, the fallback content will be presented to the user. If the media is rendered without the fallback content, the media needs to be directly accessible. Authors can only rely on this technique to satisfy the success criterion if they are not relying on the direct accessibility of the media's technology in their conformance claim, and reasonably expect users will be able to access the fallback.
Examples
@@ -38,7 +38,7 @@
The image object has content that provides a brief description of the functi
</object>
-
This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.
+
This example takes advantage of the fact the object elements may be nested to provide for alternative representations of information.
Using the dfn element to identify the defining instance of a word
+
Using the dfn element to identify the defining instance of a word
ID: H54
Technology: html
@@ -17,8 +17,8 @@
When to Use
Description
-
The objective of this technique is to use the dfn to mark the use of a
- word or phrase where it is defined. The dfn element is used to indicate the
+
The objective of this technique is to use the dfn to mark the use of a
+ word or phrase where it is defined. The dfn element is used to indicate the
defining instance of the enclosed term. In other words, it marks the occurrence of the
term where the term is defined. Note that it encloses the term, not the definition. This
technique would be used in combination with Using
@@ -41,7 +41,7 @@
Using the dir attribute on an inline element to resolve problems with nested directional runs
+
Using the dir attribute on an inline element to resolve problems with nested directional runs
ID: H56
Technology: html
@@ -17,7 +17,7 @@
When to Use
Description
-
The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir attribute on an enclosing span or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
+
The objective of this technique is to identify changes in the text direction of text that includes nested directional runs by providing the dir attribute on inline elements. A nested directional run is a run of text that includes mixed directional text, for example, a paragraph in English containing a quoted Hebrew sentence which in turn includes an English phrase. Use of the dir attribute on an enclosing span or other inline element may be necessary because the Unicode bidirectional algorithm can produce undesirable results when mixed directional text contains spaces or punctuation. The concepts used in this technique are described in What you need to know about the bidi algorithm and inline markup.
Examples
@@ -42,8 +42,8 @@
Tests
Procedure
Examine the text direction of text in the document
-
If the text direction is right-to-left, check that for the ancestor element that has a dir attribute, the attribute has the value "rtl"
-
If the text direction is left-to-right, check that there is no ancestor element with a dir attribute, or that for the ancestor element that has a dir attribute, the attribute has the value "ltr"
+
If the text direction is right-to-left, check that for the ancestor element that has a dir attribute, the attribute has the value "rtl"
+
If the text direction is left-to-right, check that there is no ancestor element with a dir attribute, or that for the ancestor element that has a dir attribute, the attribute has the value "ltr"
HTML - bidirectional text.
diff --git a/techniques/html/H57.html b/techniques/html/H57.html
index 904c0952a4..c27f16ae02 100644
--- a/techniques/html/H57.html
+++ b/techniques/html/H57.html
@@ -5,7 +5,7 @@
-
Using the language attribute on the HTML element
+
Using the language attribute on the HTML element
ID: H57
3.1.1 Language of Page
@@ -18,7 +18,7 @@
When to Use
Description
-
The objective of this technique is to identify the default language of a document by providing the lang attribute on the html element.
+
The objective of this technique is to identify the default language of a document by providing the lang attribute on the html element.
Identifying the language of the document is important for a number of reasons:
It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.
@@ -49,10 +49,10 @@
Defining the content of an HTML document to be in French
The objective of this technique is to clearly identify any changes in language on a page by using the lang attribute.
+
The objective of this technique is to clearly identify any changes in language on a page by using the lang attribute.
-
Allowed values for the lang attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of sub-codes is optional but may be helpful in certain circumstances.
+
Allowed values for the lang attribute are indicated in the resources referenced below. Language tags use a primary code to indicate the language, and optional sub-codes (separated by hyphen characters) to indicate variants of the language. For instance, English is indicated with the primary code "en"; British English and American English can be distinguished by using "en-GB" and "en-US", respectively. Use of the primary code is important for this technique. Use of sub-codes is optional but may be helpful in certain circumstances.
Examples
-
The use of the lang attribute to define a quote written in German
+
The use of the lang attribute to define a quote written in German
The objective of this technique is to describe how the link element can
+
The objective of this technique is to describe how the link element can
provide metadata about the position of an HTML page within a set of web pages or can
- assist in locating content with a set of web pages. The value of the rel
- attributes indicates what type of relation is being described, and the href
- attribute provides a link to the document having that relation. Different link element rel values are used to create relationships:
+ assist in locating content with a set of web pages. The value of the rel
+ attributes indicates what type of relation is being described, and the href
+ attribute provides a link to the document having that relation. Different link element rel values are used to create relationships:
-
next: Refers to the next document in a linear sequence of documents.
-
prev: Refers to the previous document in an ordered series of documents.
+
next: Refers to the next document in a linear sequence of documents.
+
prev: Refers to the previous document in an ordered series of documents.
@@ -36,7 +36,7 @@
Examples
A web page for Chapter 2 of an on-line book might contain the following links
- within the head section.
HTML - sequential link types
diff --git a/techniques/html/H60.html b/techniques/html/H60.html
index c8d789783d..9b511d8f11 100644
--- a/techniques/html/H60.html
+++ b/techniques/html/H60.html
@@ -7,9 +7,9 @@
Description
The objective of this technique is to provide a mechanism for locating a glossary. When
terms in the content are defined on a separate glossary page, the glossary is referenced
- using a link element in the head element of the document that
- uses the glossary. The rel attribute of the link element is
- set to "glossary", and the href attribute contains the URI of the glossary
+ using a link element in the head element of the document that
+ uses the glossary. The rel attribute of the link element is
+ set to "glossary", and the href attribute contains the URI of the glossary
page. User agents can then assist users in accessing the glossary quickly and
easily.
Examples
@@ -21,14 +21,14 @@
The WCAG 2 Glossary.
Procedure
For any set of words and their definitions that are meant to serve as a glossary:
-
Check that the head section of the web page that contains words,
- phrases or abbreviations defined in a glossary contains a link
+
Check that the head section of the web page that contains words,
+ phrases or abbreviations defined in a glossary contains a link
element
-
Check that the link element has attribute
+
Check that the link element has attribute
- rel="glossary"
+ rel="glossary"
-
Check that the href attribute of the link element
+
Check that the href attribute of the link element
refers to the glossary page.
The objective of this technique is to use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.
There are many languages in which a run of text may mean different things depending on how the text is pronounced. This is common in East Asian languages as well as Hebrew, Arabic, and other languages; it also occurs in English and other Western European languages.
Ruby Annotation allows the author to annotate a "base text," providing a guide to pronunciation and, in some cases, a definition as well. Ruby is commonly used for text in Japanese and other East Asian languages.
-
There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (rb element). The Ruby annotation that indicates how to pronounce the term (the rt element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support HTML).
+
There are two types of Ruby markup: simple and complex. Simple Ruby markup applies to a run of text such as a complete word or phrase. This is known as the "base" text (rb element). The Ruby annotation that indicates how to pronounce the term (the rt element, or Ruby text) is shown in a smaller font. (The term "Ruby" is derived from a small font used for this purpose in printed texts.) The Ruby text is usually rendered above or immediately before the base text, that is, immediately above horizontal text or immediately to the right of vertical text. Sometimes Japanese uses Ruby to provide the meaning of text on the other side of the base text (visually) from the phonetic annotation. Simple Ruby markup also provides a "fallback" option for user agents that do not support Ruby markup (that is, user agents that do not support HTML).
Complex Ruby markup makes it possible to divide the base text into smaller units, each of which may be associated with a separate Ruby annotation. Complex Ruby markup does not support the fallback option.
Ruby annotation is uncommon in languages such as Hebrew, where Unicode fonts can include diacritical marks that convey pronunciation. It is also uncommon in English and European languages.
Note: The primary reason for indicating pronunciation through Ruby or any other means is to make the content accessible to people with disabilities who could read and understand the language of the content if information about pronunciation were provided. It is not necessary to provide information about pronunciation for use by people who are not familiar with the language of the content.
@@ -29,7 +29,7 @@
Description
Examples
Ruby markup providing pronunciation information for an initialism
-
This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the rt element). The Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
+
This example uses Ruby annotation to give the pronunciation of the initialism (acronym) formed by the first letters of the words Web Content Accessibility Guidelines. The letters WCAG are the base (the rb element), and the pronunciation information is shown by the Ruby text (the rt element). The Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
<p>When we talk about these guidelines, we often just call them
<ruby>
<rb>WCAG</rb>
@@ -41,7 +41,7 @@
Ruby markup providing pronunciation information for an initialism
Ruby annotation for Japanese
-
The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
+
The following is an example in Japanese. For Japanese, the Ruby is used to give the reading of Han characters (Kanji). the Ruby parenthesis element rp is used for user agents that do not support Ruby annotations to indicate that the text in the rt element provides the pronunciation information. The pronunciation information is rendered in parentheses immediately following the base text. (User agents that support Ruby do not show the parentheses.)
<p>
<ruby>
@@ -59,8 +59,8 @@
Tests
Procedure
For each run of text where a Ruby annotation is used to provide pronunciation information:
-
Check that a rt element contains pronunciation information for each run of text defined by the rb element.
-
If simple Ruby markup is used, check that the rp element is present to indicate to user agents that do not support Ruby annotations that the text in the rt element provides the pronunciation information.
+
Check that a rt element contains pronunciation information for each run of text defined by the rb element.
+
If simple Ruby markup is used, check that the rp element is present to indicate to user agents that do not support Ruby annotations that the text in the rt element provides the pronunciation information.
Using the scope attribute to associate header cells with data cells in data tables
+
Using the scope attribute to associate header cells with data cells in data tables
ID: H63
Technology: html
@@ -17,11 +17,11 @@
When to Use
Description
-
The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes, respectively.
+
The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes, respectively.
For simple data tables where the header is not in the first row or column, like the one in Example 1, this technique can be used.
-
For simple tables that have the headers in the first row or column, it is sufficient to simply use the th elements without scope.
Some users may find it easier to work with several simple tables than one more complex table. Authors may wish to consider whether they can convert complex tables to one or more simple tables.
@@ -30,7 +30,7 @@
Description
Examples
A simple schedule
-
In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".
+
In the following example, the first column contains serial numbers for rows in the table, and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".
The objective of this technique is to demonstrate the use of the title attribute of the iframe element to describe its contents. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the content inside the iframe.
+
The objective of this technique is to demonstrate the use of the title attribute of the iframe element to describe its contents. This provides a label for the frame so users can determine which frame to enter and explore in detail. It does not label the content inside the iframe.
-
The title attribute labels iframes, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among iframes and the second clarifies the user's current page.
+
The title attribute labels iframes, and is different from the title element which labels documents. Both should be provided, since the first facilitates navigation among iframes and the second clarifies the user's current page.
-
The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.
+
The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.
Examples
-
Using the title attribute with an iframe to describe the iframe's content
+
Using the title attribute with an iframe to describe the iframe's content
Using the title attribute to identify form controls when the label element cannot be used
+
Using the title attribute to identify form controls when the label element cannot be used
ID: H65
Technology: html
Type: Technique
When to Use
-
HTML form controls that are not identified using value, alt, or element content
+
HTML form controls that are not identified using value, alt, or element content
Description
-
The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the title attribute.
+
The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design does not include text on the screen that can be associated with the control as a label. User agents, including assistive technology, can speak the title attribute.
Examples
A pulldown menu that limits the scope of a search
-
A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a separate visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.
+
A search form uses a pulldown menu to limit the scope of the search. The pulldown menu is immediately adjacent to the text field used to enter the search term. The relationship between the search field and the pulldown menu is clear to users who can see the visual design, which does not have room for a separate visible label. The title attribute is used to identify the select menu. The title attribute can be spoken by screen readers or displayed as a tool tip for people using screen magnifiers. There must be visual information on the page which allows sighted users to understand the purpose of the form controls and user agents.
A web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
+
A web page contains a text field where the user can enter search terms and a button labeled "Search" for performing the search. The title attribute is used to identify the form control and the button is positioned right after the text field so that it is clear to the user that the text field is where the search term should be entered.
<input type="text" title="Type search term here"> <input type="submit" value="Search">
@@ -59,11 +59,11 @@
A data table of form controls
Tests
Procedure
-
For all form controls that are not associated with a label element:
+
For all form controls that are not associated with a label element:
-
Check that the control has a title attribute
+
Check that the control has a title attribute
Check that the purpose of the form control is clear to users who can see the control.
-
Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
+
Check that the title attribute identifies the purpose of the control and that it matches the apparent visual purpose.
Using null alt text and no title attribute on img elements for images that assistive technology should ignore
+
Using null alt text and no title attribute on img elements for images that assistive technology should ignore
ID: H67
Technology: html
@@ -18,9 +18,9 @@
When to Use
Description
The purpose of this technique is to show how images can be marked so that they can be ignored by assistive technology.
-
If no title attribute is used, and the alt text is set to null (i.e., alt="") it indicates to assistive technology that the image can be safely ignored.
+
If no title attribute is used, and the alt text is set to null (i.e., alt="") it indicates to assistive technology that the image can be safely ignored.
-
Having a "null" alt attribute is not the same as having no alt attribute.
+
Having a "null" alt attribute is not the same as having no alt attribute.
@@ -36,8 +36,8 @@
Tests
Procedure
For each image that should be ignored:
-
Check that title attribute is either absent or empty.
-
Check that alt attribute is present and empty.
+
Check that title attribute is either absent or empty.
to mark up images of text that are used as headings;
to allow users the ability to navigate a page by sections or skip repeated blocks of information.
-
Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.
+
Headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically. When headings are nested hierarchically, the most important information is given the highest logical level, and subsections are given subsequent logical levels.(i.e., h2 is a subsection of h1). Providing this type of structure will help users understand the overall organization of the content more easily.
Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly. Headings create chunks of information that can be found easily by people with disabilities, such as a blind person using a screen reader, or a person with a cognitive disability who uses assistive technology that delineates groups of information, or someone with a communication disability or illiteracy, who uses a screen reader to assist them in their reading.
All of our techniques assume that people needing special user agents (including assistive technology or special plug-ins) will get and be using that type of user agent (for example: a screen reader, or plug-in that allows keyboard navigation of properly marked up content, etc.).
@@ -35,7 +35,7 @@
Description
Examples
Organizing the sections of a search page
-
This example marks up each section heading using h2 elements.
+
This example marks up each section heading using h2 elements.
Nomensa: How to structure headings for web accessibility.
diff --git a/techniques/html/H70.html b/techniques/html/H70.html
index bb94d5222e..7fa4b23239 100644
--- a/techniques/html/H70.html
+++ b/techniques/html/H70.html
@@ -22,7 +22,7 @@
of the page; other techniques are preferred for pages that are not already using
framesets, because many people using assistive technology have trouble with frames . An
advisory technique about using noframes is available in Success Criterion 1.1.1.
-
Providing a description for groups of form controls using fieldset and legend elements
+
Providing a description for groups of form controls using fieldset and legend elements
ID: H71
Technology: html
@@ -18,17 +18,17 @@
When to Use
Description
The objective of this technique is to provide a semantic grouping for related form controls. This allows users to understand the relationship of the controls and interact with the form more quickly and effectively.
-
Form controls can be grouped by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to confusion.
-
Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend before the label of each control to provide this description, as well as to remind users that they are part of the same group.
-
It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
-
However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e., where the individual label associated with each particular control provides a sufficient description), the use of the fieldset and legend elements is not required. H44 is sufficient in this case.
-
Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the border property of the fieldset and the position property of the legend.
+
Form controls can be grouped by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group. Authors should avoid nesting fieldsets unnecessarily, as this can lead to confusion.
+
Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. They work in the same way as selection lists, allowing the user to choose from a set of options, except selection lists are single controls while radio buttons and checkboxes are multiple controls. The individual label associated with each radio or checkbox control may not fully convey the group's descriptive context. In this situation, it is essential that they be grouped together semantically to facilitate being treated as a single control, as well as to provide an additional group level description. Often, user agents will present the value of the legend before the label of each control to provide this description, as well as to remind users that they are part of the same group.
+
It can also be useful to group other sets of controls less tightly related than radio buttons and checkboxes. For instance, several fields that collect a user's address might be grouped together with a legend of "Address", thus providing a group level description for these controls. As a rule of thumb, it can be said that where a group of controls within a larger form requires an additional heading to provide a description specific to that particular group, the use of fieldset and legend elements is appropriate.
+
However, when a group of related radio buttons or checkboxes (even having values for a single named field) includes clear instructions and distinct selections (i.e., where the individual label associated with each particular control provides a sufficient description), the use of the fieldset and legend elements is not required. H44 is sufficient in this case.
+
Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the border property of the fieldset and the position property of the legend.
Examples
A multiple choice test
-
This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element. Each field has the same name attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the name attributes have the same value, the id attributes' values must be unique.
+
This example shows a test item with one question and five possible answers. Each answer is represented by a radio button (input type="radio"). The radio buttons are contained within a fieldset. The test question is tagged with the legend element. Each field has the same name attribute, indicating these radio buttons are related, and should be grouped as shown. Also note that while the name attributes have the same value, the id attributes' values must be unique.
<fieldset>
<legend>The play <cite>Hamlet</cite> was written by:</legend>
@@ -56,7 +56,7 @@
A multiple choice test
A set of checkboxes
-
The User Profile page for a website allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (input type="checkbox") has a label. The checkboxes are contained within a fieldset, and the legend element contains the prompt for the entire group of checkboxes.
+
The User Profile page for a website allows users to indicate their interests by selecting multiple checkboxes. Each checkbox (input type="checkbox") has a label. The checkboxes are contained within a fieldset, and the legend element contains the prompt for the entire group of checkboxes.
<fieldset>
<legend>I am interested in the following (check all that apply):</legend>
@@ -77,7 +77,7 @@
A set of checkboxes
Logically related controls
-
In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.
+
In this example, form fields for residential and postal addresses are distinguished by the value of the legend in each fieldset grouping.
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:
-
Check that the group of logically related input or select elements are contained within fieldset elements.
-
Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.
+
Check that the group of logically related input or select elements are contained within fieldset elements.
+
Check that each fieldset has a legend element that is the first child in the fieldset and includes a description for that group.
The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.
-
The summary is useful when the table has a complex structure (for example,
+
The objective of this technique is to provide a brief overview of how data has been organized into a table or a brief explanation of how to navigate the table. The summary attribute of the table element makes this information available to people who use screen readers; the information is not displayed visually.
+
The summary is useful when the table has a complex structure (for example,
when there are several sets of row or column headers, or when there are multiple groups
- of columns or rows). The summary may also be helpful for simple data tables
+ of columns or rows). The summary may also be helpful for simple data tables
that contain many columns or rows of data.
-
The summary attribute may be used whether or not the table includes a
- caption element. If both are used, the summary should not
- duplicate the caption.
-
In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.
+
The summary attribute may be used whether or not the table includes a
+ caption element. If both are used, the summary should not
+ duplicate the caption.
+
In HTML5 the summary attribute is obsolete. Assistive technologies may or may not continue to support the attribute. Authors should consider alternatives and only use with caution.
Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are
- recommended in order to retain the defined semantic meaning of the HTML table
+ recommended in order to retain the defined semantic meaning of the HTML table
elements and to conform to the coding practice of separating presentation from content.
- However, if a layout table is used, then the summary attribute is not used or
+ However, if a layout table is used, then the summary attribute is not used or
is null. The purpose of a layout table is simply to control the placement of content;
- the table itself is “transparent" to the user. A summary would “break" this
- transparency by calling attention to the table. A null summary
- (summary="") on layout tables is acceptable. See F46 for details.
+ the table itself is “transparent" to the user. A summary would “break" this
+ transparency by calling attention to the table. A null summary
+ (summary="") on layout tables is acceptable. See F46 for details.
Examples
-
A data table with a summary but no caption
+
A data table with a summary but no caption
This example shows a bus schedule. The route number and direction are included in
- the summary along with information on how to use the schedule.
+ the summary along with information on how to use the schedule.
<table summary="Schedule for Route 7 going downtown. Service begins
at 4:00 AM and ends at midnight. Intersections are listed in the top row.
@@ -56,14 +56,14 @@
A data table with a summary but no
-
A data table with both a summary and a caption
+
A data table with both a summary and a caption
-
In this example both a summary attribute and a caption
- element are used. The caption identifies the bus route. The
- summary helps users who are blind understand how to use the schedule.
- Screen readers read the caption, followed by the
- summary.
+
In this example both a summary attribute and a caption
+ element are used. The caption identifies the bus route. The
+ summary helps users who are blind understand how to use the schedule.
+ Screen readers read the caption, followed by the
+ summary.
<table summary="Intersections are listed in row 1.
Find the intersection closest to your starting point
@@ -78,12 +78,12 @@
A data table with both a summary and a
Procedure
For each data table:
-
If a summary is present, check that the summary
+
If a summary is present, check that the summary
attribute describes the table's organization or explains how
to use the table
-
If both a summary attribute and a caption element are present
- for the data table, check that the summary does not
- duplicate the caption.
+
If both a summary attribute and a caption element are present
+ for the data table, check that the summary does not
+ duplicate the caption.
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE declaration). A developer can use offline or online validators (see the Resources section) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.
+
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE declaration). A developer can use offline or online validators (see the Resources section) to check that all id attribute values are unique and that opening and closing tags are used according to the specification.
In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.
+
In HTML, one can use the meta element with the value of the http-equiv attribute set to refresh and the value of the content attribute set to 0 (meaning zero seconds), followed by the URI that the browser should request. It is important that the time-out is set to zero, to avoid that content is displayed before the new page is loaded. The page containing the redirect code should only contain information related to the redirect.
Examples
@@ -42,10 +42,10 @@
Instantly redirecting a page
Tests
Procedure
-
Find all meta elements in the document that contain the http-equiv attribute with value refresh, check that:
+
Find all meta elements in the document that contain the http-equiv attribute with value refresh, check that:
-
the content attribute has a number with a value of 0, and
-
the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
+
the content attribute has a number with a value of 0, and
+
the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
Using the target attribute to open a new window on user request and indicating this in link text
+
Using the target attribute to open a new window on user request and indicating this in link text
ID: H83
Technology: html
@@ -17,16 +17,16 @@
When to Use
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 users or be missed completely by some. In HTML, the target attribute can be used to open a new window.
-
Use of the target attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.
+
The objective of this technique is to avoid confusion that may be caused by the appearance of new windows that were not requested by the user. Suddenly opening new windows can disorient users or be missed completely by some. In HTML, the target attribute can be used to open a new window.
+
Use of the target attribute provides an unambiguously machine-readable indication that a new window will open. User agents can inform the user, and can also be configured not to open the new window. For those not using assistive technology, the indication would also be available from the link text.
-
Note that not using the target allows the user to decide whether a new window should be opened or not.
+
Note that not using the target allows the user to decide whether a new window should be opened or not.
Examples
-
Using the target attribute in a link to indicate it will open in a new window
+
Using the target attribute in a link to indicate it will open in a new window
<a href="help.html" target="_blank">Show Help (opens new window)</a>
@@ -36,7 +36,7 @@
Tests
Procedure
Activate each link in the document to check if it opens a new window.
-
For each link that opens a new window, check that it uses the target attribute.
+
For each link that opens a new window, check that it uses the target attribute.
Check that the link text contains information indicating that the link will open in a new window.
The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select element. The user may inspect the different values of the select element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.
-
This is particularly important for users who are choosing the value of the select element via the keyboard, since navigating through the options of the select element changes the value of the control.
+
The objective of this technique is to allow the user to control when an action is performed, rather than having the action occur as a side effect of choosing a value for the select element. The user may inspect the different values of the select element, or may accidentally choose the wrong value, without causing the action to occur. When the user is satisfied with their choice, they select the button to perform the action.
+
This is particularly important for users who are choosing the value of the select element via the keyboard, since navigating through the options of the select element changes the value of the control.
Examples
@@ -38,7 +38,7 @@
A calendar
Choosing an action
-
A select element contains a list of possible actions. The action is not performed until the user presses the "Update" button.
+
A select element contains a list of possible actions. The action is not performed until the user presses the "Update" button.
Using optgroup to group option elements inside a select
+
Using optgroup to group option elements inside a select
ID: H85
Technology: html
@@ -17,10 +17,10 @@
When to Use
Description
-
The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an option element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.
-
In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the label attribute so users will know what to expect inside the group.
-
The optgroup element should be directly inside the select element, and the option elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.
-
If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.
+
The objective of this technique is to group items in a selection list. A selection list is a set of allowed values for a form control such as a multi-select list or a combo box. Often, selection lists have groups of related options. Those groups should be semantically identified, rather than being delimited with "dummy" list entries, for example: an option element containing only a series of dashes to create a horizontal line. Semantically identifying groups of options helps to visually break up long lists so that users can more easily locate what they are interested in.
+
In HTML, the select element is used to create both multi-select lists and combo boxes. The various allowed options are each indicated with option elements. To group options together, use the optgroup element, with the related option elements inside that element. Label the group with the label attribute so users will know what to expect inside the group.
+
The optgroup element should be directly inside the select element, and the option elements directly inside the optgroup. It is possible for a select element to contain both single option elements and optgroup groups, though authors should consider if this is in fact the desired intent when using this. It is not possible to nest the optgroup element, so only one level of grouping can be done within a select.
+
If grouping information is essential to understanding the list, authors may define option labels that can be understood even when the screen reader does not present the grouping information provided by optgroup.
Examples
@@ -50,7 +50,7 @@
Examples
-
The following example shows how a multi-select box can make use of the optgroup element.
+
The following example shows how a multi-select box can make use of the optgroup element.
This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.
+
This shows a technique to mark up emojis with accessible names that differ from their default. Because you can't use an alt attribute on a span element and the ARIA recommendation disallows accessible names on generic elements, to give the emojis accessible names they are defined as images with the ARIA role="img" property which then allows the creation of an accessible name using the aria-label property.
<p>I smiled at my friend and gestured
<span aria-label="you" role="img">👉🏾</span>
<span aria-label="rock" role="img">🤘🏾</span>!
@@ -44,8 +44,8 @@
Four options for providing alternatives for an emoticon representing "smile"
-
Using the aria-label and role="img" properties
-
Adding the role="img" property to the ASCII content's containing element defines it as an image, and the aria-label property gives it the required text alternative. Skip to the next ASCII example.
+
Using the aria-label and role="img" properties
+
Adding the role="img" property to the ASCII content's containing element defines it as an image, and the aria-label property gives it the required text alternative. Skip to the next ASCII example.
Using the title attribute to provide context-sensitive help
+
Using the title attribute to provide context-sensitive help
ID: H89
Technology: html
@@ -18,21 +18,21 @@
When to Use
Description
-
The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.
+
The objective of this technique is to provide context sensitive help for users as they enter data in forms by providing the help information in a title attribute. The help may include format information or examples of input.
-
Current user agents and assistive technologies do not always provide the information contained in the title attribute to users. Avoid using this technique in isolation.
+
Current user agents and assistive technologies do not always provide the information contained in the title attribute to users. Avoid using this technique in isolation.
Examples
-
A mapping application provides a form consisting of a label "Address:", an input component and a submit button with value "Find map". The input component has a title attribute value with an example of the address format the user should enter.
+
A mapping application provides a form consisting of a label "Address:", an input component and a submit button with value "Find map". The input component has a title attribute value with an example of the address format the user should enter.
A form that allows users to pay their bill online requires the user to enter their account number. The input component associated with the "Account number" label has a title attribute providing information on locating the account number.
+
A form that allows users to pay their bill online requires the user to enter their account number. The input component associated with the "Account number" label has a title attribute providing information on locating the account number.
Indicating required form controls using label or legend
+
Indicating required form controls using label or legend
ID: H90
Technology: html
@@ -17,13 +17,13 @@
When to Use
Description
-
The objective of this technique is to provide a clear indication that a specific form control in a web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.
+
The objective of this technique is to provide a clear indication that a specific form control in a web application or form is required for successful data submission. A symbol or text indicating that the control is required is programmatically associated with the field by using the label element, or the legend for groups of controls associated via fieldset. If a symbol is used, the user is advised of its meaning before the first use.
Examples
Using text to indicate required state
-
The text field in the example below has the explicit label of "First name (required):". The label element's for attribute matches the id attribute of the input element and the label text indicates that the control is required.
+
The text field in the example below has the explicit label of "First name (required):". The label element's for attribute matches the id attribute of the input element and the label text indicates that the control is required.
<label for="firstname">First name (required):</label>
<input id="firstname" name="firstname" type="text">
@@ -32,7 +32,7 @@
Using text to indicate required state
Using an asterisk to indicate required state
-
The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.
+
The text field in the example below has an explicit label that includes an asterisk to indicate the control is required. It is important that the asterisk meaning is defined at the start of the form. In this example, the asterisk is contained within a abbr element to allow for the asterisk character to be styled so that it is larger than the default asterisk character, since the asterisk character can be difficult to see for those with impaired vision.
The CSS
.req {font-size: 150%}
@@ -60,7 +60,7 @@
Using an image to indicate required state
Indicating required state for groups of radio buttons or check box controls
-
Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element.
+
Radio buttons and checkboxes are treated differently than other interactive controls since individual radio buttons and checkboxes are not required but indicates that a response for the group is required. The methods used in examples 1-3 apply to radio buttons and checkboxes, but the indication of the required state should be placed in the legend element instead of the label element.
<fieldset>
<legend>I am interested in the following (Required):</legend>
@@ -85,7 +85,7 @@
Tests
Procedure
-
For each required form control, check that the required status is indicated in the form control's label or legend.
+
For each required form control, check that the required status is indicated in the form control's label or legend.
For each indicator of required status that is not provided in text, check that the meaning of the indicator is explained before the form control that uses it.
The objective of this technique is to use standard HTML form controls and link elements to provide keyboard operation and assistive technology interoperability of interactive user interface elements.
User agents provide the keyboard operation of HTML form controls and links. In addition, the user agent maps the form controls and links to an accessibility API. Assistive technologies use the accessibility API to extract appropriate accessibility information, such as role, name, state, and value, and present them to users. The role is provided by the HTML element, and the name is provided by the text associated with that element. Elements for which values and states are appropriate also expose the values and states via multiple mechanisms.
-
In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image alt attribute as the name. In the case of form controls, label elements; the aria-label or aria-labelledby properties; or the title attribute are used.
+
In some cases, the text is already associated with the control through a required attribute. For example, submit buttons use the button element text or image alt attribute as the name. In the case of form controls, label elements; the aria-label or aria-labelledby properties; or the title attribute are used.
Examples
Links
-
User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.
+
User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is "link" because the a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute.
Link example A
In example A, the name is the text inside the link, in this case "Example Site".
@@ -33,12 +33,12 @@
Link example A
Link example B
-
In example B of an image inside a link, the alt attribute for the image provides the name.
+
In example B of an image inside a link, the alt attribute for the image provides the name.
In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
+
In example C, some assistive technology will not automatically insert a space character when concatenating the image's alt text and the text of the link. If the text should not be concatenated without a space, it is safest to insert a space between the image and the adjacent word so that words will not run together.
Example C uses the alt attribute, in this case "save", as the name.
+
Example C uses the alt attribute, in this case "save", as the name.
<input alt="save" src="save.gif" type="image">
Buttons example D
-
Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.
+
Example D clarifies how the user agent determines the name if the author specifies both the alt and title attributes of the input element. In this case, the user agent uses the alt attribute ("Save") and ignores the title attribute.
<input alt="save" src="save.gif" title="save the file" type="image">
@@ -73,28 +73,28 @@
Buttons example D
Text Input
Text Input example A
-
In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
+
In example A, the input field has a role of "editable text". The label element is associated to the input element via the for attribute which references the id attribute of the input element. The name comes from the label element, in this case, "Type of fruit". Its value comes from its value attribute, in this case "bananas".
<label for="text-1">Type of fruit</label>
<input id="text-1" type="text" value="bananas">
Text Input example B
-
In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.
+
In example B, the input field has the same role as example A, but the value is the empty string and the field gets its name from the aria-label property.
<input aria-label="Type of fruit" id="text-1" type="text">
Checkbox
-
This example has a role of checkbox, from the type attribute of the input element. The label element is associated with the input element via the for attribute which refers to the id attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
+
This example has a role of checkbox, from the type attribute of the input element. The label element is associated with the input element via the for attribute which refers to the id attribute of the input element. The name comes from the label element, in this case "cheese". Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
This example has a role of "radio button" from the type attribute on the input element. Its name comes from the label element. Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
+
This example has a role of "radio button" from the type attribute on the input element. Its name comes from the label element. Its state can be checked or unchecked and comes from the checked attribute. The state can be changed by the user's interaction with the control.
The radio fieldset has a role of "grouping". The name comes from the legend element.
+
The radio fieldset has a role of "grouping". The name comes from the legend element.
<fieldset>
<legend>Choose a Color:</legend>
<div>
@@ -122,7 +122,7 @@
Radio Fieldset
Select Element
Select element example A
-
Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".
+
Example A has a role of "list box" from the select element. Its name is "Numbers" from the label element. Forgetting to give a name to the select is a common error. The value is the option element that has the selected attribute present. In this case, the default value is "Two".
Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
+
Example B has the same name, role, and value as the above, but sets the name with the aria-label property on the select element. This technique can be used when a visible label is not possible.
Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".
+
Example A has a role of "editable text" from the textarea element. The name is "Type your speech here" from the label element. The value is the content inside the textarea element, in this case "Four score and seven years ago".
<label for="ta-1">Type your speech here</label>
<textarea id="ta-1">Four score and seven years ago</textarea>
Textarea example B
-
Example B has the same role, the name is set using the title attribute, and the value is the empty string.
+
Example B has the same role, the name is set using the title attribute, and the value is the empty string.
<textarea title="Type your speech here">Four score and seven years ago</textarea>
MDN - The Input (Form Input) element
diff --git a/techniques/html/H93.html b/techniques/html/H93.html
index 31a5432b5b..fc8c54cfe0 100644
--- a/techniques/html/H93.html
+++ b/techniques/html/H93.html
@@ -10,7 +10,7 @@
-
Ensuring that id attributes are unique on a web page
+
Ensuring that id attributes are unique on a web page
ID: H93
Technology: html
@@ -22,13 +22,13 @@
When to Use
Description
-
The objective of this technique is to avoid errors that result from the same id attribute being used multiple times on the same page. These errors can be avoided by making sure the page doesn't have duplicate id values. This can be done manually or by using HTML's mechanism to specify the technology and technology version, and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.
+
The objective of this technique is to avoid errors that result from the same id attribute being used multiple times on the same page. These errors can be avoided by making sure the page doesn't have duplicate id values. This can be done manually or by using HTML's mechanism to specify the technology and technology version, and validating the document for this condition. There are several validators that the developer can use; validation reports generally mention this type of error. The document type declaration is not strictly necessary for this type of evaluation, but specifying the document type declaration makes it easier to use a validator.
Examples
Duplicate id attributes in form elements
-
In this example, the first name and last name inputs both have an id attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.
+
In this example, the first name and last name inputs both have an id attribute with the same value. Due to the way accessible names are computed, this results in the last name input having no accessible name.
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that id attribute values are only used once on a page. The W3C validator, for example, will report "Duplicate ID" when it encounters the subsequent uses of an id value.
+
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that id attribute values are only used once on a page. The W3C validator, for example, will report "Duplicate ID" when it encounters the subsequent uses of an id value.
@@ -44,7 +44,7 @@
Tests
Procedure
-
Check that all id attribute values are unique on the page.
+
Check that all id attribute values are unique on the page.
Nu HTML Checker
diff --git a/techniques/html/H94.html b/techniques/html/H94.html
index 156b1b3cd9..e97b2f7284 100644
--- a/techniques/html/H94.html
+++ b/techniques/html/H94.html
@@ -37,7 +37,7 @@
Description
Examples
HTML Validators
-
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The W3C validator, for example, will report Error duplicate attribute [attribute name] when it encounters the second definition of the same attribute on an element.
+
HTML pages include a document type declaration (sometimes referred to as !DOCTYPE statement). The developer can use offline or online validators (see Resources below) to check that attributes are only used once on an element. The W3C validator, for example, will report Error duplicate attribute [attribute name] when it encounters the second definition of the same attribute on an element.
The objective of this technique is to use the HTML track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
-
The src attribute of the track element is a URL that is the address of the text track data.
-
The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.
+
The objective of this technique is to use the HTML track element to specify a captions timed text track for a video element. Caption timed text tracks contain transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible.
+
The src attribute of the track element is a URL that is the address of the text track data.
+
The kind attribute of the track element indicates the kind of information in the timed text. captions text tracks provide a text version of dialogue and other sounds important to understanding the video. Subtitles contain only the dialogue. If other audio information is important to understanding the video, a subtitle track will not be sufficient to meet the success criterion.
Some regions use the term "subtitle" for any visible text representation of the audio track. An author may mark up a timed text track in the language of the audio track as kind=subtitles, instead of kind=captions, and may include additional relevant audio information. It is not best practice to use subtitles in this situation, since it may confuse users who are trying to find captions, but such a timed text track would meet the requirements of Success Criterion 1.2.2.
@@ -28,7 +28,7 @@
Description
Examples
Captions in one language
-
A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
+
A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format.
Timed Text Markup Language
diff --git a/techniques/html/H96.html b/techniques/html/H96.html
index 7f4763bcc3..eeca3c9637 100644
--- a/techniques/html/H96.html
+++ b/techniques/html/H96.html
@@ -5,7 +5,7 @@
-
Using the track element to provide audio descriptions
+
Using the track element to provide audio descriptions
ID: H96
Technology: html
@@ -17,8 +17,8 @@
When to Use
Description
-
The objective of this technique is to use the HTML track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
-
The src attribute of the track element is an URL providing the text track data.
+
The objective of this technique is to use the HTML track element to specify a descriptions timed text track for a video element. Audio description timed text tracks contain textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable. The user agent makes the cues available to the user in a non-visual fashion, for instance, by synthesizing them into speech.
+
The src attribute of the track element is an URL providing the text track data.
The audio description cues must fit into the gaps available in the audio component of the media resource. If there is not enough time to synthesize the description text in the track cue's time interval, user agents may truncate the speech. This limits the amount of supplementary information that can be added.
User agents may also support extended audio descriptions by halting the video until the description has been completely synthesized, then restarting the video.
@@ -29,7 +29,7 @@
Description
Examples
Audio description in one language
-
A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
+
A video element for a video in the English language. The audio descriptions are provided in the WebVTT format.
A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.
+
A video element for a video with both an English and French language source element, and with an English and a French audio description track using the WebVTT file format.
WebVTT: The Web Video Text Tracks Format
diff --git a/techniques/html/H97.html b/techniques/html/H97.html
index 50e4ba0322..4a97b8199f 100644
--- a/techniques/html/H97.html
+++ b/techniques/html/H97.html
@@ -5,7 +5,7 @@
-
Grouping related links using the nav element
+
Grouping related links using the nav element
ID: H97
Technology: html
@@ -17,14 +17,14 @@
When to Use
Description
-
The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-labelledby or aria-label attribute.
-
Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.
+
The objective of this technique is to group navigation links using the HTML nav element. The nav element is one of several sectioning elements in HTML. Use of this markup can make groups of links easier to locate and skip past by users of assistive technology such as screen readers. Using semantic structures allow custom style sheets to be used to change the presentation of groups of links while preserving their relationship. When the nav element is employed more than once on a page, distinguish the navigation groups by using an aria-labelledby or aria-label attribute.
+
Not all groups of links need to use the nav element for markup. For instance, links may be grouped in other structure such as lists or may use ARIA markup if they do not represent a discrete section of the page.
Examples
Navigation links enclosed in a nav element
-
This example uses a nav element to group navigation links in an accessibility curriculum.
+
This example uses a nav element to group navigation links in an accessibility curriculum.
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
+
Multiple nav elements and aria-labelledby
+
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page. For instance, if a nav element is used multiple times on a page, each instance may have a unique label specified using aria-labelledby:
The following example shows a best practice of how landmarks might be added to an HTML document in situations where there are two or more of the same type of landmark on the same page, and there is no existing text on the page that can be referenced as the label:
<nav aria-label="Site">
<ul>
@@ -77,7 +77,7 @@
Tests
Procedure
-
Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.
+
Check that links that are visually grouped and represent a section of the page are enclosed in a nav element.
The objective of this technique is to programmatically link a pre-defined and published taxonomic term to the input, so that the inputs can also be machine-interpreted. This way the input will always have a common, referable and identifiable value associated to it, no matter what language is used, or what visible on-screen term is used to label the input. Then it can be further customized or otherwise machine-manipulated to help users.
-
The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".
-
The autocomplete attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly "tagged" with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.
+
The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".
+
The autocomplete attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly "tagged" with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.
-
The autocomplete attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a user setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.
+
The autocomplete attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a user setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.
-
It's important to note the Success Criterion Identify Input Purpose and autocomplete attribute only place requirements on input fields collecting information about the user.
+
It's important to note the Success Criterion Identify Input Purpose and autocomplete attribute only place requirements on input fields collecting information about the user.
-
For the Success Criterion, it is assumed that the autocomplete attribute is not used on form fields that do not correspond to an autocomplete field described in the HTML autocomplete attribute specification. If the autocomplete field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results.
+
For the Success Criterion, it is assumed that the autocomplete attribute is not used on form fields that do not correspond to an autocomplete field described in the HTML autocomplete attribute specification. If the autocomplete field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results.
Security considerations
Organizations can be concerned about allowing input fields to be automatically filled-in. There is sometimes confusion about how browsers save information and the security implications.
-
For the autocomplete attribute:
+
For the autocomplete attribute:
This technique should only be used when asking for data about the user who is filling the form in, not for other people.
-
It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
-
Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
+
It only works if you are on the same computer, using the same user-account, and using the same browser. Any multi-login scenario does not save autocomplete data between different accounts. (Users can setup syncing of data across computers, but that is not the default.)
+
Saving information with autocomplete is opt-in by the user, usually at the point of saving data the first time.
The form is not auto-submitted, the user can see the data before it is submitted.
It is easy to wipe both history and form data in the browser settings.
It is easy to engage a privacy mode, such as private browsing.
-
Even withoutautocomplete set in the web page, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.
+
Even withoutautocomplete set in the web page, browsers can save data, and some plugins (such as password managers) will aggressively use heuristics to guess what fields are for and fill them in. Using the autocomplete attribute makes those guesses accurate.
-
The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.
+
The browser history provides far more detail about what people have done, and is just as available as autocomplete data. The solutions/mitigations for browser-history are similar to autocomplete.
The order of the page break locations in a digital publication is not sequential in all cases, and not all page breaks may be represented. Publishers often rearrange and remove content from the paginated source content when creating a digital version.
-
Page lists are a central feature of many digital publishing formats. EPUB 3 defines the page list in its navigation document while EPUB 2 and DAISY 3 use the pageList element in the NCX. The DPUB-ARIA module also includes a doc-pagelist role for identifying the navigation element containing the page list.
+
Page lists are a central feature of many digital publishing formats. EPUB 3 defines the page list in its navigation document while EPUB 2 and DAISY 3 use the pageList element in the NCX. The DPUB-ARIA module also includes a doc-pagelist role for identifying the navigation element containing the page list.
Other publications provide a means of page navigation through a 'go to' mechanism.
@@ -35,7 +35,7 @@
Description
Examples
Page list in HTML publications
-
To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
+
To add a page list to a web-based document, the role "doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.
+
EPUB 3 uses the epub:type attribute to identify the page list in the navigation document. The attribute is used on a nav element with the value "page-list" (note the different hyphenation). The ARIA role attribute has no effect unless the navigation document can be directly accessed by users (i.e., the document is in the EPUB spine). Like the previous HTML example, the contents of the nav element is a list of links to the page break locations.
The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.
+
The EPUB 2 and DAISY 3 formats both use an XML grammar called the NCX for expressing navigation aids. The page list is defined within the ncx element using the pageList tag. Each pageTarget within this element identifies a page break, providing both a label and a destination.
This sends a response with a 302 status code ("Found") and a Location header with the new URL to the user agent. It is also possible to set another status code with response.sendError(int code, String message) with one of the constants defined in the interface javax.servlet.http.HttpServletResponse as status code.
+
This sends a response with a 302 status code ("Found") and a Location header with the new URL to the user agent. It is also possible to set another status code with response.sendError(int code, String message) with one of the constants defined in the interface javax.servlet.http.HttpServletResponse as status code.
If an application uses HttpServletResponse.encodeURL(String
+
If an application uses HttpServletResponse.encodeURL(String
url) for URL rewriting because the application depends on
- sessions, the method HttpServletResponse.encodeRedirectURL(String url) should be used instead of
- HttpServletResponse.sendRedirect(String url). It is
- also possible to rewrite a URL with HttpServletResponse.encodeURL(String url) and then pass this URL to HttpServletResponse.sendRedirect(String url).
+ sessions, the method HttpServletResponse.encodeRedirectURL(String url) should be used instead of
+ HttpServletResponse.sendRedirect(String url). It is
+ also possible to rewrite a URL with HttpServletResponse.encodeURL(String url) and then pass this URL to HttpServletResponse.sendRedirect(String url).
ASP
-
In Active Server Page (ASP) with VBScript, developers can use Response.Redirect.
+
In Active Server Page (ASP) with VBScript, developers can use Response.Redirect.
Response.Redirect "newUserLogin.asp"
@@ -92,7 +92,7 @@
Procedure
Find each link or programmatic reference to another page or web page.
For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced web page contains code (e.g., meta element or script) that causes a client-side redirect.
-
For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced URI does not cause a redirect OR causes a server-side redirect without a time-out.
+
For each link or programmatic reference to a URI in the set of web pages being evaluated, check if the referenced URI does not cause a redirect OR causes a server-side redirect without a time-out.
The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI.
+
The objective of this technique is to ensure that users can always access an accessible version of the content when non-conforming versions are also available. Whenever content is provided in a format that does not conform to WCAG, the site as a whole can still conform if alternate versions of the inaccessible content are provided. Conformance Requirement 4 requires that alternate versions can be derived from the nonconforming content or from its URI.
Since it is not always possible to provide an accessible link from within non-conforming content, this technique describes how authors can use Apache's Module "mod_access" to ensure that non-conforming content can only be accessed from URIs that serve as alternate versions to the non-conforming content or from pages that include links to both the non-conforming version and the alternative version.
Examples
-
Using Apache's mod_redirect module to redirect requests
-
The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".
+
Using Apache's mod_redirect module to redirect requests
+
The following .htaccess file uses Apache's mod_redirect module to redirect requests for "inaccessible.html" to "accessible.html" unless the request comes from "accessible.html".
# If the request for inaccessible content comes from a file
# called accessible.html, then set an environment variable that
diff --git a/techniques/server-side-script/SVR5.html b/techniques/server-side-script/SVR5.html
index dbf2eba626..e188996569 100644
--- a/techniques/server-side-script/SVR5.html
+++ b/techniques/server-side-script/SVR5.html
@@ -18,14 +18,14 @@
When to Use
Description
The objective of this technique is to provide information on the primary language or languages in a web page, in order to identify the audience of the content. The Content-Language HTTP header can contain a list of one or more language codes, which can be used for language negotiation between a user agent and a server. If the language preferences in a user agent are set correctly, language negotiation can help the user to find a language version of the content that suits their preferences.
-
Note that the Content-Language HTTP header does not serve to identify the language used for processing the content. The content processing language can be identified by means of other techniques, such as the attributes lang and xml:lang in markup languages.
-
This technique ensures that the primary language of the document, as specified for example in the lang or xml:lang attribute, is listed in the Content-Language HTTP header.
+
Note that the Content-Language HTTP header does not serve to identify the language used for processing the content. The content processing language can be identified by means of other techniques, such as the attributes lang and xml:lang in markup languages.
+
This technique ensures that the primary language of the document, as specified for example in the lang or xml:lang attribute, is listed in the Content-Language HTTP header.
Examples
Setting content language in Java Servlet and JSP
-
In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English):
+
In Java Servlet or JavaServer Pages (JSP), developers can use response.setHeader("Content-Language", lang), in which "lang" stands for a language tag (for example, "en" for English):
The objective of this technique is to show how to access an alternate
- audio channel in a prepared media file that is played in a Silverlight MediaElement.
+ audio channel in a prepared media file that is played in a Silverlight MediaElement.
Silverlight supports media file formats that contains additional audio
channels in synchronization, beyond the two tracks for stereo audio
that are used by typical media player defaults. Silverlight provides
- a dedicated AudioStreamIndex API on MediaElement,
+ a dedicated AudioStreamIndex API on MediaElement,
so that the Silverlight application author can use Silverlight programming
techniques to select which audio channel to play for the user. Silverlight
control authors might label a UI control with text such as "Activate
@@ -48,7 +48,7 @@
Changing AudioStreamIndex
invokes a function that swaps the audio channels and plays an alternative
synchronized audio channel that contains a composite full-description audio track.
The following is the basic UI in XAML. This example is deliberately
- simple and does not include AutomationProperties.
+ simple and does not include AutomationProperties.
Audio streams are identified by an index in a collection.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
diff --git a/techniques/silverlight/SL10.html b/techniques/silverlight/SL10.html
index 16cc8df0c2..9536c355a3 100644
--- a/techniques/silverlight/SL10.html
+++ b/techniques/silverlight/SL10.html
@@ -15,7 +15,7 @@
to a data input scenario. The key to doing this in Silverlight is to
use a data binding mode that sets UpdateSourceTrigger of
all individual databound fields in that form or transaction. For any
- data binding where the UpdateSourceTrigger is Explicit,
+ data binding where the UpdateSourceTrigger is Explicit,
no real-time change is made to the data, until the UpdateSource method
is called on each of these bindings. The application-specific Submit
button is connected to an event handler that calls UpdateSource on
@@ -24,7 +24,7 @@
Validation of data
The Submit button itself can also be the UI element that provides
warnings, instructions, etc. in a way that assistive technologies can
- report to users, through the AutomationProperties techniques.
+ report to users, through the AutomationProperties techniques.
Using a Submit model for Silverlight form input to databound data sources
relies on a particular data binding mode. The Submit model can be used
either along with client-side or server-side validation techniques.
diff --git a/techniques/silverlight/SL11.html b/techniques/silverlight/SL11.html
index 640439c65b..64522c1f1a 100644
--- a/techniques/silverlight/SL11.html
+++ b/techniques/silverlight/SL11.html
@@ -8,7 +8,7 @@
for a Silverlight animation with a user interface control. This enables
a user to pause or stop an animation in Silverlight content.
The Silverlight animation system is generalized such that nearly any
- Silverlight property of type Double, Point or Color can
+ Silverlight property of type Double, Point or Color can
be animated, or a property can cycle through discrete object values.
Thus the possibilities for which properties in the user interface can
be animated are quite broad. The general technique shown can be used
diff --git a/techniques/silverlight/SL12.html b/techniques/silverlight/SL12.html
index 2fa921e4be..06c728cd29 100644
--- a/techniques/silverlight/SL12.html
+++ b/techniques/silverlight/SL12.html
@@ -5,11 +5,11 @@
Description
The objective of this technique is to create a control user interface
- for the Silverlight MediaElement object. The controls
+ for the Silverlight MediaElement object. The controls
enable users to pause or stop the video to prevent the video images
- on the MediaElement surface from moving, and stop
+ on the MediaElement surface from moving, and stop
video-associated audio. These UI controls enable an interaction defined
- in code event handlers. Each handler calls one of the following MediaElement methods:
+ in code event handlers. Each handler calls one of the following MediaElement methods:
Note that by default, a MediaElement will start playing
+
Note that by default, a MediaElement will start playing
its media as soon as the UI loads completely AND the media source file
is downloaded (or a certain buffer size is reached, in the case of
- streaming media). Use the AutoPlay property to change
+ streaming media). Use the AutoPlay property to change
this default.
Examples
@@ -108,7 +108,7 @@
Providing MediaElement controls in the UI
Using a browser that supports Silverlight, open an HTML page that
references a Silverlight application through an object tag. The application
- is expected to incorporate a MediaElement in the
+ is expected to incorporate a MediaElement in the
user interface.
Check that interactive controls are available so that users can
pause or stop the media.
@@ -135,7 +135,7 @@
Providing MediaElement controls in the UI
Silverlight
Media Framework - a framework and a media player control implementation
- that incorporates many of the Silverlight techniques related to MediaElement
+ that incorporates many of the Silverlight techniques related to MediaElement
- SystemParameters.HighContrast is an adequate trigger
+ SystemParameters.HighContrast is an adequate trigger
for cases where high contrast is already engaged before the Silverlight
- plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as
+ plugin is loaded into a host. However, a limitation of using SystemParameters.HighContrast as
a trigger mechanism is that Silverlight does not detect the change
if it happens after the Silverlight plugin is loaded by the host HTML.
If Silverlight authors want to support real-time changes, they should provide a user-initiated
control option for changing to high contrast in Silverlight UI rather
- than solely relying on SystemParameters.HighContrast.
+ than solely relying on SystemParameters.HighContrast.
Informing users of which keys to use for keyboard equivalence
If a control supports user interaction, which key to use to engage
the keyboard equivalent behavior is not always obvious. One way to
inform users of the possible key options that a control supports is
- to author an AutomationProperties.HelpText value in
+ to author an AutomationProperties.HelpText value in
the application UI that gives instructions such as "Press the
plus key to increment value". This is up to the application author
to do; the control definitions do not provide a means to set HelpText
@@ -103,7 +103,7 @@
KeyNumericUpDown Control That Handles Arrow Key Equivalence
helper functions (Increment() and Decrement()).
Handling the + and - keys as alternate or additional keyboard equivalents
for the actions is also possible (if that is desired, handler would
- check for Key.Add or Key.Subtract values).
+ check for Key.Add or Key.Subtract values).
The following is the XAML-defined control template for this control.
<Style TargetType="local:KeysNumericUpDown">
<Setter Property="BorderThickness" Value="1"/>
diff --git a/techniques/silverlight/SL15.html b/techniques/silverlight/SL15.html
index 1654a01c49..a11fa4d09f 100644
--- a/techniques/silverlight/SL15.html
+++ b/techniques/silverlight/SL15.html
@@ -39,7 +39,7 @@
This is shown in the examples.
If an application does handle keys at top level, care should be taken
to not interfere with specific text entry control behavior, such as
- typing into a TextBox. To avoid interactions, the
+ typing into a TextBox. To avoid interactions, the
design of key equivalence at the top level of an application typically
relies on combinations with key modifiers. The Control/CTRL key is
a key that is often used for this purpose. Application authors should
@@ -54,11 +54,11 @@
a variety of techniques for documenting user interface actions that
are not described here. One possible suggestion is to include a generalized "Help" button
that appears early in the application's reading order, which is focusable
- and has an AutomationProperties.Name value available as the text content
+ and has an AutomationProperties.Name value available as the text content
or equivalent. Such a button can be activated without knowing any of
the application's accelerator keys, and the activation result could
be a new text element that enumerates the possible keys. For example,
- the application could display a Silverlight Popup with
+ the application could display a Silverlight Popup with
the following content:
@@ -73,11 +73,11 @@
Key handling by application root UserControl
This example has only one interactive control for simplicity, but
with two possible key combinations for that control being handled as
actions. The purpose and explanation of the control is reported through
- a TextBlock that is associated with the labeled control
+ a TextBlock that is associated with the labeled control
through use of AutomationProperties.LabeledBy in
- XAML. The control being illustrated is MultiScaleImage,
+ XAML. The control being illustrated is MultiScaleImage,
which supports a zoom-in metaphor for examining an image that redraws
- at increasingly fine resolutions. For more information on MultiScaleImage,
+ at increasingly fine resolutions. For more information on MultiScaleImage,
see Deep
Zoom on MSDN.
The following is the startup logic at application level that sends
diff --git a/techniques/silverlight/SL16.html b/techniques/silverlight/SL16.html
index a337fa9f43..ae696db85d 100644
--- a/techniques/silverlight/SL16.html
+++ b/techniques/silverlight/SL16.html
@@ -5,30 +5,30 @@
Description
The objective of this technique is to use text captioning that is
- embedded in the stream with media displayed in a Silverlight MediaElement,
+ embedded in the stream with media displayed in a Silverlight MediaElement,
and present that text captioning in a separate Silverlight control
or text element.
-
This particular technique uses scripting files with a TimelineMarkers collection
+
This particular technique uses scripting files with a TimelineMarkers collection
that are embedded directly within the media file. When text captioning
is embedded directly in the streams, synchronization of the scripting
- stream versus the video content stream is done automatically by the MediaElement component.
+ stream versus the video content stream is done automatically by the MediaElement component.
Each time the MarkerReached event fires, that is an
indication that a synch point in the video that corresponds to a script
marker entry has been reached. Silverlight application authors can
obtain the text from the relevant timeline marker entry through their
event handler implementations, and can display captions in the user
interface area where the text captions are displayed. Typical Silverlight
- controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox,
- or RichTextBox. A typical interface design would place
- the caption-display control in close proximity to the MediaElement control
+ controls that can be used for displaying text captions include TextBlock (nonfocusable), TextBox,
+ or RichTextBox. A typical interface design would place
+ the caption-display control in close proximity to the MediaElement control
that is being captioned, for example might place the captions directly
- underneath the MediaElement "screen".
+ underneath the MediaElement "screen".
Script-embedded captions are captions that are stored directly in
the media file as metadata, rather than as a separate file. For information
about techniques for captions in separate files, see .
Tools
-
Producing the media file with TimelineMarkers captions
+
Producing the media file with TimelineMarkers captions
directly in embedded scripting can be accomplished using the Microsoft
Expression Encoder tool. Online help for the procedure of encoding
scripting with text captions in the stream are available in the offline
@@ -38,10 +38,10 @@
Tools
There is a public
API for introducing Markers into a WMV file, as part of the Windows
Media Format SDK. Using Expression Encoder is the way that the task
- of directly embedding TimelineMarkers is presented
+ of directly embedding TimelineMarkers is presented
and taught in Microsoft's available instructional material on Silverlight.
However, because the mechanism is public, it is possible that other
- tools exist or will exist that can also produce media with script-encoded TimelineMarkers.
+ tools exist or will exist that can also produce media with script-encoded TimelineMarkers.
Examples
@@ -50,12 +50,12 @@
MediaElement handles MarkerReached, displays marker text
This example has a UI definition in XAML and interaction logic in
C#. The following is the basic UI in XAML. This example is deliberately
- simple and does not include AutomationProperties for
+ simple and does not include AutomationProperties for
identification or user instructions. The most relevant part of this
example is that the Silverlight author declares a handler for the event MarkerReached.
This event fires potentially hundreds of times, once for each caption
in the stream. Each time the event fires, the event handler runs and
- adds the text to the dedicated TextBox in the user
+ adds the text to the dedicated TextBox in the user
interface.
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to replace a Silverlight MediaElement with
+
The objective of this technique is to replace a Silverlight MediaElement with
static alternative non-media content that is not time-based. The static
alternative content replaces the media in the same or a nearby user
interface region of the Silverlight application.
@@ -31,7 +31,7 @@
MediaElement playing audio, replace with transcript
-
This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement
+
This example has a UI definition in XAML and interaction logic in C#. In this case the MediaElement
has no visual representation itself and is 0x0 size because it plays audio only. As a simple placeholder, this
example displays the text "Library of Congress Audio" to represent the media element as something visible in the
UI. In addition to Play/Stop controls, this interface includes a Display Transcript button. Activating the
diff --git a/techniques/silverlight/SL18.html b/techniques/silverlight/SL18.html
index f7b6b38019..e472cbe807 100644
--- a/techniques/silverlight/SL18.html
+++ b/techniques/silverlight/SL18.html
@@ -4,13 +4,13 @@
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to use the Silverlight AutomationProperties.Name property
+
The objective of this technique is to use the Silverlight AutomationProperties.Name property
to provide a short text alternative for controls that do not otherwise
contain text. The text is intended to provide human-readable identifiers
and short-descriptions or user instructions for accessibility frameworks,
which can then be reported to assistive technologies.
"Control" in this technique refers to any element that is
- based on the Silverlight Control class, and is keyboard-focusable
+ based on the Silverlight Control class, and is keyboard-focusable
either by user action or calling focus to the control programmatically.
The non-text control in question might be something like a button that
communicates information using only an icon or image. For example,
@@ -26,12 +26,12 @@
For cases of controls such as buttons that invoke actions, the text
alternative also identifies link purpose.
In Silverlight, a text-only identifier for any control can be set
- specifically as AutomationProperties.Name on the parent
+ specifically as AutomationProperties.Name on the parent
control. Silverlight control compositing techniques enable either per-control
images that are specified by the application author, or a general-purpose
image/icon for a control that is part of the control's template and
- displays that way by default. The Silverlight API AutomationProperties.Name directly
- sets Name in the UI Automation tree. The properties
+ displays that way by default. The Silverlight API AutomationProperties.Name directly
+ sets Name in the UI Automation tree. The properties
in the UI Automation tree are reported to assistive technologies, when
the assistive technology implements behavior that acts as a UI Automation
client (or as an MSAA client, which relies on the UIA-MSAA bridge).
@@ -40,11 +40,11 @@
Applying a text alternative for an icon Button with
XAML
-
Application authors can specify the AutomationProperties.Name attribute
- on the Button element, and leave accessibility information
- for the composited Image content unspecified. It is
- the button and its action that is relevant to users, not the non-interactive Image component.
- The value provided for AutomationProperties.Name is
+
Application authors can specify the AutomationProperties.Name attribute
+ on the Button element, and leave accessibility information
+ for the composited Image content unspecified. It is
+ the button and its action that is relevant to users, not the non-interactive Image component.
+ The value provided for AutomationProperties.Name is
a meaningful text alternative for the action conveyed by the button's
icon/image, but where the functionality is conceptually embodied in
the button and not its images or other constituent parts in compositing
@@ -83,7 +83,7 @@
Screen Reader
references a Silverlight application through an object tag.
Engage the screen reader. Press TAB to traverse the tab sequence
inside the Silverlight content area to focus to a composite control
- that has no visible text, but has an AutomationProperties.Name applied.
+ that has no visible text, but has an AutomationProperties.Name applied.
Check that the "Name" as applied to the control instance,
along with the class name of the named control, is read by the screen
reader.
diff --git a/techniques/silverlight/SL19.html b/techniques/silverlight/SL19.html
index 1b2c023633..abae0174a1 100644
--- a/techniques/silverlight/SL19.html
+++ b/techniques/silverlight/SL19.html
@@ -11,26 +11,26 @@
original non-text content when a short text alternative is not sufficient,
and to show the practice of storing that information in a dedicated
property of the Silverlight-supported UI Automation support system.
- The technique can also be used on text controls (such as TextBox),
+ The technique can also be used on text controls (such as TextBox),
for cases where the control text itself does not provide enough context
to suggest an appropriate user action.
-
The relevant UI Automation property is named HelpText,
+
The relevant UI Automation property is named HelpText,
to connote its possible usage to provide imperative instructions for
interactive elements. However, the same property can instead be used
- for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly
- sets HelpText in the UI Automation tree. The properties
+ for long text alternatives for nontext objects. The Silverlight API AutomationProperties.HelpText directly
+ sets HelpText in the UI Automation tree. The properties
in the UI Automation tree are reported to assistive technologies, when
the assistive technology implements behavior that acts as a UI Automation
client.
- AutomationProperties.HelpText can be set in code,
+ AutomationProperties.HelpText can be set in code,
but is most typically set as an attribute in XAML that defines a Silverlight
UI.
-
The same information as is present in AutomationProperties.HelpText could
+
The same information as is present in AutomationProperties.HelpText could
also be useful to sighted users. In this case, the same text could
be displayed in a Silverlight ToolTip control.
- The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
- conjunction is because the Tooltip information is
+ The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
+ conjunction is because the Tooltip information is
not introduced into the runtime accessibility framework information
set. This is because a tooltip is transient and not conventionally
focusable. In Silverlight programming, a useful technique for sharing
@@ -44,11 +44,11 @@
Applying a long text alternative for an Image with XAML
To introduce the necessary information to Silverlight XAML for an
- application UI definition, specify the AutomationProperties.HelpText attribute
- on the Image element. The value provided for the attribute
+ application UI definition, specify the AutomationProperties.HelpText attribute
+ on the Image element. The value provided for the attribute
is a meaningful long text alternative for the image content. The value
- of AutomationProperties.HelpText should augment rather
- than duplicate AutomationProperties.Name, which is
+ of AutomationProperties.HelpText should augment rather
+ than duplicate AutomationProperties.Name, which is
also typically specified to provide accessibility support for an image.
<Image
Height="400" Width="600"
@@ -63,7 +63,7 @@
Applying a long text alternative for an Image with XAML
Using HelpText as form instructions
-
This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText.
+
This example provides instructions for two form fields by using both Tooltip and AutomationProperties.HelpText.
The strings used for these purposes are shared to both methodologies
by defining the strings as resources and binding to them. In this example,
the form submission does not perform client-side validation (although
@@ -148,8 +148,8 @@
Using HelpText as form instructions
tree, and an object’s long text alternative as part of the tree.
(For example, use UIAVerify or Silverlight Spy; see Resources links.)
Focus an element that is known to have a long text alternative.
- Check that the AutomationProperties.HelpText as applied to
- individual UI elements appears as the HelpText or acc_Help value
+ Check that the AutomationProperties.HelpText as applied to
+ individual UI elements appears as the HelpText or acc_Help value
in the automation tree.
diff --git a/techniques/silverlight/SL2.html b/techniques/silverlight/SL2.html
index f28c193866..84d10b880d 100644
--- a/techniques/silverlight/SL2.html
+++ b/techniques/silverlight/SL2.html
@@ -23,7 +23,7 @@
is largely written in XAML. The logic is largely written in code (for
example C#) and is left unaffected when a Silverlight application author
provides a new control template "skin". The hooks that connect
- the appearance and the logic are a Style property of the control (which
+ the appearance and the logic are a Style property of the control (which
the author changes the value of, to refer to their new XAML resource)
and a contract of expected named entities in the XAML. The control
logic invokes the names of the entities/parts whenever control state
@@ -50,7 +50,7 @@
Focus in Silverlight
application concept of keyboard focus. The element that has focus is
the element within the Silverlight object tree and programming model
that has first chance to process the Silverlight key events. As a more
- tangible example that is user-centric, if a TextBox has
+ tangible example that is user-centric, if a TextBox has
keyboard focus, then when the user presses keys on the keyboard, the
characters associated with the user's pressed keys will appear in the
TextBox. A user interface element in Silverlight can obtain keyboard
diff --git a/techniques/silverlight/SL20.html b/techniques/silverlight/SL20.html
index bf2ca1b292..22d8131c4f 100644
--- a/techniques/silverlight/SL20.html
+++ b/techniques/silverlight/SL20.html
@@ -6,10 +6,10 @@
Description
The objective of this technique is to illustrate how in certain cases,
the Silverlight automation peer system can provide an accessibility
- framework Name based on any simple text strings that
+ framework Name based on any simple text strings that
are also presented in the visible user interface as control content.
The applicability of this technique to SC 1.3.1 is that once promoted,
- the Name becomes the primary information item that
+ the Name becomes the primary information item that
describes the user interface element to accessibility frameworks and
assistive technologies, and the information is thus immune to any further
applications of the Silverlight style system that might change the
@@ -19,28 +19,28 @@
peer promotion behavior provides the Name component of Name, Role,
Value. This is related to the description of the term label in
SC4.1.2.
-
A default behavior for generating Name for accessibility
+
A default behavior for generating Name for accessibility
frameworks is possible for certain peers of content controls. The content
controls that might support a default automation peer behavior include:
- TextBlock
+ TextBlock
- ButtonBase derived classes that do not change
- the GetNameCore implementation. This includes the Button class.
- In order for the default promotion to work, the Content of
- the button must be set as a plain string or must contain only a TextBlock;
- any compositing such as wrapping in a Border or
+ ButtonBase derived classes that do not change
+ the GetNameCore implementation. This includes the Button class.
+ In order for the default promotion to work, the Content of
+ the button must be set as a plain string or must contain only a TextBlock;
+ any compositing such as wrapping in a Border or
other container will disable the default promotion.
-
Any other ContentControl derived class where
- the Content property contains either TextBlock or
- a text-content-only ButtonBase implementation as
+
Any other ContentControl derived class where
+ the Content property contains either TextBlock or
+ a text-content-only ButtonBase implementation as
sole content.
-
In these cases the string that sets either Content (for ContentControl and ButtonBase)
- or Text (for TextBlock) is promoted
- as the AutomationProperties.Name for the control in
+
In these cases the string that sets either Content (for ContentControl and ButtonBase)
+ or Text (for TextBlock) is promoted
+ as the AutomationProperties.Name for the control in
UI Automation, without any further attribution. The properties in the
UI Automation tree are reported to accessibility frameworks (UI Automation,
and MSAA through the bridge). The accessibility frameworks reports
@@ -56,7 +56,7 @@
For cases where there is control compositing in a control rather than
simple text, the automation peer typically cannot provide a default
simple string, and it may be the application author's responsibility
- to set AutomationProperties.Name explicitly as an
+ to set AutomationProperties.Name explicitly as an
attribute in XAML, or as a property in runtime code. For details, see .
Test-based methodology
@@ -95,7 +95,7 @@
Button is composed with direct text content only
torpedoes!" is being peer-forwarded. This is verified by the
Properties view on the right side: the Name property value is "Fire
Photon Torpedoes", even though no programmatic Name property
- or AutomationProperties.Name has been applied to
+ or AutomationProperties.Name has been applied to
that button that would otherwise have supplied an accessibility
framework "Name".
diff --git a/techniques/silverlight/SL21.html b/techniques/silverlight/SL21.html
index c68ac203ab..758d4d408b 100644
--- a/techniques/silverlight/SL21.html
+++ b/techniques/silverlight/SL21.html
@@ -12,7 +12,7 @@
The animated version of information in the user interface element can
instead be swapped out for an equivalent static element.
The Silverlight animation system is generalized such that nearly any
- Silverlight property of type Double, Point or Color can
+ Silverlight property of type Double, Point or Color can
be animated, or a property can cycle through discrete object values.
Thus the possibilities for which properties in the user interface can
be animated are quite broad. The general technique shown can be used
@@ -62,10 +62,10 @@
Stopping an animation that is scrolling text, replacing the animation with a
</UserControl>
The following is the C# logic. In this example, the animation starts
- automatically. When the user activates the control (the Button),
+ automatically. When the user activates the control (the Button),
the event handler stops the animation, removes the animated element
from the visual tree, and replaces it with a fixed text element that
- presents all text at once. Because it is a TextBox,
+ presents all text at once. Because it is a TextBox,
assistive technologies could identify the newly introduced text element
and present it, for example read the text in a screen reader.
public MainPage()
diff --git a/techniques/silverlight/SL22.html b/techniques/silverlight/SL22.html
index 0323d460af..66821874bb 100644
--- a/techniques/silverlight/SL22.html
+++ b/techniques/silverlight/SL22.html
@@ -26,7 +26,7 @@
Legacy behavior in Silverlight version 2
version 3. Older documents on the web might describe techniques that
were relevant for Silverlight version 2, where dealing with browser
zoom required JavaScript handling of the Resized event,
- and developers manually applied a ScaleTransform to Silverlight
+ and developers manually applied a ScaleTransform to Silverlight
content to scale it up. Silverlight has a "quirks mode" that
detects existing handlers that might still use the older techniques.
Built-in zoom not active in these cases, so that applications can avoid
diff --git a/techniques/silverlight/SL23.html b/techniques/silverlight/SL23.html
index 5bb695a42d..350b6fb7ac 100644
--- a/techniques/silverlight/SL23.html
+++ b/techniques/silverlight/SL23.html
@@ -11,12 +11,12 @@
to change the font size of text elements. This technique could be used
only for specific elements, or could also be applied to the entire
Silverlight content area and all text elements therein (including elements
- such as TextBlock that are technically not controls).
+ such as TextBlock that are technically not controls).
Examples are provided for these two cases.
-
The property to style or otherwise change is the FontSize property.
+
The property to style or otherwise change is the FontSize property.
Primarily, this is done using the API Control.FontSize,
but developers can also use similar properties on other objects that do not
- derive from Control (examples: TextBlock; DataGridTextColumn).
Silverlight uses a style system whereby many properties that affect
UI appearance can be referred to and changed through a style resource.
The style resource overrides the default code implementation and the
@@ -53,7 +53,7 @@
Using this technique versus relying on browser zoom
Sizing by percent
-
Generally, sizing Silverlight FontSize values by
+
Generally, sizing Silverlight FontSize values by
percentages is not recommended. Sizing by percentage produces non-integer
font size values, which in turn produce aliasing artifacts. The Silverlight
rendering routines for text work best when dealing with integer numbers.
@@ -143,9 +143,9 @@
Style applied to all text elements within a RichTextBox
Font size increase applied to all text content by applying
at UserControl level, and by percent increase logic
-
This example uses the inheritance characteristics of the FontSize
+
This example uses the inheritance characteristics of the FontSize
property that is available to all Silverlight controls. Rather than
- using a style, this example uses a HoldEnd animation, to take advantage
+ using a style, this example uses a HoldEnd animation, to take advantage
of the "By" behavior of the animation system that can increment
an existing value by 2 (pixels) rather than replacing the value with
a fixed pixel value.
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to use the AutoPlay property
- of MediaElement object, which prevents the MediaElement from
+
The objective of this technique is to use the AutoPlay property
+ of MediaElement object, which prevents the MediaElement from
playing its media source automatically.
-
By default the value of AutoPlay is true, which causes
- any media that is the Source of the MediaElement to
+
By default the value of AutoPlay is true, which causes
+ any media that is the Source of the MediaElement to
play as soon as either the entire source file is loaded (for nonstreaming
media) or an initial buffer is loaded (for streaming media). To prevent
- the possible accessibility issues, developers can instead specifically set AutoPlay to
+ the possible accessibility issues, developers can instead specifically set AutoPlay to
false, so that the user always controls whether the media plays. This
technique would thus be used in combination with providing user interface
- controls that go along with the MediaElement, and
+ controls that go along with the MediaElement, and
that enable the user to control the media. In particular, the user
interface controls enable the media to play, pause or stop, with event
wiring for those controls associated with the Play, Pause or Stop methods
- of the MediaElement object.
Setting AutoPlay to false, and providing the typical MediaElement controls i
Using a browser that supports Silverlight, open an HTML page that
references a Silverlight application through an object tag. The application
- is expected to use a MediaElement object to play
+ is expected to use a MediaElement object to play
prerecorded media.
Check that the media does not play automatically as soon as the
application loads and displays. Rather, the user is presented with
@@ -115,7 +115,7 @@
Setting AutoPlay to false, and providing the typical MediaElement controls i
Silverlight
Media Framework - a framework and a media player control implementation
- that incorporates many of the Silverlight techniques related to MediaElement
+ that incorporates many of the Silverlight techniques related to MediaElement
diff --git a/techniques/silverlight/SL25.html b/techniques/silverlight/SL25.html
index 899f22f378..036ff404eb 100644
--- a/techniques/silverlight/SL25.html
+++ b/techniques/silverlight/SL25.html
@@ -13,18 +13,18 @@
purpose is to skip content, so that the resulting programmatic focus
shift is not interpreted as an undesired change of context.
The object to call focus to (the receiver of focus after the user-initiated
- action is triggered) has to be a Control in the Silverlight
+ action is triggered) has to be a Control in the Silverlight
programming model. This is because the Focus method
must be called on the target, and therefore the target must inherit
- the Control class. So, an application author might
- call focus to a read-only TextBox, or perhaps a RichTextBox,
+ the Control class. So, an application author might
+ call focus to a read-only TextBox, or perhaps a RichTextBox,
depending on the purpose of the Silverlight application and its user
- interface design. You can also focus a UserControl,
+ interface design. You can also focus a UserControl,
for cases where the area to call focus to represents a custom control
implementation.
Setting TabIndex (not recommended)
-
Silverlight provides a TabIndex attribute that can
+
Silverlight provides a TabIndex attribute that can
be used to override the default-generated tab sequence. Do not attempt
to adjust tab index as a technique for getting past content blocks.
Doing so will create a focus order that does not match the apparent
diff --git a/techniques/silverlight/SL26.html b/techniques/silverlight/SL26.html
index 322bf1b139..819d69330a 100644
--- a/techniques/silverlight/SL26.html
+++ b/techniques/silverlight/SL26.html
@@ -4,16 +4,16 @@
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to use the AutomationProperties.LabeledBy property
+
The objective of this technique is to use the AutomationProperties.LabeledBy property
to associate a non-interactive text label with an interactive field
- such as a Silverlight TextBox or RichTextBox.
+ such as a Silverlight TextBox or RichTextBox.
By using this technique, application authors can use the label text
- as the default source for AutomationProperties.Name on
- the target, and do not need to specify an explicit AutomationProperties.Name.
-
This technique relies on several Silverlight features: the Name property
- for identifying specific UI elements, the AutomationProperties API,
- and the ElementName variation of Silverlight data binding. AutomationProperties.Name can
- be set on and can target any Silverlight UIElement.
+ as the default source for AutomationProperties.Name on
+ the target, and do not need to specify an explicit AutomationProperties.Name.
+
This technique relies on several Silverlight features: the Name property
+ for identifying specific UI elements, the AutomationProperties API,
+ and the ElementName variation of Silverlight data binding. AutomationProperties.Name can
+ be set on and can target any Silverlight UIElement.
The two most common uses of this labeling technique are for labeling
a form field, and for associating an image caption with an image.
Examples
@@ -62,10 +62,10 @@
Labeling / captioning an image
Use a verification tool that is capable of showing the full automation
tree. (For example, use UIAVerify or Silverlight Spy; see Resources
links.)
-
Verify that any element that has a LabeledBy value
+
Verify that any element that has a LabeledBy value
has an associated visible label.
-
Verify that any element that has a LabeledBy value
- uses the Name value from that label.
+
Verify that any element that has a LabeledBy value
+ uses the Name value from that label.
The objective of this technique is to use the combination of HTML
- Lang attribute, CultureInfo and Language to
+ Lang attribute, CultureInfo and Language to
correctly specify the language of the entirety of Silverlight content,
or of parts within the Silverlight content.
In general, Silverlight does not attempt to repurpose HTML Lang, because
Silverlight is not HTML. Instead, internally within the Silverlight
content area, Silverlight uses language definition concepts that relate
- to XML (Language is a remapping of xml:lang) or .NET
- Framework programming (CultureInfo). For these reasons,
+ to XML (Language is a remapping of xml:lang) or .NET
+ Framework programming (CultureInfo). For these reasons,
HTML Lang techniques as described in [H58]
are not useful for Silverlight programming of Silverlight-specific "parts".
What becomes important in Silverlight application programming then
@@ -62,7 +62,7 @@
HTML Lang
When Silverlight is embedded in an HTML document with the <object> element,
- the value of the HTML Lang attribute of the surrounding HTML becomes
+ the value of the HTML Lang attribute of the surrounding HTML becomes
a factor. Browsers process the outer HTML, and the browser's processing
has possible influence over values reported to any DOM script that
acts, or to any accessibility framework that is reporting the browser
@@ -75,17 +75,17 @@
HTML Lang
content to match will assist authors in meeting SC 3.1.2.
The Silverlight runtime itself does not attempt to inherit language
settings that come from markup that is outside the Silverlight-specific
- content. In particular, the HTML Lang attribute applied to the html
+ content. In particular, the HTML Lang attribute applied to the html
tag, Lang on host object tag, specific parameters of the Silverlight
- object tag, all have no affect on the value of any Silverlight Language attribute.
- Instead, the Silverlight Language defaults to the CultureInfo of
+ object tag, all have no affect on the value of any Silverlight Language attribute.
+ Instead, the Silverlight Language defaults to the CultureInfo of
the Silverlight runtime as instantiated by HTML object tag invocation.
It is expected that if a Silverlight application contains extensive
text where language of text is a factor for assistive technology purposes,
- developers will manually set the HTML Lang tag to match the Language value
+ developers will manually set the HTML Lang tag to match the Language value
on the Silverlight root element in XAML. Development tools might or
might not enforce or inform the relationship between HTML Lang and
- Silverlight Language; that consideration is outside
+ Silverlight Language; that consideration is outside
the scope of Silverlight as a technology. If language is not a major
factor in the application, application authors should consider leaving
HTML Lang blank on the hosting HTML page.
@@ -97,32 +97,32 @@
HTML Lang
Silverlight Language property
- Language is an attribute that is available on all
+ Language is an attribute that is available on all
Silverlight objects that directly represent a UI element. Language
can be queried (or set) by Silverlight managed code run time, such
- that the Language value can be programatically determined
+ that the Language value can be programatically determined
within the Silverlight programming model.
-
The format of the value that is used to set Language is
+
- Language has a behavior that parallels the behavior
- of xml:lang in an XML document: if Language is set on
- a parent element, all child elements inherit that Language value.
- An actual xml:lang attribute in XAML is also valid for this purpose.
+ Language has a behavior that parallels the behavior
+ of xml:lang in an XML document: if Language is set on
+ a parent element, all child elements inherit that Language value.
+ An actual xml:lang attribute in XAML is also valid for this purpose.
- Language can be set at the root of a XAML document,
- so that the entire UI shares the same language setting. If Language is
- not explicitly set at the root by application markup, Language is
- inferred per running instance, based on processing the acting CultureInfo at
+ Language can be set at the root of a XAML document,
+ so that the entire UI shares the same language setting. If Language is
+ not explicitly set at the root by application markup, Language is
+ inferred per running instance, based on processing the acting CultureInfo at
run time.
-
However, another usage is for application authors to set Language on
- a specific child element, to override the root-level or client-environment-inferred Language value.
+
However, another usage is for application authors to set Language on
+ a specific child element, to override the root-level or client-environment-inferred Language value.
This enables consciously embedding a content part that is deliberately
in a different language than the remainder of the Silverlight content.
-
Exactly what happens when a Language is set on a
+
Exactly what happens when a Language is set on a
part is not always specified, and is largely a matter of implementation
detail of the individual Silverlight classes that might be a "part".
- However, as an informative generalization, the value of Language might
+ However, as an informative generalization, the value of Language might
affect considerations such as: how white space is processed (in particular
CR or LF); character sets for fonts; string formatting when using APIs
specifically on that part.
@@ -130,10 +130,10 @@
Silverlight Language property
CultureInfo
- CultureInfo is a concept that is relevant to .NET
+ CultureInfo is a concept that is relevant to .NET
Framework programming. This concept applies to Silverlight because
Silverlight uses a specific implementation of a CLR runtime that uses
- .NET Framework principles. CultureInfo potentially
+ .NET Framework principles. CultureInfo potentially
specifies both a language and a culture. This distinction becomes relevant
for advanced string formatting concepts that are provided in the .NET
Framework, such as decimal separators, dates, and currency. For example,
@@ -142,12 +142,12 @@
CultureInfo
the application was using string formatting for currency values with
the intention of displaying Pounds Sterling as currency unit in string
formatting.
-
Silverlight applications often run using an inferred CultureInfo based
+
Silverlight applications often run using an inferred CultureInfo based
on the operating system where the user agent browser host exists (in
other words, the culture of the client computer where the Silverlight
- application is run). This CultureInfo can be queried
+ application is run). This CultureInfo can be queried
by applications at run time; see CultureInfo.CurrentCulture.
- Application authors can deliberately constrain the set of CultureInfo cases
+ Application authors can deliberately constrain the set of CultureInfo cases
that a Silverlight application can be run under, in order to verify
that necessary string resources for that culture are available in that
application. This is done by setting <SupportedCultures> in the
@@ -169,18 +169,18 @@
- CultureInfo generally applies to the Silverlight
+ CultureInfo generally applies to the Silverlight
application as a whole. There are advanced techniques whereby worker
threads can be run as separate cultures, but that is not discussed
here and is not relevant because only the main UI thread has relevance
to web content accessibility. So, if an application author wants to
declare specific language settings for a part (component, region or
control) of the Silverlight application, a different Silverlight-specific
- property Language is used.
+ property Language is used.
Examples
These examples show Silverlight behaviors that are based on interpreting
- the Language property value, as a way of illustrating
+ the Language property value, as a way of illustrating
the programmatic determination of language values specifically in the
Silverlight application framework. To determine HTML Lang, application
authors should use the HTML DOM as enabled by browser host scripting,
diff --git a/techniques/silverlight/SL28.html b/techniques/silverlight/SL28.html
index fb4fdd625c..257cecf30a 100644
--- a/techniques/silverlight/SL28.html
+++ b/techniques/silverlight/SL28.html
@@ -6,20 +6,20 @@
Description
The objective of this technique is to use text captioning that comes
from a separate text file, synchronize the captions with the media
- in a Silverlight MediaElement, and display the captions
+ in a Silverlight MediaElement, and display the captions
in Silverlight.
There are two variations of the general theme of implementing Silverlight
media player controls to work with external timed text: using built-in
capabilities of the Microsoft Expression Encoder tool, and using parsing
code that consumes caption as a raw file format and converts that format
- into the Silverlight API's TimelineMarkers representation.
+ into the Silverlight API's TimelineMarkers representation.
This technique primarily addresses how to use the Expression Encoder
technique, along with media player templates that are also provided
by Expression Encoder or related Silverlight SDKs such as the Smooth
Streaming SDK.
-
At a pure architecture level, Silverlight uses the TimelineMarkers API
+
At a pure architecture level, Silverlight uses the TimelineMarkers API
to display caption text at synchronized times. The Expression Encoder
- and Expression Blend tools provide a front end to drive the TimelineMarkers API
+ and Expression Blend tools provide a front end to drive the TimelineMarkers API
for the supported formats. The intention of the architecture is so
that Silverlight as a run-time has a base architecture that could potentially
use any existing or future timed text format, but the tools for Silverlight
@@ -39,13 +39,13 @@
Parsing the format into general information items like timings,
text, format etc. that are either consumable directly in a Silverlight
API, or useful as intermediates
-
Using the timecode information to create TimelineMarker representations
+
Using the timecode information to create TimelineMarker representations
for each timed text entity
-
Associating the TimelineMarkers with media loaded
+
Associating the TimelineMarkers with media loaded
by the player
Finding a place to store the additional formatting that is conveyed,
including the text and any formatting
-
Handling events from TimelineMarkers in the media
+
Handling events from TimelineMarkers in the media
player, in such a way that text and formatting behavior can be retrieved
and presented in the Text part of the player UI
@@ -85,13 +85,13 @@
Text Captioning Formats
Rather than build the parsing logic for all these formats into the
Silverlight runtime, or choosing just one of these formats to support,
the Silverlight design for text captioning at the core level instead
- makes the TimelineMarkers property of a MediaElement writeable,
- independently of the value of Source. The format of
- each TimelineMarker in the collection is very simple:
+ makes the TimelineMarkers property of a MediaElement writeable,
+ independently of the value of Source. The format of
+ each TimelineMarker in the collection is very simple:
a time value expressed in the format, and the text value of the text
- for that synchronized caption. The time format for TimelineMarkers is
+ for that synchronized caption. The time format for TimelineMarkers is
documented as TimelineMarker
- reference on MSDN. Converting timed text formats to TimelineMarkers form
+ reference on MSDN. Converting timed text formats to TimelineMarkers form
as consumed by the Silverlight core can be done by following any of
the following application design patterns:
@@ -110,7 +110,7 @@
Text Captioning Formats
it is possible to adapt the code to support timed text formats that
are not directly supported in the Expression Encoder project UI.
Using a 3rd party media player implementation that also includes
- a codebase for processing timed text formats, producing TimelineMarkers,
+ a codebase for processing timed text formats, producing TimelineMarkers,
and displaying the captions in the player-specific UI.
Including a library that handles just the format parsing, and
using APIs of this library as part of the Silverlight application
@@ -191,8 +191,8 @@
Using Expression Encoder and Expression Blend to produce
The templates include a library that handles any parsing requirements
for the chosen timed text format, both at the level of getting the
- basic text and timing into the TimelineMarkers used
- by the run-time MediaElement, and for preserving
+ basic text and timing into the TimelineMarkers used
+ by the run-time MediaElement, and for preserving
a subset of format information that can reasonably be crossmapped
from the formatting paradigm of the source (typically HTML/CSS) into
the Silverlight text object model of the text element that displays
@@ -350,9 +350,9 @@
The following is the logic that is particular to obtaining the separate
caption file. Some of this logic is referenced in the preceding template-specific
- event handlers. This example uses the asynchronous WebClient technique
- to request the file result of the CaptionUri. Make
- sure to use AutoPlay=false or some other means to allow
+ event handlers. This example uses the asynchronous WebClient technique
+ to request the file result of the CaptionUri. Make
+ sure to use AutoPlay=false or some other means to allow
time for the caption file to download before attempting to play the
media file.
Code parses timed text; MediaElement handles MarkerReached,
to follow in the implementation is to obtain the necessary text and
timing information, and to pass it to a function that might resemble
the following code template. This code template takes the raw information,
- generates a new TimelineMarker, and adds it to the
- collection assigned to the active MediaElement as
+ generates a new TimelineMarker, and adds it to the
+ collection assigned to the active MediaElement as
identified by "player" in the application.
public void AddMediaMarker(string time, string type, string data)
{
diff --git a/techniques/silverlight/SL29.html b/techniques/silverlight/SL29.html
index 3ace748ce0..0cb7ae949e 100644
--- a/techniques/silverlight/SL29.html
+++ b/techniques/silverlight/SL29.html
@@ -18,8 +18,8 @@
is on a List, the focus goes to the next element after the List. To
focus the items of the list, the user would press the Arrow keys rather
than TAB. In the Silverlight programming model for controls, this tab
- sequence behavior is expressed by the TabNavigation property
- holding the value of Once. The Silverlight ListBox is
+ sequence behavior is expressed by the TabNavigation property
+ holding the value of Once. The Silverlight ListBox is
a control that reports itself as "List" role, and that has
a default TabNavigation.Once value.
Thus ListBox as
@@ -31,7 +31,7 @@
bypass blocks that are based on common user interface features such
as menus or toolbars. However, using toolbars in Silverlight is inherently
not as lightweight because the Silverlight core libraries themselves
- do not include a ready-made toolbar. Silverlight provides a ContextMenu as
+ do not include a ready-made toolbar. Silverlight provides a ContextMenu as
part of the Silverlight Toolkit extensions, but the behavior of this
particular menu does not easily address the bypass block scenario.
Silverlight includes all the infrastructure and necessary base classes
@@ -53,7 +53,7 @@
If application authors use a built-in control such as ListBox where
the accessibility framework reported role is not traditionally associated
- with a navigation role, it is a best practice to set AutomationProperties.Name such
+ with a navigation role, it is a best practice to set AutomationProperties.Name such
that the name informs the user of the purpose of the list control.
Otherwise, the role alone leaves this ambiguous. For example, an author
might name the list control "Navigation control".
@@ -67,7 +67,7 @@
false on the List control. The List itself still provides the intended
tab navigation behavior, and is still reported and identified to accessibility
frameworks and assistive technologies, even when the List container
- is not focusable. This is shown in Example 1, by setting IsTabStop as
+ is not focusable. This is shown in Example 1, by setting IsTabStop as
part of a Style.
When an accessibility framework presents a List, assistive technologies
are generally expected to continue to support use of the same key behavior
@@ -83,15 +83,15 @@
Customize the behavior and appearance of a ListBox to
construct a navigation control that can be bypassed
In this example, several properties that influence the items presentation
- behavior of the Silverlight core control ListBox are
+ behavior of the Silverlight core control ListBox are
adjusted to make it suitable for a navigation control. The behavior
of this control is that when the tab sequence reaches the control, "next" or
spatial navigation continues on to other controls, rather than through
the child controls of the list's items/options. This is enabled and
- properly reported because ListBox reports its accessibility
- framework role as "List", uses TabNavigation = Once as
- default (because it is the default, TabNavigation does not have to
- be set explicitly in the markup). ListBox has default
+ properly reported because ListBox reports its accessibility
+ framework role as "List", uses TabNavigation = Once as
+ default (because it is the default, TabNavigation does not have to
+ be set explicitly in the markup). ListBox has default
key handling for the arrow keys (to enable traversing the choices in
the menu by keyboard-only). The control could also be visually a menu
or perhaps other user interface control metaphors, depending on how
@@ -99,9 +99,9 @@
Customize the behavior and appearance of a ListBox to
the accessibility framework and any assistive technologies based on
that framework will treat the control as a "List". This example
is templated as a horizontally oriented toolbar-type control. The items
- in this example are Button controls, but could be
+ in this example are Button controls, but could be
templated to not appear quite as button-like, or could instead use
- another focusable control for the items such as a read-only TextBox.
+ another focusable control for the items such as a read-only TextBox.
The objective of this technique is to adjust the volume for media
that is played in Silverlight applications, as implemented through
- incorporating the Silverlight MediaElement object.
- By default, a MediaElement will start playing its
+ incorporating the Silverlight MediaElement object.
+ By default, a MediaElement will start playing its
media as soon as the UI loads completely AND the media source file
is downloaded. For details, see .
-
At any given time, a Silverlight MediaElement is associated
- with exactly one media source as specified by the Source property
+
At any given time, a Silverlight MediaElement is associated
+ with exactly one media source as specified by the Source property
URI value. That source might be audio-only, or audio-video. The Volume property
- of MediaElement affects the audio playback volume
+ of MediaElement affects the audio playback volume
of that particular source when it is playing. The Silverlight plug-in
does not have a user option that adjusts the volume of ALL Silverlight
applications as run within it, or a standardized user interface that
- is always present for all uses of MediaElement. Therefore
+ is always present for all uses of MediaElement. Therefore
it is the responsibility of Silverlight application authors to provide
an adequate set of user interface controls, including volume adjustment,
whenever the Silverlight application plays media that has an audio
@@ -28,24 +28,24 @@
Providing a volume control and a Mute control as part
of a set of user interface controls that go with a MediaElement
In addition to the Play Pause Stop controls, application authors can
- also provide a dedicated control that changes the Volume property
- of the MediaElement. The typical control for setting
- a discrete volume is Slider, because Slider is
- designed for input of discrete values from a range. Adjusting Volume with
- a data bound Slider changes the volume of any actively
+ also provide a dedicated control that changes the Volume property
+ of the MediaElement. The typical control for setting
+ a discrete volume is Slider, because Slider is
+ designed for input of discrete values from a range. Adjusting Volume with
+ a data bound Slider changes the volume of any actively
playing media, independent of the system volume or of any other audio
- source controlled by Silverlight. For Volume as set with the Slider,
- the Binding in XAML declares the interaction between
- the control and the MediaElement, without requiring
+ source controlled by Silverlight. For Volume as set with the Slider,
+ the Binding in XAML declares the interaction between
+ the control and the MediaElement, without requiring
an event handler. However, not all users will be able to interact quickly
- with a Slider, particularly if they are not using
+ with a Slider, particularly if they are not using
a mouse. To help these users, application authors should also include
- a "Mute" control. Rather than setting Volume to
- 0, application authors should instead set IsMuted to
- true. Note that Volume and IsMuted values
- are not directly related; if IsMuted is set to true,
- that does not set Volume to 0, nor does setting Volume to
- zero cause IsMuted to be set true.
+ a "Mute" control. Rather than setting Volume to
+ 0, application authors should instead set IsMuted to
+ true. Note that Volume and IsMuted values
+ are not directly related; if IsMuted is set to true,
+ that does not set Volume to 0, nor does setting Volume to
+ zero cause IsMuted to be set true.
Providing a volume control and a Mute control as part
Using a browser that supports Silverlight, open an HTML page that
references a Silverlight application through an object tag. It is
- expected that the application incorporates a MediaElement.
+ expected that the application incorporates a MediaElement.
Check that a control is available for controlling volume and that
the Volume control controls the volume of the playing media, independently
from system volume.
@@ -151,7 +151,7 @@
Providing a volume control and a Mute control as part
Silverlight
Media Framework - a framework and a media player control implementation
- that incorporates many of the Silverlight techniques related to MediaElement
+ that incorporates many of the Silverlight techniques related to MediaElement
diff --git a/techniques/silverlight/SL30.html b/techniques/silverlight/SL30.html
index b93209729c..8180f116d2 100644
--- a/techniques/silverlight/SL30.html
+++ b/techniques/silverlight/SL30.html
@@ -22,7 +22,7 @@
provide any text alternative for purposes other than the accessibility
framework. However, Silverlight authors should declare alternative
text on the control that is specifically consumed by accessibility
- frameworks, by setting AutomationProperties.Name as
+ frameworks, by setting AutomationProperties.Name as
an attribute in XAML. In most cases, this text can be the same as the
visible text in the control composition, per the definition of 'label'
in SC 4.1.2.
@@ -35,14 +35,14 @@
of an application-specific UI Automation tree, so that control composition
as an implementation detail does not interfere with the usage of controls
by Silverlight application authors. The primary source of accessibility-related
- information is the specific AutomationProperties.Name property
+ information is the specific AutomationProperties.Name property
as set on the parent control in the composition, which is set by the
application author rather than the control author.
The control author does specify the information that is reported to
accessibility frameworks as the "ClassName", which is often
used by assistive technologies for identification purposes and is appended
to any "Name" value. For example, if an application author
- includes a "Widget" control, and gives it an AutomationProperties.Name value
+ includes a "Widget" control, and gives it an AutomationProperties.Name value
of "Show Map", an assistive technology might identify the
element as "Show Map widget". The "Show Map" part
comes from the application author code, and the "widget" part
@@ -52,17 +52,17 @@
Button is composed with a StackPanel that contains nontext
and text content
-
In this example the TextBlock that goes with the
+
In this example the TextBlock that goes with the
graphic image conveys the text information for non-accessibility purposes.
- The Button has internal composition that combines
- text from a non-focusable TextBlock part and an image
+ The Button has internal composition that combines
+ text from a non-focusable TextBlock part and an image
part. Therefore the "Pause" Text is not promoted to serve
- as "Name" through built-in Button automation
+ as "Name" through built-in Button automation
peer logic. The Silverlight application author is responsible for explicitly
- setting AutomationProperties.Name on the Button so
+ setting AutomationProperties.Name on the Button so
that the text equivalent is available to the accessibility framework.
This example shows the XAML UI. The logic, which might be attached
- to Button with a Click handler, is
+ to Button with a Click handler, is
not shown.
Use a verification tool that is capable of showing the full automation
tree, and an object’s name text alternative as part of the tree.
(For example, use UIAVerify or Silverlight Spy; see Resources links.)
-
Check that the AutomationProperties.Name appears
- as the Name value for identification in the automation
+
Check that the AutomationProperties.Name appears
+ as the Name value for identification in the automation
tree, whenever a composite control that has both text and non-text
elements is encountered.
@@ -133,7 +133,7 @@
Screen reader
Engage the screen reader. With focus inside the Silverlight content
area, press TAB to focus to a composite control where both text and
non-text elements are present.
-
Check that the Name as applied to the control
+
Check that the Name as applied to the control
instance, along with the class name of the control, is read by the
screen reader.
diff --git a/techniques/silverlight/SL31.html b/techniques/silverlight/SL31.html
index fc608f88fd..ebdb865d3c 100644
--- a/techniques/silverlight/SL31.html
+++ b/techniques/silverlight/SL31.html
@@ -23,20 +23,20 @@
properties, it is possible to adjust presentation of font features
without changing the structural connotation of that control, or the
value of any control-specific property that contains plain-text. For
- example, the FontSize property can be set on a Paragraph (not
- a control) or on a Button (a control, and in this
+ example, the FontSize property can be set on a Paragraph (not
+ a control) or on a Button (a control, and in this
case the font size changes apply to any text displayed in the button
content area). Font properties are also inheriting properties, meaning
that if applying a font property value to a container in a relationship,
those font property values can apply to child elements in the relationship.
- For example, if a FontSize is applied to a RichTextBox,
- that FontSize value is used by default by all the Paragraph items
- displayed in the RichTextBox.
-
Similar to CSS, Silverlight font properties can be grouped as a Style.
- That Style can be applied to all instances of a text
- element type (for example to all cases of Paragraph)
+ For example, if a FontSize is applied to a RichTextBox,
+ that FontSize value is used by default by all the Paragraph items
+ displayed in the RichTextBox.
+
Similar to CSS, Silverlight font properties can be grouped as a Style.
+ That Style can be applied to all instances of a text
+ element type (for example to all cases of Paragraph)
or specifically referenced as a resource that is only used by certain
- instances of a text element type. Either way, the Style feature
+ instances of a text element type. Either way, the Style feature
enables the separation of presentation from semantics for text elements,
and enables workflows where content authors supply the semantic text
and design-oriented authors adjust the related Silverlight styles.
@@ -44,7 +44,7 @@
Customization on MSDN.
The following Silverlight font properties are useful to style text
and avoid the need for text in images. Links in this list refer to
- the Control class version of these properties.
+ the Control class version of these properties.
The FontFamily property
is used to display the code aspect in a monospace font family (specifically,
@@ -68,7 +68,7 @@
text content as is used for semantic text display in the UI. In other
words, exposing that text to assistive technologies that use UIA as
a framework does not require the Silverlight application author to
- resort to automation-specific override properties such as AutomationProperties.HelpText;
+ resort to automation-specific override properties such as AutomationProperties.HelpText;
the automation peers for text elements report all necessary text content
to automation as a built-in behavior of the text element controls.
For more information on UI Automation and text containers, see .
@@ -88,16 +88,16 @@
CSS versus Silverlight font properties
Glyphs
-
Silverlight API includes a related text presentation API Glyphs. Glyphs is
+
Silverlight API includes a related text presentation API Glyphs. Glyphs is
intended for specific decorative or niche language-support scenarios.
- The Glyphs API does not offer as much UIA exposure
+ The Glyphs API does not offer as much UIA exposure
or the ability to programmatically change typical font properties;
- the main scenarios for Glyphs are to package migrated
+ the main scenarios for Glyphs are to package migrated
text content from document formats, or for purely decorative text in
a font that is not commonly found on a user system and only the glyphs
- actually used in the Unicode string are subsetted into the Glyphs font
- payload. If addressing the WCAG criteria, authors should avoid using Glyphs API
- and instead use other text containers such as TextBox,
+ actually used in the Unicode string are subsetted into the Glyphs font
+ payload. If addressing the WCAG criteria, authors should avoid using Glyphs API
+ and instead use other text containers such as TextBox,
along with a font that is supplied in the application package or known
to exist on the end user system.
A RichTextBox within the Silverlight content area
+
A RichTextBox within the Silverlight content area
is reported to UI Automation and MSAA as a Document role.
-
A RichTextBox can either be set to be a read-only
+
A RichTextBox can either be set to be a read-only
control, or left as a read-write control. In the latter case, users
can insert a text cursor and make changes to the text. It is more common
- in Silverlight programming to set the RichTextBox to
- be read-only; in this scenario the reason for using RichTextBox is
- because TextBlock did not offer the range of text
- formatting options that are possible from a RichTextBox.
+ in Silverlight programming to set the RichTextBox to
+ be read-only; in this scenario the reason for using RichTextBox is
+ because TextBlock did not offer the range of text
+ formatting options that are possible from a RichTextBox.
In UIA, a document is generally expected to support the Text
- pattern for UI Automation. However, to read the text from a RichTextBox,
+ pattern for UI Automation. However, to read the text from a RichTextBox,
the assistive technology does not necessarily have to implement code
that handles the entirety of the information that the Text pattern
reports.
@@ -87,7 +87,7 @@
More about the Text pattern
The Text pattern provides APIs to iterate over the internal structure
of a document and return text ranges. Each such text range can be queried
for specific properties, and can return its plain text string value
- to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs.
+ to UI Automation. Ranges can also be programmatically adjusted by the TextPattern/TextRange APIs.
The following is a snippet of a Silverlight-specific UI Automation
tree utility to give a general idea of the APIs involved. Note that
these are not specifically Silverlight APIs; they are .NET Framework
@@ -127,43 +127,43 @@
More about the Text pattern
TextBlock
- TextBlock is reported as a Text role in UI Automation. TextBlock has
+ TextBlock is reported as a Text role in UI Automation. TextBlock has
several important characteristics:
-
A TextBlock is always read-only; only the application
+
A TextBlock is always read-only; only the application
author can declare the text, users cannot change it.
-
A TextBlock is not considered to be a true control
- in the Silverlight object model (it is not a class derived from Control).
+
A TextBlock is not considered to be a true control
+ in the Silverlight object model (it is not a class derived from Control).
The practical implications of this to accessibility scenarios is
- that a TextBlock is not in the default tab sequence,
+ that a TextBlock is not in the default tab sequence,
cannot be manually added to any tab sequence, and cannot be keyboard-focused
either programatically or by the user.
- TextBlock has a deliberately limited range of
+ TextBlock has a deliberately limited range of
block / span formatting options. If the application author desires
a wider range of formatting options, for example supporting a "Paragraph" metaphor
- for blocks of text, a read-only RichTextBox should
+ for blocks of text, a read-only RichTextBox should
be used instead.
If the user relies solely on navigating a Silverlight application
- using the TAB sequence, such navigation will skip over any TextBlock in
+ using the TAB sequence, such navigation will skip over any TextBlock in
the interface. This could have implications for how users who use screen
readers can interact with the Silverlight content. Screen readers typically
read text only from the currently focused element in cases where the
user is moving through the TAB sequence or changing focus within the
- application, and thus cannot read the text from a TextBlock in
+ application, and thus cannot read the text from a TextBlock in
such a mode. However, most screen readers also have modes for reading
text that is not necessarily focusable. These are generally the same
modes that screen readers use for a conventional non-interactive HTML
document text. For example, some screen readers support a mode that
- reads text by line, or by word. These modes can read text from a TextBlock.
+ reads text by line, or by word. These modes can read text from a TextBlock.
Examples
Structure from a container that has non-semantic role
in UI Automation, and TextBlock for text
-
If viewed as a UI Automation tree, the StackPanel and Grid do
+
If viewed as a UI Automation tree, the StackPanel and Grid do
not exist explicitly in the tree view, because they do not serve a
semantic role (only a presentation role). Rather, the tree consists
of the items that report some kind of semantic control type. The semantic
@@ -172,10 +172,10 @@
Structure from a container that has non-semantic role
upwards in the tree, and despite the containers themselves being abstracted
out of the tree. This defines the reading order. This example is a
large block of text with intentionally simple formatting, where the
- only formatting is to represent paragraphs as separate TextBlock elements
- to support an adaptive layout, but no Run blocks within.
+ only formatting is to represent paragraphs as separate TextBlock elements
+ to support an adaptive layout, but no Run blocks within.
When viewed with assistive technologies that represent the contents,
- each TextBlock is a control type of Text. Screen readers
+ each TextBlock is a control type of Text. Screen readers
can use document reading modes such as virtual cursor modes to read
the content from each element and each element's content, following
the same reading order as is declared in the XAML. For example, in
@@ -249,9 +249,9 @@
Text containers and their UIA representation
Use a verification tool that is capable of showing the full automation
tree. (For example, use UIAVerify or Silverlight Spy; see Resources
links.)
-
Verify that TextBox elements in the Silverlight
- user interface have the Edit role, that RichTextBox elements
- have the Document role, and TextBlock has Text role
+
Verify that TextBox elements in the Silverlight
+ user interface have the Edit role, that RichTextBox elements
+ have the Document role, and TextBlock has Text role
in UI Automation.
Verify that the text content can be programmatically determined
by techniques that are appropriate for that role.
Some XAML language features that are analogous to XML but have some
technology-specific differences include:
-
Identifiers: XAML defines a Name directive, which
- is analogous to xml:id in that Name serves
+
Identifiers: XAML defines a Name directive, which
+ is analogous to xml:id in that Name serves
as the unique identifier of an element. However, XAML defines an
additional concept of a XAML namescope, which permits a XAML document
to contain multiple XAML namescopes as a factoring technique. Thus,
- identical Name values are permitted in a XAML document
+ identical Name values are permitted in a XAML document
so long as each is defined in a separate XAML namescope. XAML namescopes
are associated with elements, such that the extent of each XAML namescope
is understood by XAML processors.
@@ -160,7 +160,7 @@
Silverlight application consumer
XAML Names are unique in namescope
XAML has no duplicate attributes
XAML-defined properties that are relevant for assistive technology
- (for example AutomationProperties.Name as described
+ (for example AutomationProperties.Name as described
by other Silverlight techniques) are available
diff --git a/techniques/silverlight/SL34.html b/techniques/silverlight/SL34.html
index 1867a271f0..ae8e2fde0a 100644
--- a/techniques/silverlight/SL34.html
+++ b/techniques/silverlight/SL34.html
@@ -39,10 +39,10 @@
Overview on MSDN.
How Silverlight implements tab sequence concepts
-
The Silverlight programming model defines a Control class
+
The Silverlight programming model defines a Control class
that is a base class of many of the practical controls that produce
- a Silverlight application user interface. One of the behaviors of the Control class
- is that only a Control can receive keyboard focus
+ a Silverlight application user interface. One of the behaviors of the Control class
+ is that only a Control can receive keyboard focus
as a discrete element within the Silverlight content area.
When a Silverlight application user interface is constructed from
the visual tree, a default tab sequence for all Silverlight content
@@ -65,11 +65,11 @@
How Silverlight implements tab sequence concepts
Changing control properties
-
Setting the Visibility property of a control
- to Collapsed causes the control to no longer render
+
Setting the Visibility property of a control
+ to Collapsed causes the control to no longer render
in the UI. As a secondary effect, that control is removed from the
tab sequence.
-
Setting the IsEnabled property of a control to
+
Setting the IsEnabled property of a control to
false causes the control to no longer be focusable by keyboard or
clickable by the mouse. In many cases, the visual appearance of the
control changes also, through a theme style. For example, the control
@@ -80,15 +80,15 @@
Changing control properties
Changing specific tab properties
-
Setting the IsTabStop property of a control to
+
Setting the IsTabStop property of a control to
false causes the control to no longer be focusable by keyboard or
programmatic focus, and that control is removed from the tab sequence.
-
Setting the TabIndex property of a control to
+
Setting the TabIndex property of a control to
a specific index causes the control to be inserted at that position
- in the tab sequence. The default value of TabIndex is
+ in the tab sequence. The default value of TabIndex is
Single.MaxValue, therefore any non-default value promotes that control
to be first in an otherwise default tab sequence. More typically,
- authors would specify a TabIndex for any controls
+ authors would specify a TabIndex for any controls
that are involved in a deliberate segment of tab order re-ordering.
@@ -97,15 +97,15 @@
Tab order and language
Left-to-right is the default only for languages that use left-to-right
reading order. For languages that use right-to-left reading order,
right-to-left is also the default tab order as implemented by Silverlight
- runtime behavior. That language preference is declared by the acting CultureInfo.
- For more information on CultureInfo, see .
+ runtime behavior. That language preference is declared by the acting CultureInfo.
+ For more information on CultureInfo, see .
Examples
Default tab order, based on ordering in the StackPanel
-
In this example, a StackPanel has a natural layout
- order of top-to-bottom, and that will also be the tab order of each StackPanel child
+
In this example, a StackPanel has a natural layout
+ order of top-to-bottom, and that will also be the tab order of each StackPanel child
element (FirstName, then LastName).
column. The order in the content is row by row but the author feels
it is more logical for users to navigate the form column by column.
This way, all the groom's criteria can be filled in before moving on
- to the bride's criteria. The TabIndex attributes of
+ to the bride's criteria. The TabIndex attributes of
the Silverlight elements are used to specify a tab order that navigates
column by column. This example specifically illustrates how changing
tab order can change the meaningful sequence.
@@ -177,7 +177,7 @@
Tab order, modified by changing runtime Control properties
In this example, a radio button choice in a form controls whether
certain other fields in the form are relevant or not relevant. The
- current radio button selection toggles the IsEnabled property
+ current radio button selection toggles the IsEnabled property
in such fields to enable or disable them based on how the user selected
the preceding logical element, which also affects whether the fields
appear in the further tab sequence. The following is UI definition
diff --git a/techniques/silverlight/SL35.html b/techniques/silverlight/SL35.html
index 1d565bed4d..fc337d1e7d 100644
--- a/techniques/silverlight/SL35.html
+++ b/techniques/silverlight/SL35.html
@@ -6,37 +6,37 @@
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to use the Silverlight Validation API.
- The Validation API associates the validation logic with form input
+
The objective of this technique is to use the Silverlight Validation API.
+ The Validation API associates the validation logic with form input
elements that properly support accessible text both for the initial
entry and for any error identification and suggestion that is displayed
in the user interface.
-
Application authors can either associate Validation.Errors output
- with specific UI elements, include an initially hidden ValidationSummary user
+
Application authors can either associate Validation.Errors output
+ with specific UI elements, include an initially hidden ValidationSummary user
interface element, or both. The example shown in this technique uses
- both ValidationSummary and Validation.Errors.
- The ValidationSummary is the most appropriate technique
+ both ValidationSummary and Validation.Errors.
+ The ValidationSummary is the most appropriate technique
for providing text feedback after a form submission attempt, because
assistive technologies pick it up as a discrete focusable element in
- the interface representation. The Validation.Errors technique
+ the interface representation. The Validation.Errors technique
is perhaps a better cognitive user experience for sighted users, because
it presents the specific error suggestions in closer proximity to the
input items that are in error.
-
This technique relies on several Silverlight features: AutomationProperties,
- the Name property for identifying specific UI elements,
- the Validation and ValidationSummary API,
+
This technique relies on several Silverlight features: AutomationProperties,
+ the Name property for identifying specific UI elements,
+ the Validation and ValidationSummary API,
the ElementName variation of Silverlight data binding, and the general
- behavior of TextBox elements.
+ behavior of TextBox elements.
Contrast for validation states of the Label control
Silverlight version 4's default visual styles have a bug where the
colors used to indicate an invalid field entry by changing the color
of the foreground text do not satisfy the 4.5:1 contrast ratio per
SC 1.4.1. To correct for this visual bug, application authors should
- copy the control template for the Label control, and
+ copy the control template for the Label control, and
adjust the color used for the validation state. This is shown in Example
1; the resource "LabelStyle1" was generated by copying
- the default Label style using Microsoft Expression
+ the default Label style using Microsoft Expression
Blend. Then, the value was changed in the copied template, and the
changed template was referenced and included in the application. The
specific changed line is indicated by a comment in the Example 1 sample
@@ -50,7 +50,7 @@
Two form fields with validation on Submit, and an error
In this example, the form fields correspond to a data object that
implements a view model. Silverlight uses the view model and data annotations
to generate some of its UI, notably the names of the fields are bound
- to the original view model names from the data. The ValidationSummary
+ to the original view model names from the data. The ValidationSummary
API is defined in a "Client SDK" library System.Windows.Controls.Data.Input.dll,
which is included as part of the project and the distributable.
This example has a UI defined in XAML and logic defined in C#. The
@@ -250,8 +250,8 @@
Two form fields with validation on Submit, and an error
The default validation style for the Invalid state of Label does
- not have adequate contrast by default. Application authors can restyle Label with
+
The default validation style for the Invalid state of Label does
+ not have adequate contrast by default. Application authors can restyle Label with
a new template that has a 4.5:1 contrast.
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is use the HTML Lang attribute on
+
The objective of this technique is use the HTML Lang attribute on
the object tag to describe each Silverlight plug-in instance on the
HTML hosting page as a "part" that has a different language.
Assistive technologies that use HTML Lang as a determinant of language
@@ -68,8 +68,8 @@
Two Silverlight object tags, each with different HTML
The web project that declares the HTML or ASP page that shows
the framework of how the two Silverlight object tags exist on a page.
This is where the HTML Lang is actually set.
-
A project for the English user control, a simple TextBox.
-
A project for a German user control, also a simple TextBox.
+
A project for the English user control, a simple TextBox.
+
A project for a German user control, also a simple TextBox.
A library with a static translation function
In this example, the English user control implements a LocalMessageSender,
@@ -122,7 +122,7 @@
Two Silverlight object tags, each with different HTML
}
The following is the code-behind for the German user control (the
- XAML is minimal; the main relevant point is that it contains a TextBox target
+ XAML is minimal; the main relevant point is that it contains a TextBox target
named GermanTranslationBox). The code invokes the translation function
found in a separate library. The translation function is not shown,
it simply takes an English string and returns a German translation.
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to wrap the Silverlight Image class
+
The objective of this technique is to wrap the Silverlight Image class
inside a UI container class that is focusable. If the image is focusable,
users who use the TAB sequence to navigate content while the assistive
technology is active, and/or assistive technologies that construct
@@ -23,24 +23,24 @@
Image is
an example of a Silverlight element that is not focusable. This technique
and the example therein are intended to circumvent the possible omission
- of a nonfocusable Silverlight Image element from certain
+ of a nonfocusable Silverlight Image element from certain
navigation views in existing assistive technology implementations.
- The Silverlight Image is wrapped with a display/viewer
+ The Silverlight Image is wrapped with a display/viewer
control class that is focusable. This image-wrapping control is initially
presented in assistive technology representations of a Silverlight
user interface that use only focusable elements when constructing the
assistive technology's representation of the application.
-
The image wrapper class uses the AutomationProperties.Name property
- to provide a short text alternative for the contained Image,
+
The image wrapper class uses the AutomationProperties.Name property
+ to provide a short text alternative for the contained Image,
so that the alternative text can be read or otherwise presented by
- assistive technologies. The Silverlight API AutomationProperties.Name directly
- sets Name in the UI Automation tree. The properties
+ assistive technologies. The Silverlight API AutomationProperties.Name directly
+ sets Name in the UI Automation tree. The properties
in the UI Automation tree are reported to assistive technologies, when
the assistive technology implements behavior that acts as a UI Automation
- client. Name is one of the accessibility framework
+ client. Name is one of the accessibility framework
properties that most assistive technologies present in some way, for
- purposes of both name and value information, and setting Name is
- the common technique for exposing text alternatives for any other Control class
+ purposes of both name and value information, and setting Name is
+ the common technique for exposing text alternatives for any other Control class
(for example, for a button with an image, as shown in the technique ).
This technique is intended for cases where application authors deliberately
do not want a visible image caption for the image to be part of the
@@ -158,7 +158,7 @@
Using the FocusableImage class in UI and applying AutomationProperties.Name<
Now that the image is wrapped by a focusable control, you can instantiate
an instance of the wrapper UI inside a Silverlight layout container,
- specify AutomationProperties.Name at the level of
+ specify AutomationProperties.Name at the level of
the wrapper control’s tag, and have that text serve as the alternative
text for the referenced source image file.
<StackPanel
@@ -182,7 +182,7 @@
Automation Tree
Use the tab sequence inside the Silverlight content area to focus
the control.
Using an accessibility framework verification tool, check that
- the string content is promoted as the default Name applied
+ the string content is promoted as the default Name applied
to the control.
@@ -210,7 +210,7 @@
Screen Reader
UI Automation, use Microsoft Windows as platform.
Engage the screen reader. Move focus to the control (for example,
use the tab sequence).
-
Check that the Name applied to the image is read
+
Check that the Name applied to the image is read
by the screen reader.
Silverlight managed programming model and Silverlight XAML
Description
-
The objective of this technique is to create an AutomationPeer class
- for a custom Silverlight control. The AutomationPeer exposes
+
The objective of this technique is to create an AutomationPeer class
+ for a custom Silverlight control. The AutomationPeer exposes
accessibility properties of the control in a way that abstracts the
Silverlight technology specifics of the control model and maps information
to UI Automation concepts, so that these properties can be consumed
@@ -44,8 +44,8 @@
method Invoke, which would activate the button without
any device input events being produced or required.
By convention, controls and their automation peers share a naming
- pattern. For example, if a control is named Spinner, its automation
- peer is named SpinnerPeer. However, the actual wiring for the class-peer
+ pattern. For example, if a control is named Spinner, its automation
+ peer is named SpinnerPeer. However, the actual wiring for the class-peer
association is made in the control code by overriding OnCreateAutomationPeer.
Thus it is necessary to have access to the control code in order to
associate a new peer class implementation with that control.
state that indicates that the mouse is over the control (this is termed
either MouseOver or Hover state). Controls that support activation
also have a visual state that provides feedback for activation. For
- example, the default Silverlight RepeatButton changes
- its Background gradient on the button field to be
+ example, the default Silverlight RepeatButton changes
+ its Background gradient on the button field to be
darker blue value when the mouse is over the button, and changes to
an even darker value blue when the button is activated (either by clicking
- the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton).
+ the mouse or by pressing SPACE or ENTER with keyboard focus on the RepeatButton).
To see this behavior in a live sample, see RepeatButton
sample on MSDN.
@@ -124,11 +124,11 @@
Focus in Silverlight
application concept of keyboard focus. The element that has focus is
the element within the Silverlight object tree and programming model
that has first chance to process the Silverlight key events. As a more
- tangible example that is user-centric, if a TextBox has
+ tangible example that is user-centric, if a TextBox has
keyboard focus, then when the user presses keys on the keyboard, the
characters associated with the user's pressed keys (or possibly input
that is enabled by an assistive technology that can substitute for
- key strokes) will appear in the TextBox. A user interface
+ key strokes) will appear in the TextBox. A user interface
element in Silverlight can obtain keyboard focus in one of three ways:
The user uses the Silverlight tab sequence to traverse into the
@@ -184,7 +184,7 @@
Visible focus indicator as a style and state
</ResourceDictionary>
The following is the specific visual state portion. Note how the
- visual state includes an ObjectAnimation with discrete
+ visual state includes an ObjectAnimation with discrete
keyframes for hard transition between Visible and Collapsed, targeting
the element "FocusVisual" in the composition shown in the
previous XAML.
diff --git a/techniques/silverlight/SL8.html b/techniques/silverlight/SL8.html
index 39ed7ca39a..1570ffe89b 100644
--- a/techniques/silverlight/SL8.html
+++ b/techniques/silverlight/SL8.html
@@ -12,43 +12,43 @@
text alternative for a nontext object, for example for an image that
contains a level of detail that is difficult to capture in a standard
visible-in-UI image caption.
-
Silverlight supports a UI Automation property named HelpText,
+
Silverlight supports a UI Automation property named HelpText,
to connote its possible usage to provide imperative instructions for
- interactive elements. HelpText is not always forwarded
+ interactive elements. HelpText is not always forwarded
to users by existing assistive technologies, which is an issue discussed
in the technique .
Rather than relying on a particular assistive technology's support
- for enabling users to access the UIA HelpText, application
+ for enabling users to access the UIA HelpText, application
authors can introduce user interface elements into their design that
- databind directly to the HelpText property, but where
+ databind directly to the HelpText property, but where
the interface element is not necessarily displayed by default. An interface
update might be designed to occur if the application user specifically
activates a "Get Help" action that is presented in the initial
user interface.
This technique emphasizes a "HelpText" model as a factoring
- practice. Silverlight application authors can use the HelpText as
+ practice. Silverlight application authors can use the HelpText as
a data source that centralizes such information, because it already
exists and has that intended purpose in accessibility frameworks. For
- example, the HelpText could be shown in a tooltip,
+ example, the HelpText could be shown in a tooltip,
a popup, a separate user interface element that is deliberately rendered
in close proximity, etc. For accessibility support, a recommended display
- option for HelpText is to add or dynamically alter
+ option for HelpText is to add or dynamically alter
a Silverlight text element in the primary user interface. Silverlight
supports an adaptive layout metaphor. Adding text to the runtime elements
in the application generally causes an interface redraw, which in turn
informs assistive technologies (through UIA properties and events)
that content might have changed.
-
To set the UIA HelpText in Silverlight, you set the
- attached property AutomationProperties.HelpText. AutomationProperties.HelpText can
+
To set the UIA HelpText in Silverlight, you set the
+ attached property AutomationProperties.HelpText. AutomationProperties.HelpText can
be set in code, but is typically set in XAML that defines a Silverlight
UI.
HelpText and Tooltip
-
The same information that is used for AutomationProperties.HelpText long
+
The same information that is used for AutomationProperties.HelpText long
text alternatives could also be useful to sighted users. In this case,
the same text could be displayed in a Silverlight ToolTip control.
- The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
- conjunction is because the Tooltip information is
+ The reason that application authors should use both AutomationProperties.HelpText AND Tooltip in
+ conjunction is because the Tooltip information is
not introduced into the runtime accessibility framework information
set by UI Automation, because that information set does not anticipate
the mouse action triggers that cause tooltips to display. In Silverlight
@@ -63,12 +63,12 @@
HelpText and Tooltip
Displaying a long text alternative for an Image with
XAML
-
Application authors can specify the AutomationProperties.HelpText attribute
- on the Image element. The value provided for the attribute
+
Application authors can specify the AutomationProperties.HelpText attribute
+ on the Image element. The value provided for the attribute
should be a meaningful long text alternative for the image content.
- The value of AutomationProperties.HelpText should
- augment rather than duplicate any AutomationProperties.Name or
- an associated Label or LabeledBy caption.
+ The value of AutomationProperties.HelpText should
+ augment rather than duplicate any AutomationProperties.Name or
+ an associated Label or LabeledBy caption.
One or both of these is also typically specified to provide the basic
(short-text) accessibility support for an image.
Displaying a long text alternative for an Image with
</StackPanel>
The following event handler removes the Help button and replaces
- it in UI with a TextBox that displays the long text
+ it in UI with a TextBox that displays the long text
alternative.
Using HelpText to augment existing form labels, to provide
long text instructions
This example provides instructions for two form fields. The same text
- is also displayed for mouse users as a Tooltip and
- the AutomationProperties.HelpText string is used as
+ is also displayed for mouse users as a Tooltip and
+ the AutomationProperties.HelpText string is used as
a common source for both display options. In this example, the form
submission does not perform client-side validation (although server-side
validation following a data round trip might still exist, or validation
@@ -183,8 +183,8 @@
Using HelpText to augment existing form labels, to provide
Note the call to Focus() - this puts the screen reader focus on
the first form element so that the added text can be read. The very
- same text source as used for the Tooltip is added
- programmatically to the existing Label controls.
+ same text source as used for the Tooltip is added
+ programmatically to the existing Label controls.
After the Get Help button is clicked, the visual appearance of the
application is modified:
Silverlight core control built-in keyboard functionality
can handle the event and/or rely on the built-in key handling as listed.
- Button (SPACE and ENTER) - raises Click event.
-
Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE
+ Button (SPACE and ENTER) - raises Click event.
+
Other ButtonBase classes eg RepeatButton, HyperlinkButton (SPACE
and ENTER) - raises Click event.
- TextBox (ENTER, unless in a mode where the TextBox
+ TextBox (ENTER, unless in a mode where the TextBox
accepts multiple lines) - moves focus to next control, treated like
a TAB
Built-in keyboard equivalence for core Silverlight controls
This example pertains to cases where the control that handles key
events is focusable (through the tab sequence, etc.) and where an existing
Silverlight control behavior provides the keyboard equivalence In this
- example, a Silverlight UI includes a Button element.
+ example, a Silverlight UI includes a Button element.
For sighted users, or users that generally use the mouse to interact
with UI, a typical way to interact with the button is to position the
mouse pointer over the element, and click the left mouse button. However,
- the Button also supports a built-in key handling behavior,
+ the Button also supports a built-in key handling behavior,
whereby either the SPACE or ENTER keys are treated as an equivalent
action to clicking the button with a mouse. The requirement for this
- interaction is that the Button must have keyboard
- focus at the point in time that SPACE or ENTER are pressed. The Button might
+ interaction is that the Button must have keyboard
+ focus at the point in time that SPACE or ENTER are pressed. The Button might
gain focus because the user pressed the TAB key to move through the
tab sequence, or some equivalent action enabled by assistive technology.
In terms of the programming experience, the Silverlight application
author does not have to separately handle KeyDown for
- this case. Within the Button control built-in code,
- the special case of SPACE or ENTER keys pressed while a Button has
+ this case. Within the Button control built-in code,
+ the special case of SPACE or ENTER keys pressed while a Button has
focus invokes the button’s Click event. Then the Silverlight
application author can simply handle Click without
differentiating whether the input action was a mouse click or a keyboard
diff --git a/techniques/smil/SM1.html b/techniques/smil/SM1.html
index a643431d33..da3dbc759a 100644
--- a/techniques/smil/SM1.html
+++ b/techniques/smil/SM1.html
@@ -68,8 +68,8 @@
SMIL 1.0 Video with audio descriptions that pause the main media in 4 locati
</body>
</smil>
-
The markup above is broken into five par segments. In each, there is a video and an audio tag (the last par has no <audio> tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a clip-begin and clip-end which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the clip-begin and clip-end. The fill="freeze" holds the last frame of the video during the extended description. The audio tag has a begin attribute with a value that is equal to the clip-end value of the preceding video tag.
-
To determine the values for clip-begin, clip-end, and dur, find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The clip-begin and clip-end define their own values, but the dur value is the sum of the length of the extended description and the clip defined by the clip-begin and clip-end. In the first par, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the dur value is 5.4s + 3.3s = 8.7s.
+
The markup above is broken into five par segments. In each, there is a video and an audio tag (the last par has no <audio> tag intentionally). The convention with extended audio descriptions is that the main media pauses during the description. The way to make this happen in SMIL 1.0 is to set a clip-begin and clip-end which dictate the start and end of the video clip, and to set a duration for the clip that is longer than what is defined by the clip-begin and clip-end. The fill="freeze" holds the last frame of the video during the extended description. The audio tag has a begin attribute with a value that is equal to the clip-end value of the preceding video tag.
+
To determine the values for clip-begin, clip-end, and dur, find the start and end time of the portion of the video being described, and find out the total length of the extended audio description. The clip-begin and clip-end define their own values, but the dur value is the sum of the length of the extended description and the clip defined by the clip-begin and clip-end. In the first par, the video clip starts at 0 seconds, ends at 5.4 seconds, and the description length is 3.3 seconds, so the dur value is 5.4s + 3.3s = 8.7s.
SMIL 2.0 sign-language video sample for RealMedia player
</body>
</smil>
-
The example shows a par segment containing
- two video tags. The systemCaptions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The layout section defines the regions used for the main video and the sign language interpretation video.
+
The example shows a par segment containing
+ two video tags. The systemCaptions attribute indicates that the sign language video should be displayed when the user's player setting for captions indicates the preference for captions to be displayed. The layout section defines the regions used for the main video and the sign language interpretation video.
The way that sequential navigation order is determined in web content is defined by
the technology of the content. For example, simple HTML defines sequential navigation
via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using
- scripting along with the addition of a tabindex attribute to allow focus to additional
- elements. If no scripting or tabindex attributes are used, the navigation order is
+ scripting along with the addition of a tabindex attribute to allow focus to additional
+ elements. If no scripting or tabindex attributes are used, the navigation order is
the order that components appear in the content stream. (See Focus in the HTML Living Standard).
@@ -145,7 +145,7 @@
Examples of Focus Order
An HTML web page is created with the left hand navigation occurring in the HTML after
the main body content, and styled with CSS to appear on the left hand side of the
page. This is done to allow focus to move to the main body content first without requiring
- tabindex attributes or JavaScript.
+ tabindex attributes or JavaScript.
An HTML web page includes links to versions of the page in other languages (e.g.,
- Deutsch, Français, Nederlands, Catalan, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a lang attribute.
+ Deutsch, Français, Nederlands, Catalan, etc.). The text of each link is the name of the language, in that language. The language of each link is indicated via a lang attribute.
Because "podcast" is part of the vernacular of the immediately surrounding text in the following excerpt, "À l'occasion de l'exposition "Energie éternelle. 1500 ans d'art indien", le Palais des Beaux-Arts de Bruxelles a lancé son premier podcast. Vous pouvez télécharger ce podcast au format M4A et MP3", no indication of language change is required.
The element's content and attribute values are in different languages
-
This example assumes that the page's default content is in English. The link's title attribute is in English, but the nested span element that contains the word Español has a lang="es" attribute.
+
This example assumes that the page's default content is in English. The link's title attribute is in English, but the nested span element that contains the word Español has a lang="es" attribute.
Language tags in HTML and XML.
diff --git a/working-examples/aria-alert-identify-errors/index.html b/working-examples/aria-alert-identify-errors/index.html
index 8a8bd92df3..9ce260d29b 100644
--- a/working-examples/aria-alert-identify-errors/index.html
+++ b/working-examples/aria-alert-identify-errors/index.html
@@ -69,7 +69,7 @@
-
Using ARIA live regions or role=alert to identify errors
+
Using ARIA live regions or role=alert to identify errors
@@ -56,8 +56,8 @@ 
@@ -73,11 +73,11 @@