< Back to Demos | Learn more at PaulJAdam.com >

Accessibility of Repeating Buttons with Duplicate Accessible Names

Problem: Retail sites have pages of products with the same group of user inteface components repeating themselves for each different product. The accessible names of each repeated UI component is not unique so we need a way to relate each group of product buttons to the unique product name.

WAI-ARIA Grouping Roles & aria-labelledby

Florida's Orangest Oranges

The orangest oranges out of Florida!

$2.50
Buy 2, Get 1 Free!

Granny Smith Apples

Apples like granny put in her apple pies!

$1.50
Now! Save over 70%

Hill Country Peaches

Millions of Peaches could be yours!

$2.00
Now! Save over 70%

WAI-ARIA aria-labelledby for Every UI Component

Florida's Orangest Oranges

The orangest oranges out of Florida!

$2.50
Buy 2, Get 1 Free!

Granny Smith Apples

Apples like granny put in her apple pies!

$1.50
Now! Save over 70%

Hill Country Peaches

Millions of Peaches could be yours!

$2.00
Now! Save over 70%

WAI-ARIA role=complementary & aria-labelledby

Florida's Orangest Oranges

The orangest oranges out of Florida!

$2.50
Buy 2, Get 1 Free!

Granny Smith Apples

Apples like granny put in her apple pies!

$1.50
Now! Save over 70%

Hill Country Peaches

Millions of Peaches could be yours!

$2.00
Now! Save over 70%

HTML4 <fieldset> <legend>

Florida's Orangest Oranges

The orangest oranges out of Florida!

$2.50
Buy 2, Get 1 Free!

Granny Smith Apples

Apples like granny put in her apple pies!

$1.50
Now! Save over 70%

Hill Country Peaches

Millions of Peaches could be yours!

$2.00
Now! Save over 70%