Difference between revisions of "ARIA List using aria-owns"

From Level Access Web Labs
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

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>