| title |
Lists |
| chapter |
Writing Code |
| style |
img {
width: 100px;
height: 100px;
}
|
| layout_data |
| examples |
| title |
description |
code |
Semantic Lists Using HTML |
HTML provides tags that express lists. Most likely you are already familiar with the
`ul` (unordered list) and `ol` (ordered list) tags.
In the example below, the list is correctly announced by screen readers as a list with three items.
1. Turn on VoiceOver with <kbd>Cmd</kbd> + <kbd>F5</kbd>.
2. Press <kbd>Ctrl</kbd> + <kbd>Opt</kbd> + <kbd>Cmd</kbd> + <kbd>h</kbd> repeatedly until you have jumped to the Editor Output heading.
3. Press <kbd>Ctrl</kbd> + <kbd>Opt</kbd> + <kbd>Right Arrow</kbd>.
VoiceOver will announce 'List 3 items'.
|
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
</ul>
|
|
| title |
description |
code |
Semantic List Using ARIA Roles |
The list below uses ARIA roles to express the semantics of a list from a generic div structure.
This approach to expressing list structure can be used if it is not possible to use the native
HTML ```list``` tags.
Notice that the default list styling is not applied. That is because the browser's default
stylesheet targets ```ul``` and ```ol``` tags.
In the example below, the list is correctly announced by screen readers as a list with three items.
|
<div role="list">
<div role="listitem">Sea</div>
<div role="listitem">Surf</div>
<div role="listitem">Sun</div>
</div>
|
|
| title |
description |
code |
assertion |
Unsemantic List exercise |
Update the example below so that the items are expressed as a list. The easiest way to
make this semantic is to use a ```list``` tag. If that is not
possible, wrap the elements in a container and give
it a role of ```list```. The individual items will need to be identified with a role of ```listitem```.
|
<div>
<span>A house of straw</span>
<span>A house of sticks</span>
<span>A house of bricks</span>
</div>
|
assert(
dom.querySelector('[role="list"]') || dom.querySelector('ul') || dom.querySelector('ol'),
"You should create a wrapping element for the list. Either a 'ul', 'li' OR a 'div' with the role 'list'."
);
assert(
dom.querySelectorAll('[role="listitem"]').length ==3 || dom.querySelectorAll('li').length == 3,
"Wrap the items in an 'li' element or in a 'span' OR 'div' with the role 'listitem'."
);
|
|
|
|
Semantic lists help screen readers understand the type of the element and the
number of items in the element, and provide
easier navigation via list commands specific to screen readers.