From b31d4f4e58ec997c18984ae436f8600d8be5b0a5 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Sat, 11 Jan 2025 09:07:38 -0800 Subject: [PATCH 1/3] Update names-and-descriptions-practice.html My suggested wording approach, based on #3211 --- .../names-and-descriptions-practice.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html index d57cc649a3..51da9ad843 100644 --- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html +++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html @@ -1360,11 +1360,11 @@

Accessible Name Guidance by Role tablist - Recommended + Required **only if** a visible label is present
  • Helps screen reader users understand the context and purpose of the tablist.
    • -
  • Use aria-labelledby if a visible label is present, otherwise use aria-label.
    • +
  • Use aria-labelledby if a visible label is present, otherwise optionally use aria-label.
  • See the Carousel Pattern and Tabs Pattern.
From fcdfa085f9cc29fcd29cf0aff46816bc608cd29e Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Sat, 11 Jan 2025 09:13:48 -0800 Subject: [PATCH 2/3] Update content/practices/names-and-descriptions/names-and-descriptions-practice.html I think "name" may provide be less easily misunderstood in this context --- .../names-and-descriptions/names-and-descriptions-practice.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html index 51da9ad843..6d30cb1f44 100644 --- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html +++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html @@ -1364,7 +1364,7 @@

Accessible Name Guidance by Role
  • Helps screen reader users understand the context and purpose of the tablist.
    • -
  • Use aria-labelledby if a visible label is present, otherwise optionally use aria-label.
    • +
  • Use aria-labelledby if a visible label is present, otherwise optionally name with aria-label.
  • See the Carousel Pattern and Tabs Pattern.
From 2791fe88a398d7ff18ba4762e29e66efc377d3a7 Mon Sep 17 00:00:00 2001 From: Mike Gower Date: Tue, 14 Jan 2025 06:58:30 -0800 Subject: [PATCH 3/3] Update tabs-pattern.html Update guidance in APG tabs pattern to match --- content/patterns/tabs/tabs-pattern.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/patterns/tabs/tabs-pattern.html b/content/patterns/tabs/tabs-pattern.html index c32132b334..2418ecde3b 100644 --- a/content/patterns/tabs/tabs-pattern.html +++ b/content/patterns/tabs/tabs-pattern.html @@ -126,7 +126,7 @@

WAI-ARIA Roles, States, and Properties

  • Each element that contains the content panel for a tab has role tabpanel.
  • If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labelling element. - Otherwise, the tablist element has a label provided by aria-label. + Otherwise, the tablist element has an optional name provided by aria-label.
  • Each element with role tab has the property aria-controls referring to its associated tabpanel element.
  • The active tab element has the state aria-selected set to true and all other tab elements have it set to false.