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

From Level Access Web Labs
Jump to navigation Jump to search
(Test Results)
(Three ul lists consolidated into ARIA list without aria-owns)
 
(7 intermediate revisions by the same user not shown)
Line 21: Line 21:
 
</body>
 
</body>
 
</html>
 
</html>
 +
==Three ul lists consolidated into ARIA list without aria-owns==
 +
List items are not direct child of role="list" element but the ul element in between has a role="presentation".
 +
<html>
 +
<head>
 +
<body>
 +
  <div role="list">
 +
    <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>
 +
</body>
 +
</html>
 +
===Test Results===
 +
TBD
 +
 +
==Three ul lists consolidated into ARIA list without aria-owns==
 +
List items are not direct child of role="list" element but the ul element in between has a role="none".
 +
<html>
 +
<head>
 +
<body>
 +
  <div role="list">
 +
    <ul role="none">
 +
      <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="none">
 +
      <li id="sa1" role="listitem">Brazil</li>
 +
      <li id="sa2" role="listitem">Columbia</li>
 +
      <li id="sa3" role="listitem">Argentia</li>
 +
    </ul>
 +
    <ul role="none">
 +
      <li id="eu1" role="listitem">France</li>
 +
      <li id="eu2" role="listitem">Germany</li>
 +
      <li id="eu3" role="listitem">Spain</li>
 +
    </ul>
 +
</body>
 +
</html>
 +
===Test Results===
 +
TBD
 +
 
==Three ul lists consolidated into ARIA list using aria-owns==
 
==Three ul lists consolidated into ARIA list using aria-owns==
 
<html>
 
<html>
Line 43: Line 95:
 
</body>
 
</body>
 
</html>
 
</html>
==Test Results==
+
===Test Results===
 
JAWS 18 behaves differently between IE and Chrome. In IE, JAWS announces the list as having 18 items whereas in Chrome it announces as having 9 items. It appears in IE, JAWS 18 will also recognize list items that are not direct child of the role=list container element.
 
JAWS 18 behaves differently between IE and Chrome. In IE, JAWS announces the list as having 18 items whereas in Chrome it announces as having 9 items. It appears in IE, JAWS 18 will also recognize list items that are not direct child of the role=list container element.
 
[[Category:ARIA]]
 
[[Category:ARIA]]

Latest revision as of 22:55, 10 April 2018

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

Three ul lists consolidated into ARIA list without aria-owns

List items are not direct child of role="list" element but the ul element in between has a role="presentation".

  • United States
  • Canada
  • Mexico
  • Brazil
  • Columbia
  • Argentia
  • France
  • Germany
  • Spain

Test Results

TBD

Three ul lists consolidated into ARIA list without aria-owns

List items are not direct child of role="list" element but the ul element in between has a role="none".

  • United States
  • Canada
  • Mexico
  • Brazil
  • Columbia
  • Argentia
  • France
  • Germany
  • Spain

Test Results

TBD

Three ul lists consolidated into ARIA list using aria-owns

  • United States
  • Canada
  • Mexico
  • Brazil
  • Columbia
  • Argentia
  • France
  • Germany
  • Spain

Test Results

JAWS 18 behaves differently between IE and Chrome. In IE, JAWS announces the list as having 18 items whereas in Chrome it announces as having 9 items. It appears in IE, JAWS 18 will also recognize list items that are not direct child of the role=list container element.