From 24bbfdc001a715b17edc5ca2868030bbc9ab6e34 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 17:38:42 +0100 Subject: [PATCH 01/38] Update techniques/server-side-script/SVR5.html --- techniques/server-side-script/SVR5.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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)

From d1cac1536db3fa1325c4d70482ef95a215bcc739 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 17:45:44 +0100
Subject: [PATCH 02/38] Update techniques/aria/ARIA21.html

---
 techniques/aria/ARIA21.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html
index 0a1d95a257..b290824003 100644
--- a/techniques/aria/ARIA21.html
+++ b/techniques/aria/ARIA21.html
@@ -8,7 +8,7 @@
  
 

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.

+

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

From ce166d90624051fbc8e91af83c2db858bcddce8b Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 17:46:33 +0100 Subject: [PATCH 03/38] Update techniques/aria/ARIA21.html --- techniques/aria/ARIA21.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html index b290824003..5b03bf6d5d 100644 --- a/techniques/aria/ARIA21.html +++ b/techniques/aria/ARIA21.html @@ -9,7 +9,7 @@

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.

+

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

From ba5ebc3bed34c010f41828ccacfbb401e1c5b81c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:20:21 +0100 Subject: [PATCH 04/38] Update techniques/aria/ARIA21.html --- techniques/aria/ARIA21.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA21.html b/techniques/aria/ARIA21.html index 5b03bf6d5d..8892cef1be 100644 --- a/techniques/aria/ARIA21.html +++ b/techniques/aria/ARIA21.html @@ -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>

From e7725c2479c0c4952a791463756bc24c8c0edfff Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:21:31 +0100
Subject: [PATCH 05/38] Update techniques/aria/ARIA23.html

---
 techniques/aria/ARIA23.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html
index 381d072f1f..c119af22ed 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>

From 96181d8ecda4999972cf4bc4fec87f2bd8deaac7 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:22:47 +0100
Subject: [PATCH 06/38] Update techniques/aria/ARIA22.html

---
 techniques/aria/ARIA22.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

Updating the shopping cart status

-

After a user presses an Add to Shopping Cart button, content near the Shopping Cart icon updates to read "1 items". The container for this text (in this case a <p>) is marked with the role of status. Because it adds visual context, the shopping cart image — with succinct and accurate alt text — is also placed in the container. Due to the 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

From cd46c0bae9d41b0d30a4f0052c8750a06c7e2d96 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:23:48 +0100
Subject: [PATCH 07/38] Update techniques/client-side-script/SCR38.html

---
 techniques/client-side-script/SCR38.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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) {

From 434e8b7ac6225041fad80786c49f6a03ed4943af Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:25:07 +0100
Subject: [PATCH 08/38] Update techniques/aria/ARIA23.html

---
 techniques/aria/ARIA23.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html
index c119af22ed..7372ac7a4c 100644
--- a/techniques/aria/ARIA23.html
+++ b/techniques/aria/ARIA23.html
@@ -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"">

From c741cab7a08b925c1a211e0143c39146284e7d17 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:26:48 +0100
Subject: [PATCH 09/38] Update techniques/aria/ARIA24.html

---
 techniques/aria/ARIA24.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 */

From 8c39ac10e5cc48bb89e8dd63be95522622896625 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:28:50 +0100
Subject: [PATCH 10/38] Update techniques/client-side-script/SCR35.html

---
 techniques/client-side-script/SCR35.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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> 

From 41ca52cd916a3afd67f7265459d8b3829de92346 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:30:02 +0100
Subject: [PATCH 11/38] Update techniques/css/C18.html

---
 techniques/css/C18.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 4e823e3883a5d7157d93feda31975158f3969bc5 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:31:30 +0100 Subject: [PATCH 12/38] Update techniques/css/C27.html --- techniques/css/C27.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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.

From e065c42c764f23a8e041e02e2a221c2422bb331f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:32:51 +0100 Subject: [PATCH 13/38] Update techniques/css/C28.html --- techniques/css/C28.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C28.html b/techniques/css/C28.html index 068b74ca62..9bf585a8f1 100644 --- a/techniques/css/C28.html +++ b/techniques/css/C28.html @@ -38,7 +38,7 @@

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; }
From bfcd1baa0caf1ea38afbcee905a3e281e1e4f6f1 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:35:54 +0100 Subject: [PATCH 14/38] Update techniques/css/C28.html --- techniques/css/C28.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/css/C28.html b/techniques/css/C28.html index 9bf585a8f1..bdd66eac3a 100644 --- a/techniques/css/C28.html +++ b/techniques/css/C28.html @@ -45,7 +45,7 @@

