Technologies that support Accessible Rich Internet Applications.
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).
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 can be used to meet Success Criterion 1.4.5 or 1.4.9 if a presentation that does not include images of text is available and as long as the user interface control that is provided to allow users to switch to an alternate presentation meets the relevant criteria. Where possible, authors should deliver the presentation that does not include images of text as the default presentation. In addition, the control used to switch should be located near the beginning of the page.
A variety of "image replacement" techniques have been developed to address a variety of user agent, configuration and compatibility with assistive technology issues (See resources for more information). While there are a variety of approaches authors may use to replace text, it is important to consider compatibility with assistive technology, whether the technique will work correctly if scripting, CSS, images (or combinations of these) are turned off. Since it can be difficult to find a single solution that works in all cases, this technique recommends the use of a control that allows users to switch to a presentation that does not include an image replacement technique.
This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29 and Understanding Conforming Alternate Versions for more information.
+This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29 and Understanding Conforming Alternate Versions for more information.
The objective of this Failure is to describe situations where authors have implemented a function that is operated via a path-based gesture, and no alternative ways of operating this function via simple pointer gestures exist.
If you did not create the content and functionality you can find path-based gestures by exploring the content on a touch screen, or checking the page code for the existence of specific event handlers such as touchstart or touchend. See the Understanding document for Pointer Gestures for more on the path-based gestures.
-Note: For functionality implemented with a path-based gesture, the possibility of also operating it via the keyboard is beneficial (and may serve to meet Success Criterion 2.1.1 Keyboard). The point of Success Crtierion 2.5.1, however, is to ensure that pointer users who on many devices will have no keyboard available, have alternative ways of operating the function via simple pointer input.
+Note: For functionality implemented with a path-based gesture, the possibility of also operating it via the keyboard is beneficial (and may serve to meet Success Criterion 2.1.1 Keyboard). The point of Success Criterion 2.5.1, however, is to ensure that pointer users who on many devices will have no keyboard available, have alternative ways of operating the function via simple pointer input.
HTML
-- 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.
This is a deprecated example that changes the user's page at regular - intervals. Content developers should not use this technique to - simulate "push" technology. Developers cannot predict how much time - a user will require to read a page; premature refresh can disorient - users. Content developers should avoid periodic refresh and allow - users to choose when they want the latest information. (The number - in the content attribute is the refresh interval in - seconds.)
+This is a deprecated example that changes the user's page at regular intervals. Content developers should not use this technique to simulate "push" technology. Developers cannot predict how much time a user will require to read a page; premature refresh can disorient users. Content developers should avoid periodic refresh and allow users to choose when they want the latest information. (The number in the content attribute is the refresh interval in seconds.)
<!doctype>
<html lang="en">
<head>
- <title>HTML Techniques for WCAG 2.0</title>
+ <title>HTML Techniques for WCAG 2</title>
<meta http-equiv="refresh" content="60" />
</head>
<body>
@@ -34,13 +23,13 @@
For a page that uses meta http-equiv="refresh":
For a page that uses meta http-equiv="refresh":
content attribute is present.content attribute is less than one or greater than 72,000.content attribute.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.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.
div elementHTML
The blink element, while not part of the official HTML or XHTML - specification, is supported by many user agents. It causes any text inside - the element to blink at a predetermined rate. This cannot be interrupted by - the user, nor can it be disabled as a preference. The blinking continues as - long as the page is displayed. Therefore, content that uses - blink fails the Success Criterion because blinking can continue - for more than three seconds.
+The blink element, while not part of the official HTML specification, is supported by many user agents. It causes any text inside the element to blink at a predetermined rate. This cannot be interrupted by the user, nor can it be disabled as a preference. The blinking continues as long as the page is displayed. Therefore, content that uses blink fails the Success Criterion because blinking can continue for more than three seconds.
A product list page uses the blink element to draw - attention to sale prices. This fails the Success Criterion because - users cannot control the blink.
+A product list page uses the blink element to draw attention to sale prices. This fails the Success Criterion because users cannot control the blink.
<p>My Great Product <blink>Sale! $44,995!</blink></p>If check #2 AND check #3 are false, the failure condition applies.
HTML
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.
Identify img, area, and input elements of type image. For each of these elements:
alt attribute is present.
-
- aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.
- aria-label attribute is present AND check if aria-label is accessibility supported.
- title attribute is present AND check if title is accessibility supported.
- alt attribute is present.aria-labelledby attribute is present AND references one or more id attributes in the page AND check if aria-labelledby is accessibility supported.aria-label attribute is present AND check if aria-label is accessibility supported.title attribute is present AND check if title is accessibility supported.Any technology.
The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.2 to provide captions and to Success Criterion 1.2.3 and 1.2.5.
+The objective of this failure is to avoid situations in which synchronized media alternatives provide more information than the text for which they are alternatives, but do not provide their own text alternatives to provide access to the extra information. Synchronized media alternatives provide enhanced access to users for whom synchronized media is a more effective format than text. Since they are alternatives to text, they do not need themselves to have redundant text alternatives in the form of captions, audio descriptions or full text alternatives. However, if they provide more information than the text for which they are an alternative, then they are not just alternatives but are synchronized media content in their own right. In this case they are subject to the full requirements of Success Criterion 1.2.2 to provide captions and to Success Criterion 1.2.3, and Success Criterion 1.2.5.
For all data tables, check if table headers can be correctly programmatically determined by use of one of the following mechanisms:
th) elements
- th) elementsscope attributes on th for tables with more than a single row or column of table headers.headers and id attributes
- td elements with the scope attribute
- rowheader or columnheader
- headers and id attributestd elements with the scope attributerowheader or columnheaderThe 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.
Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text or H30: Providing link text that describes the purpose of a link for anchor elements.
+Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text or H30: Providing link text that describes the purpose of a link for anchor elements.
Emojis are very popular and are frequently used online to help provide more context and expression to text-based communication. Emojis come with their own pre-defined names that might not always match what the author is intending to communicate. For example, the emoji of a black right-facing triangle (►) is described by default as black right-pointing pointer, which would be confusing if a designer had changed its rotation or color, or if it was being used to give the accessible name to a "play" button in a multimedia player.
Emoticons pre-date emojis, are still used but are much less popular than they once were. Emoticons use ASCII characters to create facial expressions and other ways to communicate an emotion. Because emoticons are made from many text characters, they can be confusing for screen reader users. When possible it is better simply to use a word like "smile" or a suitable emoji instead of an emoticon. If emoticons are used they should have a text alternative.
ASCII art was common on the internet before graphics became widely used. ASCII characters were arranged to form pictures, pictures of text, or graphs. Although ASCII content is not used frequently on the Web anymore, it must be remembered that, when it is used, it can be very confusing to people who are accessing the internet using screen readers. If ASCII art is used, it should also have a text explanation of what the picture is. It is also suggested that, if the ASCII picture isn't marked up as an image using ARIA, that there is a link to skip over the art (although this is not required).
+Leet used to be a fairly-common part of Internet culture and slang, but is now hardly used. Leetspeak uses various combinations of characters, including numerals and special characters, to replace standard characters. Leet is often incomprehensible to people using screen readers, and therefore requires a text alternative in order to conform to Success Criterion 1.1.1 (Non-Text Content).
+For each HTML page:
Check #1 and #3 are most easily checked with page validation tools. Check #2 can be checked with the assistance of heuristic evaluation tools though manual judgment is usually required.
@@ -53,11 +53,9 @@Refer to the resources section of Validating Web pages.
-Refer to the resources section of Validating Web + pages.
+ +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 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.
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.
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.