{"id":24,"date":"2023-01-03T08:00:00","date_gmt":"2023-01-03T16:00:00","guid":{"rendered":"https:\/\/wsu.edu\/digital-accessibility\/?page_id=24"},"modified":"2026-01-28T13:48:41","modified_gmt":"2026-01-28T21:48:41","slug":"lists","status":"publish","type":"page","link":"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"importance-of-lists\">Importance of Lists<\/h2>\n\n\n\n<p>A person with a visual impairment will not perceive the visual cues that help a sighted person understand that a set of items, displayed in digital content, should be considered as a group. When a person using <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a>, like a screen-reader, comes across an accessible list in digital content, the first thing identified will be the number of items in the list. This helps orient them to the fact that they are entering a list, and how long it is.<\/p>\n\n\n\n<p>If a list is improperly formatted, it may be confusing as to why there is a random string of words like \u201capple orange banana\u201d in the middle of a document.<\/p>\n\n\n\n<p>There are two main types of lists: Unordered (bulleted) and ordered (numbered or lettered).<\/p>\n\n<\/div>\r\n\n<\/div>\n\n<div class=\"wsu-row wsu-spacing-after--xxmedium wsu-row--halves\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-crimson wsu-opacity--medium\" style=\"bottom:-15px;left:-15px;height:70%;width:70%\"><\/div>\n\n<div class=\"wsu-container wsu-color-background--gray-5 wsu-spacing-top--medium wsu-spacing-bottom--medium wsu-spacing-padding-left--medium wsu-spacing-padding-right--medium wsu-position--relative\" >\r\n    \n\n<h3 id=\"about-unordered-list\">Unordered List<\/h3>\n\n\n\n<ul><li>Apples<\/li><li>Oranges<\/li><li>Pears<\/li><\/ul>\n\n<\/div>\n<\/div>\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n<div class=\"wsu-container  wsu-position--relative\" >\r\n    \n<div class=\"wsu-decorator  wsu-decorator--style-lines-crimson wsu-opacity--medium\" style=\"top:-15px;right:-15px;height:70%;width:70%\"><\/div>\n\n<div class=\"wsu-container wsu-color-background--gray-5 wsu-spacing-top--medium wsu-spacing-bottom--medium wsu-spacing-padding-left--medium wsu-spacing-padding-right--medium wsu-position--relative\" >\r\n    \n\n<h3 id=\"about-ordered-list\">Ordered List<\/h3>\n\n\n\n<ol type=\"1\" id=\"block-9d393368-9560-48ae-90f1-fd5be1699f34\"><li>Add flour to bowl.<\/li><li>Add yeast to the flour.<\/li><li>Add warm water.<\/li><\/ol>\n\n<\/div>\n<\/div>\n<\/div>\r\n\n<\/div>\n\n<section  class=\"wsu-section wsu-width--full wsu-position--relative wsu-spacing-after--large wsu-spacing-before--xlarge\"  >\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-lines-gray  wsu-decorator--white\" style=\"bottom:-15px;left:-15px;height:60%;width:60%\"><\/div>\n\n<div class=\"wsu-container wsu-spacing-bottom--xxmedium wsu-spacing-padding-left--xxmedium wsu-spacing-padding-right--xxmedium wsu-border--add-top wsu-border--color-autumn wsu-spacing-top--medium wsu-color-background--white wsu-spacing-after--xxmedium wsu-position--relative wsu-zindex--level-1 wsu-notch--small\" >\r\n    \n\n<h2 id=\"common-errors\">Common Errors<\/h2>\n\n\n\n<p class=\"wsu-spacing-after--medium\">These common errors hinder the accessibility and usability of digital content.<\/p>\n\n\n\n<ul class=\"wsu-list--style-arrow\"><li>Improperly formatting content to look like a list (and nested lists), including manually inserting indents, bullets, or numbers.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n<\/div>\n\n\n<p><\/p>\n\n<\/div>\n    <\/div><\/section>\n\n<section  class=\"wsu-section  wsu-width--full wsu-color-background--white\"  >\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-lines-gray\" style=\"top:-20px;right:-20px;height:40%;width:40%\"><\/div>\n\n<div class=\"wsu-callout  wsu-color-background--gray-5 wsu-callout--color-vineyard wsu-notch--small wsu-position--relative\" >\r\n        \n\n<h2 id=\"best-practices\">Best Practices<\/h2>\n\n\n<div class=\"wsu-row wsu-row--sidebar-right\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<p class=\"wsu-spacing-after--medium\">Follow these best practices to improve the accessibility and usability of digital content.<\/p>\n\n\n\n<ul class=\"wsu-list--style-arrow\"><li>Use the <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/application-formatting-tools\/\">application formatting tools<\/a> to build ordered or unordered lists or apply HTML tags.<\/li><li>Properly nest lists so that <a href=\"https:\/\/wsu.edu\/digital-accessibility\/get-started\/glossary\/assistive-technology\/\">assistive technology<\/a> can identify the sublists.<\/li><\/ul>\n\n<\/div>\r\n\n\n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h3 id=\"best-practices-example\">Example<\/h3>\n\n\n\n<ul><li>Apples<ul><li>Red Delicious<\/li><li>Granny Smith<\/li><\/ul><\/li><li>Pears<ul><li>Bartlett<\/li><li>Asian<\/li><\/ul><\/li><\/ul>\n\n<\/div>\r\n\n<\/div>\n\n\n<p><\/p>\n\n<\/div>\r\n\n<\/div>\n    <\/div><\/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.<\/li><li>Lists are properly nested.<\/li><li>Lists are not manually created.<\/li><\/ul>\n\n<\/div>\r\n\n<\/div>\n\n<div class=\"wsu-cta \" >\n\t<a \t\t\t\t\thref=\"https:\/\/wsu.edu\/digital-accessibility\/documents\/2023\/10\/core-concept-check-sheet.pdf\/\"\t\n\t\tclass=\"wsu-button \">\n\t\t\t\n\t\tDownload Digital Accessibility Check Sheet (PDF)\u00a0\t\t\t\t\t<i class=\"wsu-icon wsu-i-download\"><\/i>\n\t\t\t<\/a>\n<\/div>\n\n    <\/div><\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<section  class=\"wsu-section\"  >\r\n        \n\n<h2>Resources from WSU Digital Accessibility<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-3\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--white wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title \">\r\n\t\t\t<a href=\"https:\/\/wsu.edu\/digital-accessibility\/core-concepts\/lists\/lists-and-accessibility\/\">\t\t\t\tLists and Accessibility\t\t\t<\/a>\t\t<\/h3>\r\n\t\t\t\t\t\t<div class=\"wsu-caption\">\r\n\t\t\tCreating lists with application tools yields accessible, easy-to-scan content.\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n    <\/section>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<div class=\"wsu-row wsu-row--single\" >\r\n    \n<div class=\"wsu-column\"  style=\"\">\r\n\t\n\n<h2 id=\"additional-resources\">Additional Resources<\/h2>\n\n\n<div class=\"wsu-card-wrapper wsu-card-wrapper--per-row-2\" >\r\n    \n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tWebpages\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/content\/#lists\"><strong>W3C<\/strong>: Page Structure &#8211; Lists<\/a> <\/li><li><a href=\"https:\/\/webaim.org\/techniques\/semanticstructure\/#lists\"><strong>WebAIM<\/strong>: Semantic Structure &#8211; Lists<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tDigital Documents\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/training\/documents\/aed-cop-docx03\/\"><strong>Section508.gov<\/strong>: Module 3: Use Built-in Features to Create Lists<\/a><\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n\n<article class=\"wsu-card  wsu-color-background--gray-5 wsu-border-top--color-crimson\">\r\n\t\t<div class=\"wsu-card__content\">\r\n\t\t\t\t\t\t<h3 class=\"wsu-title  wsu-font-size--large\">\r\n\t\t\t\t\t\t\tPresentations\t\t\t\t\t<\/h3>\r\n\t\t\t\t\t\t\t\t<span class=\"wsu-card__content-custom\">\r\n\t\t\t\n\n<ul class=\"wsu-list--style-arrow\"><li><a href=\"https:\/\/www.section508.gov\/training\/presentations\/aed-cop-pptx05\/\"><strong>Section508.gov<\/strong>: Module 5: Formatting Lists Properly<\/a> (PPT)<\/li><\/ul>\n\n\t\t<\/span>\r\n\t\t\t\t\t<\/div>\r\n\t<\/article>\n<\/div>\n<\/div>\r\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Using application formatting tools or HTML tags for lists add the visual cues of an ordered or unordered list as well as the appropriate indicators for assistive technology.<\/p>\n","protected":false},"author":2695,"featured_media":0,"parent":15,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"categories":[9],"tags":[],"wsuwp_university_category":[],"wsuwp_university_location":[],"wsuwp_university_org":[],"_links":{"self":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/24"}],"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=24"}],"version-history":[{"count":50,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":3863,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/24\/revisions\/3863"}],"up":[{"embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/tags?post=24"},{"taxonomy":"wsuwp_university_category","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_category?post=24"},{"taxonomy":"wsuwp_university_location","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_location?post=24"},{"taxonomy":"wsuwp_university_org","embeddable":true,"href":"https:\/\/wsu.edu\/digital-accessibility\/wp-json\/wp\/v2\/wsuwp_university_org?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}