em units for text-based form controls

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; }
From 7a7fe954bac565075db8b2089e884fea57e244ab Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:37:21 +0100 Subject: [PATCH 15/38] Update techniques/failures/F2.html --- techniques/failures/F2.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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.

From 08316d955cea69bedd89ed03ab3da819bba07cfc Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:37:51 +0100 Subject: [PATCH 16/38] Update techniques/css/C6.html --- techniques/css/C6.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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">

From 76257555e658d1c293e709c2f7a27155c0211d39 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 13 Sep 2025 18:40:21 +0100
Subject: [PATCH 17/38] Update techniques/failures/F38.html

---
 techniques/failures/F38.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
index f217e6dee1..635a37fb68 100644
--- a/techniques/failures/F38.html
+++ b/techniques/failures/F38.html
@@ -5,7 +5,7 @@
                         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 From a69f6012e639a51306d0bc91b9d3c4e835869cc2 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:41:24 +0100 Subject: [PATCH 18/38] Update techniques/failures/F41.html --- techniques/failures/F41.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html index ce9fd7f250..e0407437f8 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

From 95dcf18354324a78d1f5dad29df8ed2053a2139a Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:42:42 +0100 Subject: [PATCH 19/38] Update techniques/failures/F41.html --- techniques/failures/F41.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/failures/F41.html b/techniques/failures/F41.html index e0407437f8..dd1d7beb4a 100644 --- a/techniques/failures/F41.html +++ b/techniques/failures/F41.html @@ -26,7 +26,7 @@

Examples

