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.
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.
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>
diff --git a/techniques/aria/ARIA22.html b/techniques/aria/ARIA22.html
index 6c13da4333..bb757c148d 100644
--- a/techniques/aria/ARIA22.html
+++ b/techniques/aria/ARIA22.html
@@ -31,7 +31,7 @@ Including a search results message
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 role="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".
<p role="status" aria-atomic="true">
<img src="shopping-cart.png" alt="Shopping Cart">
<span id="cart">0</span> items
diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html
index 381d072f1f..8447fd374e 100644
--- a/techniques/aria/ARIA23.html
+++ b/techniques/aria/ARIA23.html
@@ -28,7 +28,7 @@ Examples
Updating the contents of a chat conversation
- Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role of log so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).
+ Comments that users type into a chat input field are appended to the end of the chat history region. The region is marked with role="log" so that new additions are announced by ATs. When each new chat message appears, a screen reader should announce its content (depending on AT/browser compatibility).
<div id="chatRegion" role="log" aria-labelledby="chatHeading">
<h4 id="chatHeading">Chat History</h4>
@@ -40,7 +40,7 @@ Updating the contents of a chat conversation
Updating the log of a server
- An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with the role of log so that the new additions are announced by the ATs. (The default value for the aria-relevant attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.) When each new log entry is added, a screen reader announces it.
+ An application log records time-stamped activities. The log is exposed in the app as a view, with the region marked with role="log" so that the new additions are announced by the ATs. (The default value for the aria-relevant attribute is "additions", so the removal of the old top entries due to log size limitations will not be announced.) When each new log entry is added, a screen reader announces it.
<div id="activityLog" role="log">
<h4 id="logHeading">Recent activity</h4>
<ul id="logentries"">
diff --git a/techniques/aria/ARIA24.html b/techniques/aria/ARIA24.html
index 58ea3f9dbf..b02f722b12 100644
--- a/techniques/aria/ARIA24.html
+++ b/techniques/aria/ARIA24.html
@@ -181,7 +181,7 @@ Working example:
Multiple Icon Fonts as part of another sematic element WITH visible text
- This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
+ This example already has a visible text label in the link to be used as an accessible name, the mail and chevron font icons must stay visible when the font family is changed. This can be done by ensuring the icons are contained in their own element and the attribute aria-hidden="true" is used so the font icons will be ignored by assistive technologies.
Author CSS
/* default class for fonts-face with icons */
diff --git a/techniques/client-side-script/SCR35.html b/techniques/client-side-script/SCR35.html
index 373072a009..5a1a5a2aeb 100644
--- a/techniques/client-side-script/SCR35.html
+++ b/techniques/client-side-script/SCR35.html
@@ -25,7 +25,7 @@ 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.
+ 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 href="#" 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>
diff --git a/techniques/client-side-script/SCR38.html b/techniques/client-side-script/SCR38.html
index 1cc7cd4595..a19adc6ab5 100644
--- a/techniques/client-side-script/SCR38.html
+++ b/techniques/client-side-script/SCR38.html
@@ -31,7 +31,7 @@ Examples
Using JavaScript
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).
acctoggle.js JavaScript:
window.onload = function(event) {
diff --git a/techniques/css/C18.html b/techniques/css/C18.html
index b4440935f5..42e4a4f4dd 100644
--- a/techniques/css/C18.html
+++ b/techniques/css/C18.html
@@ -17,7 +17,7 @@ When to Use
Description
- 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 1 by 1 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.
Examples
diff --git a/techniques/css/C27.html b/techniques/css/C27.html
index f4f005ea35..53503829a0 100644
--- a/techniques/css/C27.html
+++ b/techniques/css/C27.html
@@ -21,7 +21,7 @@ Description
There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.
When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.
- The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.
+ The tabindex attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A tabindex of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting tabindex values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.
diff --git a/techniques/css/C28.html b/techniques/css/C28.html
index 068b74ca62..bdd66eac3a 100644
--- a/techniques/css/C28.html
+++ b/techniques/css/C28.html
@@ -38,14 +38,14 @@ em units for sizes for layout container containing text
em units for text-based form controls
- 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 class="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
- 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 class="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; }
diff --git a/techniques/css/C6.html b/techniques/css/C6.html
index c3b0c716c7..117467a95d 100644
--- a/techniques/css/C6.html
+++ b/techniques/css/C6.html
@@ -22,7 +22,7 @@ Description
Examples
- 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.
Here is the content to be displayed:
<div class="box">
diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html
index ce3b8c194b..b7a9374343 100644
--- a/techniques/failures/F2.html
+++ b/techniques/failures/F2.html
@@ -21,7 +21,7 @@ Using CSS to style the p element to look like a heading
- 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 f217e6dee1..d45c7be387 100644
--- a/techniques/failures/F38.html
+++ b/techniques/failures/F38.html
@@ -4,8 +4,8 @@
This describes a failure condition for text alternatives for images that
should be ignored by AT. If there is no alt attribute at all assistive
technologies are not able to ignore the non-text content. The alt attribute
- must be provided and have a null value (i.e., alt="" ) to avoid a failure of this Success Criterion.
- This describes a failure condition for text alternatives for images that should be ignored by assistive technology (AT). If an image has the attribute role="presentation", it will be ignored by AT. However, if it does not have role="presentation", and if there is no alt attribute at all assistive technologies are not able to ignore the image. For decorative images which need to be ignored by AT, either role="presentation" must be used or the alt attribute must be provided and have a null value (i.e., alt="") to avoid a failure of this Success Criterion.
+ 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
diff --git a/techniques/failures/F40.html b/techniques/failures/F40.html
index 9b174febff..92a570b0e0 100644
--- a/techniques/failures/F40.html
+++ b/techniques/failures/F40.html
@@ -3,7 +3,7 @@
When to Use
All pages
Description
- meta http-equiv content="{time} url=..." is often used to
+
meta http-equiv="refresh" 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
diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html
index ce9fd7f250..dd1d7beb4a 100644
--- a/techniques/failures/F41.html
+++ b/techniques/failures/F41.html
@@ -3,7 +3,7 @@
Description
- 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="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
@@ -26,7 +26,7 @@ Examples
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 less than 1 or greater than 72000.
- Check if the page qualifies for Real-time or Essential Exceptions in Success Criterion 2.2.1 Timing Adjustable.
- 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.
diff --git a/techniques/failures/F89.html b/techniques/failures/F89.html
index 0e3cd0371c..f6c0bbe817 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."
<a href="scores.html">
<img src="football.gif" alt="">
diff --git a/techniques/failures/F92.html b/techniques/failures/F92.html
index 19394a5184..bd79cecf03 100644
--- a/techniques/failures/F92.html
+++ b/techniques/failures/F92.html
@@ -3,7 +3,7 @@
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.
+ 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 role="presentation" for content which should convey semantic information may prevent the user from understanding that content.
Examples
diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html
index d892cd43ec..2c380a6b23 100644
--- a/techniques/flash/FLASH25.html
+++ b/techniques/flash/FLASH25.html
@@ -48,9 +48,9 @@
instance and assign it to the accessibilityProperties property. The
object itself can have several accessibility related properties, one
of them being accessibilityProperties.name which specifies the accessible
- name. When an accessibilityProperties property is updated, the developer
- must call flash.accessibility.Accessibility.UpdateProperties() for the
- changes to take effect. Before calling Accessibility.UpdateProperties(),
+ name. When an accessibilityProperties property is updated, the developer
+ must call flash.accessibility.Accessibility.UpdateProperties() for the
+ changes to take effect. Before calling Accessibility.UpdateProperties(),
it is recommended to check the flash.system.capabilities.hasAccessibility
flag. this will prevent an error on environments that do not support
MSAA.
diff --git a/techniques/html/H30.html b/techniques/html/H30.html
index 7a065bb009..cb97e43129 100644
--- a/techniques/html/H30.html
+++ b/techniques/html/H30.html
@@ -13,7 +13,7 @@ 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
diff --git a/techniques/html/H4.html b/techniques/html/H4.html
index 5328a3f1a9..ee6d59fc7e 100644
--- a/techniques/html/H4.html
+++ b/techniques/html/H4.html
@@ -14,12 +14,12 @@
the content without following the order of the interactive elements in the code. In
these cases, an alternative order can be specified using the tabindex
attribute of the interactive element. The tabindex is given a value between
- 0 and 32767.
+ 0 and 32767.
When the interactive elements are navigated using the tab key, the elements are given
focus in increasing order of the value of their tabindex attribute.
- Elements that have a tabindex value higher than zero will receive focus
- before elements without a tabindex or a tabindex of 0. After
- all of the elements with a tabindex higher than 0 have received focus, the rest of the
+ Elements that have a tabindex value greater than 0 will receive focus
+ before elements without a tabindex or a tabindex of 0. After
+ all of the elements with a tabindex greater than 0 have received focus, the rest of the
interactive elements are given focus in the order in which they appear in the web
page.
Examples
@@ -78,7 +78,7 @@
- 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
character stream.
diff --git a/techniques/html/H60.html b/techniques/html/H60.html
index 9b511d8f11..17cf2918f0 100644
--- a/techniques/html/H60.html
+++ b/techniques/html/H60.html
@@ -26,7 +26,7 @@ The WCAG 2 Glossary.
element
- Check that the
link element has attribute
- rel="glossary"
+ rel="glossary"
- Check that the
href attribute of the link element
refers to the glossary page.
diff --git a/techniques/html/H73.html b/techniques/html/H73.html
index d227c19062..36be9be1cd 100644
--- a/techniques/html/H73.html
+++ b/techniques/html/H73.html
@@ -27,7 +27,7 @@
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.
+ (summary="") on layout tables is acceptable. See F46 for details.
Examples
diff --git a/techniques/html/H76.html b/techniques/html/H76.html
index 95a8734410..8c79c7b7e6 100644
--- a/techniques/html/H76.html
+++ b/techniques/html/H76.html
@@ -45,7 +45,7 @@ Procedure
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 number is followed by
;URL=anyURL (where anyURL stands for the URI that should replace the current page).
diff --git a/techniques/html/H99.html b/techniques/html/H99.html
index 13ca98d7b3..7bbf5c6894 100644
--- a/techniques/html/H99.html
+++ b/techniques/html/H99.html
@@ -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, role="doc-pagelist" is added to the element (typically a nav element) that encloses the list and its title.
<nav role="doc-pagelist" aria-labelledby="pglist">
<h2 id="pglist">Page List</h2>
<ol>
diff --git a/techniques/server-side-script/SVR5.html b/techniques/server-side-script/SVR5.html
index e188996569..d68afe593f 100644
--- a/techniques/server-side-script/SVR5.html
+++ b/techniques/server-side-script/SVR5.html
@@ -25,7 +25,7 @@ Description
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):
...
public void doGet(HttpServletRequest request, HttpServletResponse response)