From adaf5425f59932f6d9626e4192d7e3ff8ea7feb4 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Thu, 22 Feb 2018 15:34:46 -0800 Subject: [PATCH 1/3] Introduction text --- techniques/aria/aria-status-role.html | 59 +++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 techniques/aria/aria-status-role.html diff --git a/techniques/aria/aria-status-role.html b/techniques/aria/aria-status-role.html new file mode 100644 index 00000000..3c590ead --- /dev/null +++ b/techniques/aria/aria-status-role.html @@ -0,0 +1,59 @@ + + + + WCAG 2.0 Technique + + + +

Using ARIA role=status

+
+

Metadata

+

ID: W##

+

Technology: ARIA

+

Type: Technique

+
+
+

When to Use

+

Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc.

+
+
+

Description

+

+ The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has an aria-atomic value of true, so that updates to the region marked with a role of status will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details. + +

+ +
+
+

Examples

+

Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.

+
+

Example Title

+

Description

+ Code sample +

Working example: link

+
+
+
+

Tests

+
+

Procedure

+
    +
  1. Step 1
    2. +
+
+
+

Expected Results

+
    +
  • Result
    • +
+
+
+
+

Related Techniques

+ +
+ + \ No newline at end of file From b10c86ab0e506d4faafe49e0f35832372a908866 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Fri, 23 Feb 2018 14:56:35 -0800 Subject: [PATCH 2/3] Added examples, procedures and expected results --- techniques/aria/aria-status-role.html | 35 +++++++++++++++++++++------ 1 file changed, 28 insertions(+), 7 deletions(-) diff --git a/techniques/aria/aria-status-role.html b/techniques/aria/aria-status-role.html index 3c590ead..ffafcfde 100644 --- a/techniques/aria/aria-status-role.html +++ b/techniques/aria/aria-status-role.html @@ -14,12 +14,16 @@

Metadata

When to Use

-

Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc.

+

This technique relates to: +

    +
  • Success Criterion 3.2.6 Status Changes
    • +
+

Description

- The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has an aria-atomic value of true, so that updates to the region marked with a role of status will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details. + The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has an aria-atomic value of true, so that updates to the region marked with a role of status will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details.

@@ -28,9 +32,25 @@

Description

Examples

Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.

-

Example Title

-

Description

- Code sample +

Including a search results message

+

After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "Five results returned".

+
+ 
+						
5 results returned.

+
+
+

Working example: link

+
+
+

Updating the shopping cart status

+

After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon updates the text to read "6 items". The div containing this text is marked with the role of status. Because the shopping cart icon adds visual context, a label is added with aria. A screen reader will announce "Shopping cart, six items".

+
+ 
+						
+							
6 items

+						
+
+

Working example: link

@@ -39,13 +59,14 @@

Tests

Procedure

    -
  1. Step 1
    2. +
  2. Determine if text that meets the definition of a status message appears on the page.
    3. +
  3. Determine if the container for the text is given a role of "status".

Expected Results

    -
  • Result
    • +
  • If #1 is true, then #2 is true.
From becab06b706f39bd80004cd9f2836c0d5311ee20 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Tue, 27 Feb 2018 11:32:03 -0800 Subject: [PATCH 3/3] Modified the example and procedure based on feedback --- techniques/aria/aria-status-role.html | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/techniques/aria/aria-status-role.html b/techniques/aria/aria-status-role.html index ffafcfde..6aca1d07 100644 --- a/techniques/aria/aria-status-role.html +++ b/techniques/aria/aria-status-role.html @@ -23,31 +23,32 @@

When to Use

Description

- The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria live region role of status has an implicit aria-live value of polite, which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has an aria-atomic value of true, so that updates to the region marked with a role of status will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details. + The purpose of this technique is to notify Assistive Technologies (AT) when content has been updated with information about the user's or application's status. The aria live region role of status has an implicit aria-live value of "polite", which allows a user to be notified via AT (such as a screen reader) when status messages are added. The role of status also has an aria-atomic value of true, so that updates to the region marked with a role of status will result in the AT presenting the entire contents of the region to the user, including any author-defined label. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed. See WAI-ARIA 1.1 status (role) for more details.

Examples

-

Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.

Including a search results message

After a user presses a Search button, the page content is updated to include the results of the search, which are displayed in a section below the Search button. The change to content also includes the message "5 results returned" near the top of this new content. This text is given an appropriate role for a status message. A screen reader will announce "Five results returned".

-						
5 results returned.

+						
+							
5 results returned.

+

Working example: link

Updating the shopping cart status

-

After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon updates the text to read "6 items". The div containing this text is marked with the role of status. Because the shopping cart icon adds visual context, a label is added with aria. A screen reader will announce "Shopping cart, six items".

+

After a user presses an Add to Shopping Cart button, a section of content near the Shopping Cart icon updates the text to read "6 items". The div containing this text is marked with the role of status. For maximum compatibility with current assistive technology and user agents, the default aria-live value is explicitly set. Because the shopping cart icon adds visual context, a label is added with aria. A screen reader will announce "Shopping cart, six items".

 						
-							
6 items

+							
6 items
@@ -58,15 +59,15 @@

Updating the shopping cart status

Tests

Procedure

+ On a page that contains a status message:
    -
  1. Determine if text that meets the definition of a status message appears on the page.
    2. -
  2. Determine if the container for the text is given a role of "status".
    3. +
  3. Check that status message text is inside a container given a role of status.

Expected Results

    -
  • If #1 is true, then #2 is true.
    • +
  • #1 is true.