For a page that uses meta http-equiv="refresh":

  1. Check that the numerical value for seconds until refresh in the content attribute is present.
  2. -
  3. Check that the numerical value for seconds until refresh in the content attribute is less than one or greater than 72,000.
  4. +
  5. Check that the numerical value for seconds until refresh in the content attribute is less than 1 or greater than 72000.
  6. Check if the page qualifies for Real-time or Essential Exceptions in Success Criterion 2.2.1 Timing Adjustable.
  7. Check if the user is provided an opportunity to turn off, extend, or adjust the timing of the page refresh.
  8. Check if the page does not refresh after the duration specified in the content attribute.
  9. From a8be753e83be7d2d29cb3f0c0d25e99f93768833 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 18:46:44 +0100 Subject: [PATCH 20/38] Update techniques/failures/F89.html --- techniques/failures/F89.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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="">
    
    From 9307b5314c478da11b776fccf6c466a75f67fcd8 Mon Sep 17 00:00:00 2001
    From: "Patrick H. Lauke" 
    Date: Sat, 13 Sep 2025 18:49:49 +0100
    Subject: [PATCH 21/38] Update techniques/failures/F92.html
    
    ---
     techniques/failures/F92.html | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    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

    From 42e8227e3d5064955afd681f2b0579b483e4030c Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:08:45 +0100 Subject: [PATCH 22/38] Update techniques/flash/FLASH25.html --- techniques/flash/FLASH25.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html index d892cd43ec..dada5cf33c 100644 --- a/techniques/flash/FLASH25.html +++ b/techniques/flash/FLASH25.html @@ -48,7 +48,7 @@ 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 + 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 From 16d3c345f48377569c565a5c3250fac36ab16042 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:17:16 +0100 Subject: [PATCH 23/38] Update techniques/html/H4.html --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index 5328a3f1a9..59f87bc003 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -14,7 +14,7 @@ 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 From 164db2ae6161b45d5c9d566da1a518fdea700639 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:18:59 +0100 Subject: [PATCH 24/38] Update techniques/html/H30.html --- techniques/html/H30.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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

    From ad0daf474617bea1ade5004f452ccd54ca3fd216 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:23:00 +0100 Subject: [PATCH 25/38] Update techniques/html/H4.html --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index 59f87bc003..d2ee9a091d 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -17,7 +17,7 @@ 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 + Elements that have a tabindex value higher than 0 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 From 1a0d9955bf25dd30ae05b28bfba89ab45481f7a0 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:26:03 +0100 Subject: [PATCH 26/38] Update techniques/html/H4.html --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index d2ee9a091d..8fcd110596 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -18,7 +18,7 @@

    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 0 will receive focus - before elements without a tabindex or a tabindex of 0. After + 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.

    From 40eccb86b5096ce5800674073b69482bbd1886d5 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:26:50 +0100 Subject: [PATCH 27/38] Update techniques/html/H4.html --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index 8fcd110596..b28cb3dfd5 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -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.

    From 85a680a53c42b53e0f7e2eace3df1f347282bfbe Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:27:45 +0100 Subject: [PATCH 28/38] Update techniques/html/H60.html --- techniques/html/H60.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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
  10. Check that the link element has attribute - rel="glossary" + rel="glossary"
  11. Check that the href attribute of the link element refers to the glossary page.
  12. From d42754bb52b8629362a8830daf4c844b8d429799 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:28:32 +0100 Subject: [PATCH 29/38] Update techniques/html/H73.html --- techniques/html/H73.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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

    From 1e56c6c85463897a550e470f0641d767d9be513d Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:57:12 +0100 Subject: [PATCH 30/38] Update techniques/html/H76.html --- techniques/html/H76.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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:

    1. the content attribute has a number with a value of 0, and
    2. -
    3. the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
    4. +
    5. the number is followed by ;URL=anyURL (where anyURL stands for the URI that should replace the current page).
    From 31ec1d1150020b0742b23dcbb5bf9a3aaea3156a Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Sat, 13 Sep 2025 19:59:27 +0100 Subject: [PATCH 31/38] Update techniques/html/H99.html --- techniques/html/H99.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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>
    
    From 5c748517b35a9aa120581df88c3465bfc405ab11 Mon Sep 17 00:00:00 2001
    From: "Kenneth G. Franqueiro" 
    Date: Mon, 15 Sep 2025 10:16:15 -0400
    Subject: [PATCH 32/38] Fix syntax of first meta http-equiv in F40
    
    ---
     techniques/failures/F40.html | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    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 @@
             

    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="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 From 66021e3e08b527e9c4f86495743391da630f48ad Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 3 Oct 2025 08:54:29 -0700 Subject: [PATCH 33/38] Update techniques/aria/ARIA23.html Co-authored-by: Adam Page --- techniques/aria/ARIA23.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA23.html b/techniques/aria/ARIA23.html index 7372ac7a4c..8447fd374e 100644 --- a/techniques/aria/ARIA23.html +++ b/techniques/aria/ARIA23.html @@ -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 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.

    +

    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"">
    
    From a9edb13f3012ee3970a853ad9f8aecc60dfc7e04 Mon Sep 17 00:00:00 2001
    From: Mike Gower 
    Date: Fri, 3 Oct 2025 08:55:08 -0700
    Subject: [PATCH 34/38] Update techniques/failures/F38.html
    
    Co-authored-by: Adam Page 
    ---
     techniques/failures/F38.html | 2 +-
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    diff --git a/techniques/failures/F38.html b/techniques/failures/F38.html
    index 635a37fb68..d45c7be387 100644
    --- a/techniques/failures/F38.html
    +++ b/techniques/failures/F38.html
    @@ -4,7 +4,7 @@
           

    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.

    + 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

      From df029085e1080b56293fd382c5c42a1cafa3aedb Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 3 Oct 2025 08:55:39 -0700 Subject: [PATCH 35/38] Update techniques/flash/FLASH25.html Co-authored-by: Adam Page --- techniques/flash/FLASH25.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html index dada5cf33c..5b84a9f9e6 100644 --- a/techniques/flash/FLASH25.html +++ b/techniques/flash/FLASH25.html @@ -49,7 +49,7 @@ 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 + 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 From 303eed8af3e0b503ff9f7157fc67f06014e9d890 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 3 Oct 2025 08:56:06 -0700 Subject: [PATCH 36/38] Update techniques/flash/FLASH25.html Co-authored-by: Adam Page --- techniques/flash/FLASH25.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/flash/FLASH25.html b/techniques/flash/FLASH25.html index 5b84a9f9e6..2c380a6b23 100644 --- a/techniques/flash/FLASH25.html +++ b/techniques/flash/FLASH25.html @@ -50,7 +50,7 @@ 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(), + 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.

      From 652933731c08c5b12a3ae2334fd69bf17867e546 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 3 Oct 2025 08:57:58 -0700 Subject: [PATCH 37/38] Update techniques/html/H4.html Co-authored-by: Adam Page --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index b28cb3dfd5..b248b681c5 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -19,7 +19,7 @@ focus in increasing order of the value of their tabindex attribute. Elements that have a tabindex value higher than 0 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 + 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

    From 5537b7f31fa3ecd16d2920c9108806565e20af1f Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 3 Oct 2025 08:58:23 -0700 Subject: [PATCH 38/38] Update techniques/html/H4.html --- techniques/html/H4.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/html/H4.html b/techniques/html/H4.html index b248b681c5..ee6d59fc7e 100644 --- a/techniques/html/H4.html +++ b/techniques/html/H4.html @@ -17,7 +17,7 @@ 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 0 will receive focus + 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