From 05af16b46773f376b68216c476bf7d4657469907 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Thu, 3 Jul 2025 11:09:57 +0200 Subject: [PATCH 01/13] =?UTF-8?q?Formatting=20for=20easier=20editing=20Sor?= =?UTF-8?q?ry=20that=20this=20will=20make=20the=20actual=20PR=20more=20dif?= =?UTF-8?q?ficult=20to=20read,=20but=20it=E2=80=99s=20necessary=20to=20be?= =?UTF-8?q?=20able=20to=20efficiently=20make=20changes=20for=20me.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- techniques/aria/ARIA14.html | 122 +++++++++++++++++++++++------------- 1 file changed, 77 insertions(+), 45 deletions(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 5dae9eb210..0940c7ba5c 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -1,63 +1,95 @@ -Using aria-label to provide an invisible label where a visible label cannot be used

Using aria-label to provide an invisible label where a visible label cannot be used

ID: ARIA14

Technology: aria

Type: Technique

When to Use

+ + + + + Using aria-label to provide an invisible label where a visible label cannot be used + + + + +

Using aria-label to provide an invisible label where a visible label cannot be used

+
+

ID: ARIA14

+

Technology: aria

+

Type: Technique

+
+
+

When to Use

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

-

Description

-

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div. -

+
+
+

Description

+

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div. +

In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.

-

Examples

+
+
+

Examples

-

A close button in a pop-up box

- -

On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.

-
<div id="box">
+        
A close button in a pop-up box

+
+        
On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.

+        
<div id="box">
    This is a pop-up box.
-   <button aria-label="Close">X</button>				
+   <button aria-label="Close">X</button>
 </div>

-            
Working example: Close button example.
-

-         
+        
Working example: Close button example.
+        

+
-

A phone number with multiple fields

- -
<div role="group" aria-labelledby="groupLabel">
+        
A phone number with multiple fields

+
+        
<div role="group" aria-labelledby="groupLabel">
   <span id="groupLabel">Work Phone</span>
   +<input autocomplete="tel-country-code" type="number" aria-label="country code">
   <input autocomplete="tel-area-code" type="number" aria-label="area code">
   <input autocomplete="tel-local" type="number" aria-label="subscriber number">
 </div>

-         
+
-

Tests

-

Procedure

-

For elements that use aria-label: -

-
    -
  1. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required -
    2. -
+
+
+

Tests

+
+

Procedure

+

For elements that use aria-label: +

+
    +
  1. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required +
    2. +
-

Expected Results

-
    -
  • #1 is true.
    • -
+
+

Expected Results

+
    +
  • #1 is true.
    • +
-

Resources

- - - -
- \ No newline at end of file +
+ +
+

Resources

+ + + +
+ + + \ No newline at end of file From e1df541c5b09d7540e3e2991774f12ea8db73491 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Thu, 3 Jul 2025 11:31:13 +0200 Subject: [PATCH 02/13] =?UTF-8?q?Replacing=20=E2=80=9Cinvisible=20label?= =?UTF-8?q?=E2=80=9D=20with=20=E2=80=9Caccessible=20name=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Trying to be clear that aria-label sets the accessible name, also clarified some text. This technique could probably do with more examples of screen reader and voice input interactions, I’m not sure if readers understand what the impact really is and why it is important. --- techniques/aria/ARIA14.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 0940c7ba5c..f7f3872a65 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -2,12 +2,13 @@ - Using aria-label to provide an invisible label where a visible label cannot be used + + Using aria-label to provide an accessible name where a visible label cannot be used -

Using aria-label to provide an invisible label where a visible label cannot be used

+

Using aria-label to provide an accessible name where a visible label cannot be used

ID: ARIA14

Technology: aria

@@ -19,22 +20,22 @@

When to Use

Description

-

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up divs (light boxes) to indicate the control for closing the div. +

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the “×” button closes the dialog, users wit assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

-

In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

+

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead.

-

In other situations, elements can be given the attribute aria-label to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a div set to contentEditable is used instead of native form elements such as input type="text" or textarea in order to provide a richer text editing experience.

+

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls cannot techniques for native HTML controls, like using a <label> element with the for attribute. When a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea>, in order to provide a richer text editing experience, it needs an accessible name provided by aria-label or aria-labelledby.

Examples

-

A close button in a pop-up box

+

A close button in a dialog

-

On a page, a link displays a pop-up box (a div) with additional information. The 'close' element is implemented as a button containing merely the letter 'X'. The property aria-label="close" is used to provide an accessible name to the button.

+

On a page, a button displays a dialog (a <div> element) with additional information. The “close” element is implemented as a <button> containing merely the symbol “×”. The property aria-label="close" is used to provide an accessible name to the button.

<div id="box">
    This is a pop-up box.
-   <button aria-label="Close">X</button>
+   <button aria-label="Close">×</button>
 </div>

Working example: Close button example.

@@ -56,7 +57,7 @@

A phone number with multiple fields

Tests

Procedure

-

For elements that use aria-label: +

For elements that use the aria-label attribute:

  1. Check that the value of the aria-label attribute properly describes the purpose of an element where user input is required From b06d50d4e3182692e0c82eccff69ced8e2b35508 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Thu, 3 Jul 2025 11:35:33 +0200 Subject: [PATCH 03/13] Make it more XML compatible --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index f7f3872a65..b12aa12104 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -2,7 +2,7 @@ - + Using aria-label to provide an accessible name where a visible label cannot be used From 5591aeb29b07e8e55ce5a14d31db07066b488628 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Thu, 3 Jul 2025 11:57:50 +0200 Subject: [PATCH 04/13] Typos --- techniques/aria/ARIA14.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index b12aa12104..e024ef63dd 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -20,11 +20,11 @@

    When to Use

Description

-

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the “×” button closes the dialog, users wit assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”. +

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the “×” button closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead.

-

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls cannot techniques for native HTML controls, like using a <label> element with the for attribute. When a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea>, in order to provide a richer text editing experience, it needs an accessible name provided by aria-label or aria-labelledby.

+

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls can’t use techniques for native HTML controls, like using a <label> element with the for attribute. When a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea>, in order to provide a richer text editing experience, it needs an accessible name provided by aria-label or aria-labelledby.

@@ -93,4 +93,4 @@

Resources

- \ No newline at end of file + From e8b2c18123c659f08c58aaf2bcb473527f1bb5e8 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 3 Jul 2025 23:15:11 +0100 Subject: [PATCH 05/13] Update techniques/aria/ARIA14.html --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index e024ef63dd..bfbb64ebdb 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -34,7 +34,7 @@

A close button in a dialog

On a page, a button displays a dialog (a <div> element) with additional information. The “close” element is implemented as a <button> containing merely the symbol “×”. The property aria-label="close" is used to provide an accessible name to the button.

<div id="box">
-   This is a pop-up box.
+   This is a dialog.
    <button aria-label="Close">×</button>
 </div>

Working example: Close button example. From b07f06f8cc4d52734eb9f94b7bba4753f373c954 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Fri, 4 Jul 2025 12:09:52 +0200 Subject: [PATCH 06/13] Changed working example Working example is now using an html dialog and also some more styling, just to be fancy. I also synced the example back to the technique. --- techniques/aria/ARIA14.html | 12 ++--- .../index.html | 51 +++++++++++++++++++ .../aria-label-invisible-label-box/index.html | 36 ------------- 3 files changed, 57 insertions(+), 42 deletions(-) create mode 100644 working-examples/aria-label-accessible-name-dialog/index.html delete mode 100644 working-examples/aria-label-invisible-label-box/index.html diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index e024ef63dd..2c9b499d3b 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -33,11 +33,11 @@

Examples

A close button in a dialog

On a page, a button displays a dialog (a <div> element) with additional information. The “close” element is implemented as a <button> containing merely the symbol “×”. The property aria-label="close" is used to provide an accessible name to the button.

- 
<div id="box">
-   This is a pop-up box.
-   <button aria-label="Close">×</button>
-</div>
-

Working example: Close button example. + 

<dialog id="dialog">
+  This is the content of the dialog.
+  <button aria-label="Close">×</button>
+</dialog>
+

Working example: Close button example.

@@ -93,4 +93,4 @@

Resources

- + \ No newline at end of file diff --git a/working-examples/aria-label-accessible-name-dialog/index.html b/working-examples/aria-label-accessible-name-dialog/index.html new file mode 100644 index 0000000000..a65effcec1 --- /dev/null +++ b/working-examples/aria-label-accessible-name-dialog/index.html @@ -0,0 +1,51 @@ + + + + + + aria-label Example: close button + + + + + + + +

+ + + This is the content of the dialog. + + + + + + \ No newline at end of file diff --git a/working-examples/aria-label-invisible-label-box/index.html b/working-examples/aria-label-invisible-label-box/index.html deleted file mode 100644 index 0eec3741ee..0000000000 --- a/working-examples/aria-label-invisible-label-box/index.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - aria-label: 2. Example close-button - - - - - - - -

Display a div box

- -
- This is a div box. - -
- - - \ No newline at end of file From 3028a14721383c9dc87f0abdac5400fc9f6a6f15 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Fri, 4 Jul 2025 12:13:45 +0200 Subject: [PATCH 07/13] Re-add dialog stuff after the merge into my branch overwrote my changes --- techniques/aria/ARIA14.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index f47f61a349..4badbb5504 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -33,11 +33,11 @@

Examples

A close button in a dialog

On a page, a button displays a dialog (a <div> element) with additional information. The “close” element is implemented as a <button> containing merely the symbol “×”. The property aria-label="close" is used to provide an accessible name to the button.

- 
<div id="box">
-   This is a pop-up box.
-   <button aria-label="Close">×</button>
-</div>
-

Working example: Close button example. + 

<dialog id="dialog">
+  This is the content of the dialog.
+  <button aria-label="Close">×</button>
+</dialog>
+

Working example: Close button example.

From f9ecb0e90ad371886416c52cb84717feaaad80e0 Mon Sep 17 00:00:00 2001 From: Eric Eggert Date: Fri, 4 Jul 2025 12:20:35 +0200 Subject: [PATCH 08/13] Update techniques/aria/ARIA14.html Co-authored-by: Hidde de Vries --- techniques/aria/ARIA14.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 4badbb5504..21005a9674 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -24,7 +24,9 @@

Description

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead.

-

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls can’t use techniques for native HTML controls, like using a <label> element with the for attribute. When a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea>, in order to provide a richer text editing experience, it needs an accessible name provided by aria-label or aria-labelledby.

+

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls can’t use techniques for native HTML controls, like using a <label> element with the for attribute.

+ +

For instance, aria-label or aria-labelledby are the most suitable way to provide an accessible name when a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea> in order to provide a richer text editing experience.

From 702b11f935c9ceafeada90977ef6c5f4a65e095f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 8 Aug 2025 16:44:05 +0100 Subject: [PATCH 09/13] Update techniques/aria/ARIA14.html --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index fed882d8fc..a17bb43ab0 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -22,7 +22,7 @@

Description

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead.

-

The aria-label attribute can also be used to provide an accessible name for custom controls. Custom controls can’t use techniques for native HTML controls, like using a <label> element with the for attribute.

+

The aria-label attribute can also be used to provide an accessible name for custom controls that are not labelable elements, and cannot therefore use a <label> element with the for attribute.

For instance, aria-label or aria-labelledby are the most suitable way to provide an accessible name when a <div> element is made editable using the contentEditable attribute, instead of native form elements such as <input type="text"> or <textarea> in order to provide a richer text editing experience.

From 529c8d5ea136251d13bc87c8b459e745ddcf6cba Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 8 Aug 2025 16:44:16 +0100 Subject: [PATCH 10/13] Update techniques/aria/ARIA14.html --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index a17bb43ab0..c70f412bdd 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -20,7 +20,7 @@

When to Use

Description

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the “×” button closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

-

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead.

+

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implict or explicit role that supports naming.

The aria-label attribute can also be used to provide an accessible name for custom controls that are not labelable elements, and cannot therefore use a <label> element with the for attribute.

From b69eee7aff17915f892c1da48cba16a54fb3373f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 22 Sep 2025 17:59:19 +0100 Subject: [PATCH 11/13] Update techniques/aria/ARIA14.html Co-authored-by: Mike Gower --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index c70f412bdd..44f0976c5c 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -18,7 +18,7 @@

When to Use

Description

-

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the “×” button closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”. +

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “×” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implict or explicit role that supports naming.

From 6458f3d57fe85a62cc1ec3df2b5439eb2498947d Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 22 Sep 2025 18:03:34 +0100 Subject: [PATCH 12/13] typo --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 44f0976c5c..579b711de9 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -20,7 +20,7 @@

When to Use

Description

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “×” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

-

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implict or explicit role that supports naming.

+

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implicit or explicit role that supports naming.

The aria-label attribute can also be used to provide an accessible name for custom controls that are not labelable elements, and cannot therefore use a <label> element with the for attribute.

From cd3eaf4de2525697ce7ddc74a29b0a8718bae128 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 22 Sep 2025 18:19:59 +0100 Subject: [PATCH 13/13] Update techniques/aria/ARIA14.html --- techniques/aria/ARIA14.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/techniques/aria/ARIA14.html b/techniques/aria/ARIA14.html index 579b711de9..67d9f8be0f 100644 --- a/techniques/aria/ARIA14.html +++ b/techniques/aria/ARIA14.html @@ -20,7 +20,7 @@

When to Use

Description

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the “×” often used in the top-right corner of dialogs to indicate the control for closing the dialog. While it might be visually clear that the button with the “×” symbol closes the dialog, users with assistive technologies rely on accessible names that clearly communicate the purpose of components, in this case “Close”.

-

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implicit or explicit role that supports naming.

+

When no clear visible text label is available due to design decisions, the accessible name can be set by using the aria-label attribute instead, provided that the element has an implicit or explicit role that supports naming.

The aria-label attribute can also be used to provide an accessible name for custom controls that are not labelable elements, and cannot therefore use a <label> element with the for attribute.