Manual Test Cases for ARIA Labelledby Duplicate IDs - Test 1437

Test 1437: One or more elements, not intentionally hidden in the DOM and available to assistive technologies, has an aria-labelledby attribute that is set to a duplicate id.

Elements with aria-labelledby are outlined in purple. Duplicate IDs are highlighted in red, unique IDs in green.

Test Logic:

Tests for elements with aria-labelledby attribute pointing to IDs that appear multiple times in the DOM
Elements must not be intentionally hidden (display:none, visibility:hidden, aria-hidden="true")
Elements must be available to assistive technologies
Empty aria-labelledby values are ignored
Multiple space-separated IDs in aria-labelledby are supported - fails if any referenced ID is duplicated

Common Use Cases:

Form inputs labeled by visible text elements (span, label, div)
Dialogs/modals labeled by their title/heading
Regions/sections labeled by headings
Custom widgets labeled by descriptive text
Elements with multiple labels (concatenated accessible name)

N/A Tests - Should Not Be Tested

Element without aria-labelledby attribute

Name

Elements without aria-labelledby are not tested

Element with empty aria-labelledby attribute

Empty aria-labelledby values are ignored

Hidden element with aria-labelledby (display:none)

Username Username

Hidden elements are excluded from testing

Hidden element with aria-labelledby (visibility:hidden)

Password Password

Visibility hidden elements are not tested

Element with aria-hidden="true" and aria-labelledby

Phone Phone

aria-hidden elements are not available to assistive technologies

PASS Tests - ARIA Labelledby Pointing to Unique IDs

Form input with aria-labelledby pointing to unique label

First Name

Input labeled by unique span ID

Multiple inputs each with unique labels

Email Phone

Each input has its own unique label ID

Dialog labeled by unique title

Dialog labeled by its unique heading ID

Region labeled by unique heading

Latest News

News content here...

Section labeled by its unique heading

Element with multiple unique label IDs (concatenated)

Billing Address

Input labeled by two unique IDs - accessible name = "Billing Address"

Element with aria-labelledby pointing to non-existent but unique ID

Non-existent IDs are still considered unique (no duplicates)

Button labeled by unique text

Submit Form

Icon button gets accessible name from unique label

Custom widget labeled by unique description

Volume

50%

Slider labeled by unique text element

FAIL Tests - ARIA Labelledby Pointing to Duplicate IDs

Input with aria-labelledby pointing to duplicate label ID

Username Username

Label ID appears twice - input FAILS

Multiple inputs with aria-labelledby pointing to same duplicate ID

Name Name

Two inputs both reference duplicate ID - both FAIL (2 failures)

Dialog with aria-labelledby pointing to duplicate title ID

Two dialogs with duplicate title ID - second dialog FAILS

Element with aria-labelledby containing one duplicate ID among multiple IDs

First Name First

One of the referenced IDs is duplicated - input FAILS

Element with aria-labelledby containing multiple duplicate IDs

Street Address Street Address

Both referenced IDs are duplicated - input FAILS

Region with aria-labelledby pointing to duplicate heading ID

News

Two sections with duplicate heading ID - second section FAILS

Button with aria-labelledby pointing to duplicate text ID

Save Save

Button references duplicate label ID - FAILS

Custom widget with aria-labelledby pointing to duplicate description ID

Progress

50%

Progress

Progressbar references duplicate label ID - FAILS

FAIL Tests - Edge Cases

Element with aria-labelledby with extra whitespace pointing to duplicate ID

City City

Whitespace is trimmed - still detects duplicate ID

Div with aria-labelledby pointing to duplicate ID

Container

Content

Container

Any element can use aria-labelledby - FAILS with duplicate ID

Textarea with aria-labelledby pointing to duplicate ID

Comments Comments

Textarea references duplicate label ID - FAILS

Element with aria-labelledby to ID that exists in both visible and hidden elements

Status

Active

ID appears in both visible and hidden elements - still duplicated, FAILS

FAIL Tests - Multiple Failures

Three elements with aria-labelledby pointing to duplicate IDs (3 failures)

Country Country

Three elements all reference duplicate ID - 3 failures

Mix of passing and failing elements (1 failure)

Age Email Age

First input FAILS (duplicate), second input PASSES (unique)

Multiple different duplicate IDs (2 failures)

First Name First Name Last Name Last Name

Each input references a different duplicate ID - both FAIL (2 failures)

Real World Examples

PASS: Proper form with unique labels

Each input has unique label ID - PASSES

FAIL: Two forms with duplicate label IDs

Two forms reuse same label ID - both inputs FAIL (2 failures)

PASS: Dialog with unique title and description

Dialog properly labeled by unique title - PASSES

PASS: Multi-part label (concatenated accessible name)

Billing Address Line 1

Input labeled by three unique IDs - accessible name = "Billing Address Line 1" - PASSES

FAIL: Multiple sections with duplicate heading IDs

Products

Product list...

Products

Another product list...

Two sections with duplicate heading ID - second section FAILS

FAIL: Icon buttons with duplicate label IDs

Save Save

Two icon buttons reference duplicate label ID - both FAIL (2 failures)