Difference between revisions of "ARIA List using aria-owns"
Jump to navigation
Jump to search
(→Three ul lists consolidated into ARIA list without aria-owns) |
|||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
Below are several ul lists converted into a single ARIA-based list using ARIA roles and property without restructuring the code. | Below are several ul lists converted into a single ARIA-based list using ARIA roles and property without restructuring the code. | ||
==Three ul lists== | ==Three ul lists== | ||
| Line 22: | 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". | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | ==Three ul lists consolidated into ARIA list | ||
<html> | <html> | ||
<head> | <head> | ||
<body> | <body> | ||
| − | <div role="list | + | <div role="list"> |
<ul role="presentation"> | <ul role="presentation"> | ||
<li id="na1" role="listitem">United States</li> | <li id="na1" role="listitem">United States</li> | ||
| Line 62: | Line 44: | ||
</body> | </body> | ||
</html> | </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== | ||
| + | <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 80: | Line 93: | ||
<li id="eu3" role="listitem">Spain</li> | <li id="eu3" role="listitem">Spain</li> | ||
</ul> | </ul> | ||
| − | </ | + | </body> |
| − | + | </html> | |
| + | ===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. | ||
[[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.
Contents
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.
