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

From Level Access Web Labs
Jump to navigation Jump to search
Line 63: Line 63:
 
</html>
 
</html>
 
===Code snippet===
 
===Code snippet===
−
<syntaxhighlight lang="html4strict">
+
 
−
  <div role="list" aria-owns="na1 na2 na3 sa1 sa2 sa3 eu1 eu2 eu3" >
 
−
    <ul role="presentation">
 
−
      <li id="na1" role="listitem">United States</li>
 
−
      <li id="na2" role="listitem">Canada</li>
 
−
      <li id="na3" role="listitem">Mexico</li>
 
−
    </ul>
 
−
    <ul role="presentation">
 
−
      <li id="sa1" role="listitem">Brazil</li>
 
−
      <li id="sa2" role="listitem">Columbia</li>
 
−
      <li id="sa3" role="listitem">Argentia</li>
 
−
    </ul>
 
−
    <ul role="presentation">
 
−
      <li id="eu1" role="listitem">France</li>
 
−
      <li id="eu2" role="listitem">Germany</li>
 
−
      <li id="eu3" role="listitem">Spain</li>
 
−
    </ul>
 
−
</syntaxhighlight>
 
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Revision as of 22:18, 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

Retrieved from "https://labs.levelaccess.com/index.php?title=ARIA_List_using_aria-owns&oldid=5008"