Difference between revisions of "ARIA List using aria-owns"
Jump to navigation
Jump to search
(Created page with "=ARIA based list using aria-owns= Below are several ul lists converted into a single ARIA-based list using ARIA roles and property without restructuring the code. ==Three ul l...") |
|||
| Line 3: | Line 3: | ||
==Three ul lists== | ==Three ul lists== | ||
<html> | <html> | ||
| + | <head> | ||
| + | <body> | ||
<ul> | <ul> | ||
<li>United States</li> | <li>United States</li> | ||
| Line 18: | Line 20: | ||
<li>Spain</li> | <li>Spain</li> | ||
</ul> | </ul> | ||
| + | </body> | ||
</html> | </html> | ||
===Code snippet=== | ===Code snippet=== | ||
| Line 39: | Line 42: | ||
==Three ul lists consolidated into ARIA list using aria-owns== | ==Three ul lists consolidated into ARIA list using aria-owns== | ||
<html> | <html> | ||
| + | <head> | ||
| + | <body> | ||
<div role="list" aria-owns="na1 na2 na3 sa1 sa2 sa3 eu1 eu2 eu3" > | <div role="list" aria-owns="na1 na2 na3 sa1 sa2 sa3 eu1 eu2 eu3" > | ||
<ul role="presentation"> | <ul role="presentation"> | ||
| Line 55: | Line 60: | ||
<li id="eu3" role="listitem">Spain</li> | <li id="eu3" role="listitem">Spain</li> | ||
</ul> | </ul> | ||
| + | </body> | ||
</html> | </html> | ||
===Code snippet=== | ===Code snippet=== | ||
| Line 75: | Line 81: | ||
</ul> | </ul> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
[[Category:ARIA]] | [[Category:ARIA]] | ||
Revision as of 22:04, 10 April 2018
Contents
ARIA based list using aria-owns
Below are several ul lists converted into a single ARIA-based list using ARIA roles and property without restructuring the code.
Three ul lists
- United States
- Canada
- Mexico
- Brazil
- Columbia
- Argentia
- France
- Germany
- Spain
Code snippet
<syntaxhighlight lang="html4strict">
- United States
- Canada
- Mexico
- Brazil
- Columbia
- Argentia
- France
- Germany
- Spain
</syntaxhighlight>
Three ul lists consolidated into ARIA list using aria-owns
- United States
- Canada
- Mexico
- Brazil
- Columbia
- Argentia
- France
- Germany
- Spain
Code snippet
<syntaxhighlight lang="html4strict">
- United States
- Canada
- Mexico
- Brazil
- Columbia
- Argentia
- France
- Germany
- Spain
</syntaxhighlight>
