{"id":903,"date":"2022-05-20T13:55:17","date_gmt":"2022-05-20T13:55:17","guid":{"rendered":"https:\/\/web.tarleton.edu\/accessibility\/?page_id=903"},"modified":"2025-05-12T16:44:38","modified_gmt":"2025-05-12T16:44:38","slug":"lists","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/accessibility\/lists\/","title":{"rendered":"Lists"},"content":{"rendered":"\n<p>Lists are one of the best content solutions for readability:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>They simplify complex concepts<\/li>\n\n\n\n<li>They provide step-by-step processing.<\/li>\n\n\n\n<li>They organize content into logical structure.\u00a0<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">Proper Semantic Usage<\/h1>\n\n\n\n<p>Most word processors and email clients provide some function (e.g. WYSIWYG editor) to create ordered (numeric, &lt;ol&gt;) and unordered (bulleted, &lt;ul&gt;) lists. Where this functionality is available, it should be used. Using the semantic version of lists allows screen readers to properly read list items (&lt;li&gt;), including indicating the number of list items in the list.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g. *, !, -, +, #, ^)\u00a0to lay out content.<\/li>\n\n\n\n<li>Where word processor functionality is possible, never use special characters (e.g. *, !, -, +, #, ^) to emphasize the importance of something.<\/li>\n\n\n\n<li>Do use bold (the &lt;strong>\u00a0HTML tag) or italics (the &lt;em>\u00a0HTML tag) on important phrases.<\/li>\n\n\n\n<li>When needed,\u00a0<a href=\"http:\/\/owl.english.purdue.edu\/engagement\/2\/1\/44\/\">use a colon (:) to introduce a list<\/a>, not a hyphen (-) or\u00a0<a href=\"http:\/\/owl.english.purdue.edu\/owl\/resource\/607\/01\/\">a comma (,)<\/a>.<\/li>\n\n\n\n<li>Use a colon to introduce a fact or important information (e.g. &#8220;Note:&#8221;, &#8220;Example:&#8221;), but do not use them at the end of a\u00a0<a href=\"https:\/\/www.tarleton.edu\/accessibility\/standards\/headings.html\">heading (Heading 1 &#8211; 6)<\/a>\u00a0as the format itself introduces information by default.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th scope=\"col\">Bad List Example<\/th><th scope=\"col\">Why is it Ineffective?<\/th><\/tr><tr><td>* List Item 1<br>* List Item 2<br>* List Item 3<\/td><td>Without semantic formatting, screen readers view the &#8220;bullet&#8221; as another character in the paragraph, and it reads it as just another part of the paragraph. It provide no indication that it is a list or use the list mode functionality.<\/td><\/tr><tr><td>&#8211; List Item 1<br>&#8211; List Item 2 is<br>&nbsp;very long, but I<br>&nbsp;want it to line up<br>&#8211; List Item 3<\/td><td>Without semantic proper formatting, screen readers view the &#8220;bullet&#8221; as another character in the paragraph, and it reads it as just another part of the paragraph. It provide no indication that it is a list or use the list mode functionality. Similarly, the spaces are read in with the rest of the content. Spacing also changes from one screen size to the next, so it will wrap differently, making it look very unbalanced on many screen sizes.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Guides and How-To&#8217;s<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webstandards.hhs.gov\/guidelines\/\">Usability.gov&#8217;s Web Standards and Usability Guidelines<\/a>\n<ul class=\"wp-block-list\">\n<li>Chapter 3: Accessibility<\/li>\n\n\n\n<li>Chapter 11: Text Appearance<\/li>\n\n\n\n<li>Chapter 12: Lists<\/li>\n\n\n\n<li>Chapter 15: Writing Web Content<\/li>\n\n\n\n<li>Chapter 16: Content Organization<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Web Accessibility Initiative (WAI)\n<ul class=\"wp-block-list\">\n<li>Tutorials\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/\">Headings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/content\/\">Content Structure<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Designing and Developing\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#use-headings-to-convey-meaning-and-structure\">Use headings to convey meaning and structure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#make-link-text-meaningful\">Make link text meaningful<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#provide-clear-instructions\">Provide clear instructions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/writing\/#keep-content-clear-and-concise\">Keep content clear and concise<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#provide-clear-and-consistent-navigation-options\">Provide clear and consistent navigation options<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#create-designs-for-different-viewport-sizes\">Create designs for different viewport sizes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tips\/developing\/#use-mark-up-to-convey-meaning-and-structure\">Use mark-up to convey meaning and structure<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/webaim.org\/techniques\/semanticstructure\/#lists\">Web\u00a0<abbr title=\"Accessibility in Mind\">AIM<\/abbr><\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/webaim.org\/techniques\/semanticstructure\/#lists\">Semantic Structure &#8211; Using Lists Correctly<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/webaim.org\/techniques\/screenreader\/\">Designing for Screen Reader Compatibility<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Guidelines<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#content-structure-separation\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 Guideline 1.3 &#8211; Adaptable<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation.html\">Understanding\u00a0<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 Guideline 1.3<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\">1.3.1 Info and Relationships Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-sequence.html\">1.3.2 Meaningful Sequence Level A<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G115.html\">Techniques for\u00a0<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>\u00a02.0 G115: Using semantic elements to mark up structure<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/H48.html\">H48: Using ol, ul and dl for lists or groups of links<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Simulations<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>LevelAccess\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=6dFakpCp7S8\">Simulation: Readability<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=KmDGvquzn2k\">User Simulation: Carly&#8217;s Caf\u00e9 &#8211; Experience Autism Through Carly&#8217;s Eyes<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=ycCN3qTYVyo\">The National Autistic Society Simulation: Autism and sensory sensitivity<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Lists are one of the best content solutions for readability: Proper Semantic Usage Most word processors and email clients provide some function (e.g. WYSIWYG editor) to create ordered (numeric, &lt;ol&gt;) &#8230;<\/p>\n","protected":false},"author":3,"featured_media":580,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-903","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/accessibility\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 4 years ago","modified":"Updated 11 months ago"},"absolute_dates":{"created":"Posted on May 20, 2022","modified":"Updated on May 12, 2025"},"absolute_dates_time":{"created":"Posted on May 20, 2022 1:55 pm","modified":"Updated on May 12, 2025 4:44 pm"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=903"}],"version-history":[{"count":1,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/903\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/903\/revisions\/1530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}