Manual Test Cases for ARIA Controls Duplicate IDs - Test 1436

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

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

Test Logic:

Tests for elements with aria-controls 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-controls values are ignored
Multiple space-separated IDs in aria-controls are supported - fails if any referenced ID is duplicated

Common Use Cases:

Tabs with aria-controls pointing to tabpanels
Accordion buttons controlling collapsible panels
Comboboxes controlling listboxes
Any interactive element that controls another element

N/A Tests - Should Not Be Tested

Element without aria-controls attribute

Elements without aria-controls are not tested

Element with empty aria-controls attribute

Empty aria-controls values are ignored

Hidden element with aria-controls (display:none)

Panel 1

Panel 2

Hidden elements are excluded from testing

Hidden element with aria-controls (visibility:hidden)

Panel 1

Panel 2

Visibility hidden elements are not tested

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

Panel 1

Panel 2

aria-hidden elements are not available to assistive technologies

PASS Tests - ARIA Controls Pointing to Unique IDs

Single element with aria-controls pointing to unique ID

Panel Content

ID "uniquePanel1" appears only once in the DOM

Multiple elements with aria-controls pointing to different unique IDs

Panel 1

Panel 2

Each aria-controls points to a unique ID

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

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

Element with aria-controls containing multiple unique IDs

Panel 1

Panel 2

Multiple space-separated IDs, all unique

ARIA tab/tabpanel with unique IDs

Content 1

Common tab pattern with unique tabpanel ID

Combobox with aria-controls pointing to unique listbox

Combobox pattern with unique listbox ID

Element with aria-controls to single ID among other duplicate IDs

Unique Panel

Duplicate 1

Duplicate 2

aria-controls points to unique ID, even though other duplicates exist in DOM

FAIL Tests - ARIA Controls Pointing to Duplicate IDs

Single element with aria-controls pointing to duplicate ID

Panel 1

Panel 2

ID "dupPanel1" appears twice - FAILS

Multiple elements with aria-controls pointing to same duplicate ID

Panel 1

Panel 2

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

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

Panel 1a

Panel 1b

Panel 2

One of the referenced IDs is duplicated - FAILS

Element with aria-controls containing multiple duplicate IDs

Panel 1a

Panel 1b

Panel 2a

Panel 2b

Both referenced IDs are duplicated - FAILS

ARIA tab with aria-controls pointing to duplicate tabpanel ID

Content 1

Content 2

Tab pattern with duplicate tabpanel ID - FAILS

Combobox with aria-controls pointing to duplicate listbox ID

Combobox pattern with duplicate listbox ID - FAILS

Accordion button with aria-controls pointing to duplicate panel ID

Content 1

Content 2

Accordion pattern with duplicate panel ID - FAILS

Link with aria-controls pointing to duplicate ID

Show Section

Section 1

Section 2

Links can also use aria-controls - FAILS with duplicate ID

FAIL Tests - Edge Cases

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

Panel 1

Panel 2

Whitespace is trimmed - still detects duplicate ID

Div with role and aria-controls pointing to duplicate ID

Toggle

Target 1

Target 2

Non-button elements can also use aria-controls - FAILS

Span with aria-controls pointing to duplicate ID

Control

Content 1

Content 2

Any element can have aria-controls - FAILS with duplicate ID

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

Visible Panel

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

FAIL Tests - Multiple Failures

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

Panel 1

Panel 2

Three buttons all reference duplicate ID - 3 failures

Mix of passing and failing elements (1 failure)

Panel 1a

Panel 1b

Panel 2

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

Multiple different duplicate IDs (2 failures)

Panel 1a

Panel 1b

Panel 2a

Panel 2b

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

Real World Examples

PASS: Proper tab panel implementation

Home Content

Profile Content

Settings Content

Each tab controls a unique tabpanel - PASSES

FAIL: Accordion with duplicate panel IDs

Answer 1

Answer 2

Answer 3 (duplicate ID!)

Third accordion section reuses ID from first section - both buttons with aria-controls="realAccordion1" FAIL (2 failures)

PASS: Combobox with unique listbox

Choose a fruit:

Combobox correctly references unique listbox ID - PASSES

FAIL: Menu button controlling duplicate menu IDs

Two menus with same ID - both buttons FAIL (2 failures)