Posted on by Léonie Watson in Design and development
Tags: Assistive Technology, Code, Foundations, WCAG
A list is generally agreed to be a series of words or phrases that are grouped together for a reason. That reason might be to remember the items we want from the store, to share our top five favourite movies, or to write down the steps needed to complete a task.
Whether lists are vertical or horizontal, the design usually makes it clear that all the items belong together. To offer a comparable experience to people who cannot see the way content is designed, it is important to make the same information available in the HTML code.
People browsing with a desktop screen reader or browsing with a mobile screen reader have commands and gestures for navigating between lists and list items. When a screen reader encounters a list it will announce “list” and how many items are in the list.
Lists also improve the readability of content. Breaking text into lists helps everyone, but in particular people who have cognitive or learning disabilities.
Lists should be used to group together collections of related items where it is helpful for the user to know there is a relationship between them.
Unordered lists are ones where the order of the items does not matter. For example, lists of:
Ordered lists are ones where the order of the items does matter. For example, lists of:
Description lists (previously known as definition lists) are ones where the list contains a number of terms and each term has one or more definitions. For example, lists of:
Start by thinking about how lists will appear in your designs. Make sure it's possible to tell when a collection of items belongs to a list. If the order of items in the list is important, include some variations that have sequential bullet markers. For description lists, make sure your designs clearly establish a relationship between each term/definition pair in the list.
As you plan your content, think about how and when to use lists. As a general rule, if you have two or three items it's OK to include them within a sentence. Any more than that and it's better to put them into a list.
Think about how your lists work alongside other structural elements such as headings and landmarks. For example, news items or products on a page may work better as a list than lots of headings.
If the order of items in the list does not matter use the <ul> and <li> elements. This is useful for main navigation lists for example.
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a>
<li><a href="news.html">News</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>If the order of items in the list does matter use the <ol> and <li> elements. This is useful for steps and instructions.
<ol>
<li>Open your browser and go to the URL</li>
<li>Use f12 to open the developer tools</li>
<li>Use the developer tools to inspect the accessibility properties of elements</li>
</ol>Do not use list-style-type:none; on an <ol> element because it causes browsers to treat it like an <ul> which means screen reader users will not be aware that it's an ordered list.
If the list contains term and description pairs use the <dl>, <dt> and <dd> elements. This is useful for definitions such as in a glossary.
<dl>
<dt>HTML</dt>
<dd>A markup language used to give content structure and semantics</dd>
<dt>CSS</dt>
<dd>A style sheet language used to design and present content</dd>
<dt>JavaScript</dt>
<dd>A scripting language used to give content functionality and interaction</dd>
<dt>ARIA</dt>
<dd>A markup language used to polyfill accessibility information</dd>
</dl>
Use Capslock + Space to turn on scan mode, then use l to move to the next list or Shift + l to move to the previous list.
Use Capslock + Space to turn on scan mode, then use i to move to the next list item or Shift + i to move to the previous list item.
Use l to move to the next list or Shift + l to move to the previous list.
Use i to move to the next list item or Shift + i to move to the previous list item.
Use l to move to the next list or Shift + l to move to the previous list.
Use i to move to the next list item or Shift + i to move to the previous list item.
Use Command, Option, Command + x to move to the next list, or Shift, Control, Option, Command + x to move to the previous list.
Swipe right to move to the next item in a list and swipe left to move the the previous item.
Swipe right to move to the next item in a list and swipe left to move the the previous item.
Use the three-finger tap to announce the position of an item within a list.
Read more accessibility foundations posts or sign up for Accessibility Unlocked, our free six-day newsletter series designed to help you kick-start accessibility.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。