{"id":3522,"date":"2025-10-22T11:23:39","date_gmt":"2025-10-22T18:23:39","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=3522"},"modified":"2026-04-16T15:51:43","modified_gmt":"2026-04-16T22:51:43","slug":"lists-and-accessibility","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/lists\/lists-and-accessibility\/","title":{"rendered":"Lists and Accessibility"},"content":{"rendered":"\n<p>This web page is intentionally created with accessibility errors to demonstrate the functionality of automatic accessibility checkers for web pages.&nbsp;<a href=\"https:\/\/wave.webaim.org\/report#\/https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/lists\/lists-and-accessibility\/\">View this webpage in an accessibility checker (WAVE)<\/a>&nbsp;to help identify accessibility issues.<\/p>\n\n\n\n<p>A numbered list is also referred to as an ordered list. A bulleted list is also referred to as an unordered list. <\/p>\n\n\n\n<p><strong>Error Types<\/strong>: Errors&nbsp;<strong>must<\/strong>&nbsp;be fixed. Alerts&nbsp;<strong>should<\/strong>&nbsp;be fixed. These fixes, both errors and alerts, improve the accessibility and usability of the content.<\/p>\n\n\n\n<p><strong>Best Practice<\/strong>:&nbsp;Using the appropriate tool to create lists. Lists also help people scan the content easily. <\/p>\n\n\n\n<p><strong>Assistive technology<\/strong>: Lists are identified by assistive technology, the number of items within them, and provide a way to navigate through them. <\/p>\n\n\n<section  class=\"wsu-section  wsu-color-background--white\"  >\r\n        \n\n<h2 class=\"wp-block-heading\">Fake Lists<\/h2>\n\n\n\n<p>Be sure to use the appropriate formatting tools to create lists. <\/p>\n\n\n<div class=\"wsu-row wsu-row--halves\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Fake Numbered (Ordered) List<\/h3>\n\n\n\n<p>1. This list<\/p>\n<p>2. Is Fake<\/p>\n<p>3. Created by just adding<\/p>\n<p>4. Numbers in front.<\/p>\n<p>5. Many editors will automatically convert to a numbered list when you start typing a number and period.<\/p>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Fake Bulleted (Unordered) List<\/h3>\n\n\n\n<p>* Another fake list<\/p>\n<p>&#8211; An asterick or dash <em>might be<\/em> flagged by accessibility checkers <\/p>\n<p>\u2219 Other forms of bullets (\u2219bullet, \u00b7middot, and \u25a0 blacksquare)<\/p>\n<p>\u2219 Will not be flagged by accessibilty checkers<\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n<p><strong>Error Type<\/strong>: Alert<\/p>\n\n\n\n<p><strong>Best Practice<\/strong>: Use the appropriate formatting tool to create lists. <\/p>\n\n    <\/section>\n\n<section  class=\"wsu-section  wsu-color-background--white\"  >\r\n        \n\n<h2>Nested Lists<\/h2>\n\n\n\n<p>Use appropriate formatting tools (indent and outdent) to create nested lists. Accessibility checkers will show the nested items as lists, too.<\/p>\n\n\n<div class=\"wsu-row wsu-row--halves\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Nested Numbered (Ordered) List<\/h3>\n\n\n\n<ol><li>Use the appropriate application tool for lists.<ol><li>Select the bullet (unordered) or numbered (ordered) list icon from the toolbar.<\/li><\/ol><\/li><li>Create the list.<ol><li>Select Enter to start a new item in the list.<\/li><li>Use the indent and outdent icons to properly nest items.<\/li><\/ol><\/li><\/ol>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Nested Bulleted (Unordered) List<\/h3>\n\n\n\n<ul><li>Logical Sequences lists follow a specific order<ul><li>Steps in a recipe or instructions<\/li><li>Top 10 books<\/li><\/ul><\/li><li>Unordered Collections don&#8217;t need a specific order<ul><li>Recipe ingredients <\/li><li>Lists of related links<\/li><\/ul><\/li><\/ul>\n\n<\/div>\r\n\n<\/div>\n\n\n<p><strong>Error Type<\/strong>: Alert. <\/p>\n\n\n\n<p><strong>Best Practice<\/strong>: Use the appropriate formatting tool to create nested lists. <\/p>\n\n    <\/section>\n\n<section  class=\"wsu-section  wsu-color-background--white\"  >\r\n        \n\n<h2>Empty Lists<\/h2>\n\n\n\n<p>Empty lists can confuse assistive technology. <\/p>\n\n\n<div class=\"wsu-row wsu-row--halves\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Empty Item in Numbered (Ordered) List<\/h3>\n\n\n\n<ol><li>Take this step first. <\/li><li>Then this step.<\/li><li><\/li><li>Finally, this step.<\/li><\/ol>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Empty Item in Bulleted (Unordered) List<\/h3>\n\n\n\n<ul><li>Collection item this<\/li><li>Collection item that<\/li><li><\/li><li>Collection item whatchamacallit <\/li><\/ul>\n\n\n\n<p><\/p>\n\n<\/div>\r\n\n<\/div>\n\n\n<p><strong>Error Type<\/strong>: Alert. Accessibility checkers may not identify the empty list item.<\/p>\n\n\n\n<p><strong>Best Practice<\/strong>: Don&#8217;t include empty list items. <\/p>\n\n    <\/section>\n\n<section  class=\"wsu-section wsu-width--full wsu-color-background--gray-5 wsu-spacing-after--large\"  >\r\n    <div class=\"wsu-section__inner wsu-width--content\">    \n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-block-gray\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-callout wsu-callout--color-crimson wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-color-background--white wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"accessibility-checks\">Accessibility Checks&nbsp;<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--medium\">Use this checklist as a guide to ensure your lists are in an accessible format.<\/p>\n\n\n\n<ul class=\"wsu-list--checkmark\"><li>Lists use <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/application-formatting-tools\/\">application formatting tools<\/a> or HTML tags. <strong><em>[automatic &amp; manual]<\/em><\/strong><\/li><li>Lists are properly nested. <strong><em>[automatic &amp; manual]<\/em><\/strong><\/li><li>Lists are not manually created. <strong><em>[automatic &amp; manual]<\/em><\/strong><\/li><\/ul>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/section>\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2>Tools for Web Pages<\/h2>\n\n\n\n<p><a href=\"https:\/\/wave.webaim.org\/\"><strong>WAVE<\/strong>&nbsp;(website)<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/wave.webaim.org\/extension\/\">browser extensions<\/a>: This is a full-page accessibility automatic check.<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section\"  >\r\n        \n\n<h2>Additional Support<\/h2>\n\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Analyze the Lists<\/h3>\n\n\n\n<p>Lists help organize content and make it easier to scan. Bulleted (ordered) lists show the relationship between items. Numbered lists provide the sequence of steps to take. Lists are helpful for more than 2\u20133 items.<\/p>\n\n\n\n<ul><li>Would the content be easier to understand and scan as a list?<\/li><li>Are there steps to take in a specific order?<\/li><\/ul>\n\n\n\n<p><i class=\"fa-solid fa-list-ol\"><\/i><\/p>\n\n<\/div>\r\n\n<\/div>\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3>Resources<\/h3>\n\n\n<ul class=\"wsu-content-list wsu-list--style-arrow wsu-list--columns-1 \">\n\t\t\t<li class=\"wsu-content-list__item\">\n\t\t\t<a href=\"https:\/\/blog.pope.tech\/2023\/09\/01\/accessible-lists\/\" class=\"wsu-content-list__item-title\">Beginner\u2019s guide to lists and how to make them accessible<\/a>\n\t\t\t<div class=\"wsu-content-list__item-details\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t<strong>Source:<\/strong> PopeTech\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\n<p>HTML lists are just lists that have the correct HTML behind them. When the HTML is correct, screen readers can navigate and read the list more easily. When writing content, lists group together related pieces of information.<\/p>\n\n\t\t\t\t\t\t\t<div class=\"wsu-content-list__item-taxonomies\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<strong>Tags:<\/strong>\n\t\t\t\t\t\t\tArticle\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/li>\n\t\t\t<li class=\"wsu-content-list__item\">\n\t\t\t<a href=\"https:\/\/tetralogical.com\/blog\/2022\/04\/29\/lists\/\" class=\"wsu-content-list__item-title\">Foundations: lists<\/a>\n\t\t\t<div class=\"wsu-content-list__item-details\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t<strong>Source:<\/strong> Tetra Logical\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\n<p>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 favorite movies, or to write down the steps needed to complete a task.<\/p>\n\n\t\t\t\t\t\t\t<div class=\"wsu-content-list__item-taxonomies\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<strong>Tags:<\/strong>\n\t\t\t\t\t\t\tArticle\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/li>\n\t\t\t<li class=\"wsu-content-list__item\">\n\t\t\t<a href=\"https:\/\/scottvinkle.com\/blogs\/work\/lists?_pos=2&amp;_sid=37034f289&amp;_ss=r\" class=\"wsu-content-list__item-title\">When to Use Lists and Why They Matter<\/a>\n\t\t\t<div class=\"wsu-content-list__item-details\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t<strong>Source:<\/strong> Scott Vinkle \t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\n<p>Using lists appropriately is crucial for accessibility, especially for screen reader users. Here\u2019s a breakdown of when to use different types of lists and why.<\/p>\n\n\t\t\t\t\t\t\t<div class=\"wsu-content-list__item-taxonomies\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<strong>Tags:<\/strong>\n\t\t\t\t\t\t\tArticle\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/li>\n\t\t\t<li class=\"wsu-content-list__item\">\n\t\t\t<a href=\"https:\/\/scottvinkle.com\/blogs\/work\/when-to-use-lists-for-better-accessibility\" class=\"wsu-content-list__item-title\">When to Use Lists\u00a0for Better Accessibility<\/a>\n\t\t\t<div class=\"wsu-content-list__item-details\">\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t<strong>Source:<\/strong> Scott Vinkle\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\n\n<p>When creating HTML content, using lists appropriately is crucial for accessibility, especially for screen reader users. Here\u2019s a breakdown of when to use different types of lists and why.<\/p>\n\n\t\t\t\t\t\t\t<div class=\"wsu-content-list__item-taxonomies\">\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<strong>Tags:<\/strong>\n\t\t\t\t\t\t\tArticle\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/li>\n\t<\/ul>\n\n<\/div>\r\n\n<\/div>\n    <\/section>","protected":false},"excerpt":{"rendered":"<p>Creating lists with application tools creates accessible and easy-to-scan content.<\/p>\n","protected":false},"author":2695,"featured_media":0,"parent":24,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[],"tags":[],"wsuwp_university_category":[],"wsuwp_university_location":[],"wsuwp_university_org":[],"_links":{"self":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/3522"}],"collection":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/users\/2695"}],"replies":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/comments?post=3522"}],"version-history":[{"count":26,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/3522\/revisions"}],"predecessor-version":[{"id":4007,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/3522\/revisions\/4007"}],"up":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/24"}],"wp:attachment":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=3522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/categories?post=3522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/tags?post=3522"},{"taxonomy":"wsuwp_university_category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_category?post=3522"},{"taxonomy":"wsuwp_university_location","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_location?post=3522"},{"taxonomy":"wsuwp_university_org","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_org?post=3522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}