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

From Level Access Web Labs
Jump to navigation Jump to search
(Three ul lists consolidated into ARIA list using aria-owns)
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