{"id":2067,"date":"2022-11-24T16:48:02","date_gmt":"2022-11-24T21:48:02","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/?post_type=chapter&#038;p=2067"},"modified":"2025-12-05T15:37:55","modified_gmt":"2025-12-05T20:37:55","slug":"structure","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/structure\/","title":{"raw":"Structure","rendered":"Structure"},"content":{"raw":"<img class=\"noborder wp-image-4024 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-300x300.png\" alt=\"cartoon scaffoling\" width=\"127\" height=\"127\" \/>\r\n\r\nProperly [pb_glossary id=\"1305\"]structured[\/pb_glossary] documents are essential to allow users who cannot see the layout to navigate documents. Assistive technology relies on the underlying structure to differentiate between (and indicate to users) content types which allows users to jump to specific places in the document, browse or skim information, and understand an overview before delving deeper. Consistently structured documents help all readers with context, organization of ideas, and clarity.\r\n<table class=\"grid\" style=\"border-collapse: collapse;width: 100%;height: 85px\" border=\"0\"><caption>Consider your user<\/caption>\r\n<tbody>\r\n<tr style=\"height: 17px\">\r\n<th class=\"shaded\" style=\"width: 50%;height: 17px\" scope=\"col\"><span style=\"color: #ffffff\">User Question<\/span><\/th>\r\n<th class=\"shaded\" style=\"width: 50%;height: 17px\" scope=\"col\"><span style=\"color: #ffffff\">Feature used to answer<\/span><\/th>\r\n<\/tr>\r\n<tr style=\"height: 17px\">\r\n<td style=\"width: 50%;height: 17px\">Where am I?<\/td>\r\n<td style=\"width: 50%;height: 17px\">Page, slide, and document titles<\/td>\r\n<\/tr>\r\n<tr style=\"height: 17px\">\r\n<td style=\"width: 50%;height: 17px\">How did I get here, where can I go?<\/td>\r\n<td style=\"width: 50%;height: 17px\">Navigation menu, table of contents<\/td>\r\n<\/tr>\r\n<tr style=\"height: 17px\">\r\n<td style=\"width: 50%;height: 17px\">What is here?<\/td>\r\n<td style=\"width: 50%;height: 17px\">Headings, lists, labels<\/td>\r\n<\/tr>\r\n<tr style=\"height: 17px\">\r\n<td style=\"width: 50%;height: 17px\">What does this relate to?<\/td>\r\n<td style=\"width: 50%;height: 17px\">Consistent style and layout across related material<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<strong>On this page:<\/strong>\r\n<ul class=\"navbar\">\r\n \t<li class=\"navitem\"><a href=\"#headings\">Headings<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#nav\">Navigation<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#lists\">Lists<\/a><\/li>\r\n \t<li class=\"navitem\"><a href=\"#tables\">Tables<\/a><\/li>\r\n<\/ul>\r\n<h2><a id=\"headings\"><\/a>Headings<\/h2>\r\n[pb_glossary id=\"1105\"]Headings[\/pb_glossary] are an important part of documents and web pages. Headings create organizational flow, build connections between key concepts, and break up large blocks of text to increase readability. Headings create a navigable document outline that helps all readers understand the logical structure of the page and navigate to different sections. Properly coded headings convey the document structure to screen readers and speech-to-text software.\r\n\r\nUse built-in tools to create headings in nested, sequential order. Proper headings are both visual (often larger font) and semantic (code for interpreting content). Simply making text larger and bold does not give headings essential meaning in code. Proper headings have both style and meaning.\r\n\r\nHeadings are\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Essential for<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\n[pb_glossary id=\"1303\"]Screen reader[\/pb_glossary] users that rely on headings to navigate the web and longer documents. The nest hierarchy of headings also provides context and relationships between key concepts to screen reader users.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">But benefit<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nAll readers, regardless of access means.\r\n<ul>\r\n \t<li>Headings provide context and explain relationships between ideas.<\/li>\r\n \t<li>Headings visually show how information flows and review relationships between concepts.\r\n<ul>\r\n \t<li>Coded headings provide the same meaning through their nested hierarchy.<\/li>\r\n \t<li>Consistent style and usage aid readers in understanding and navigation.<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Headings emphasize key concepts.<\/li>\r\n \t<li>Headings can be used as \u201cbookmarks\u201d in a long document for readers to use to take breaks and resume their place.<\/li>\r\n \t<li>Headings allow for skimming to review and find specific content efficiently.<\/li>\r\n<\/ul>\r\nAuthors.\r\n<ul>\r\n \t<li>Headings can be used to create a table of contents automatically in Word documents.<\/li>\r\n \t<li>Headings can be moved in the Word Navigation pane to move all subheadings and subordinate content under that heading.<\/li>\r\n \t<li>Easily update heading style to change the appearance of all headings of that level.<\/li>\r\n \t<li>Create a summary or overview document.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h2><a id=\"nav\"><\/a>Navigation<\/h2>\r\n<ul>\r\n \t<li>Ensure documents have a title.<\/li>\r\n \t<li>Add a table of contents to documents longer than 5 pages.<\/li>\r\n \t<li>Provide [pb_glossary id=\"1170\"]skip links[\/pb_glossary] and multiple ways to navigate (previous and next buttons, menus, breadcrumb navigation, site map, etc.) in HTML.<\/li>\r\n<\/ul>\r\n<h2><a id=\"lists\"><\/a>Lists<\/h2>\r\nUse the list tools to create lists. Creating lists using asterisks or dashes will not inform assistive technology that the content is part of a list. Lists are useful for steps in a process or grouping items. It is important that everyone is made aware of the presence of a list.\r\n\r\nProperly formatted lists\u00a0organize information and makes your documents accessible.\r\n<ul>\r\n \t<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\">Use bullet lists to group items or show hierarchy.<\/li>\r\n \t<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\">Lists where the sequence is not important.<\/li>\r\n<\/ul>\r\n<ol>\r\n \t<li data-leveltext=\"%1.\" data-font=\"Calibri Light,Times New Roman\" data-listid=\"7\" data-aria-posinset=\"1\" data-aria-level=\"1\">Use numbered lists for items where sequence is important.<\/li>\r\n \t<li data-leveltext=\"%1.\" data-font=\"Calibri Light,Times New Roman\" data-listid=\"7\" data-aria-posinset=\"1\" data-aria-level=\"1\">Such as steps in a process.<\/li>\r\n<\/ol>\r\n<h2><a id=\"tables\"><\/a>Tables<\/h2>\r\n<h3>Table Best Practices<\/h3>\r\n<ul>\r\n \t<li>Tables must have a header and\/or column row.<\/li>\r\n \t<li>A concise, descriptive table title or caption helps with context and organization.<\/li>\r\n \t<li>Do not use nested, merged, split, or unnecessary blank cells.<\/li>\r\n \t<li>Use cell borders to keep data visually discrete. There are exceptions in which cell borders can be removed.<\/li>\r\n \t<li>Ensure cells have adequate padding and margins.<\/li>\r\n \t<li>Do not use colour alone to indicate meaning.<\/li>\r\n \t<li>Verify table reading order by placing the text cursor in cell A1 and press the\u00a0<strong>Tab<\/strong> key to move cell to cell. Ensure reading order matches the visual order.<\/li>\r\n \t<li>The Brightspace Accessibility Checker offers significant checks and resolutions to improve table accessibility. The Office (Word and PowerPoint) checker does not offer as robust checks, only flagging missing header row.<\/li>\r\n<\/ul>\r\n<div class=\"textbox shaded\">\r\n\r\nDo not use tables to enforce layout. Tables are for organizing and presenting data (data can be numbers or text) in a tabular format. Use columns, text alignment, or other layout tools for layout.\r\n\r\n<\/div>\r\nLater chapters will expand on using built-in tools to create headings, lists, and tables in different software suites and document types.","rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"noborder wp-image-4024 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-300x300.png\" alt=\"cartoon scaffoling\" width=\"127\" height=\"127\" srcset=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-300x300.png 300w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-1024x1024.png 1024w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-150x150.png 150w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-768x768.png 768w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-1536x1536.png 1536w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-2048x2048.png 2048w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-65x65.png 65w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-225x225.png 225w, https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2022\/11\/My-project-1-10-350x350.png 350w\" sizes=\"auto, (max-width: 127px) 100vw, 127px\" \/><\/p>\n<p>Properly <a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2067_1305\">structured<\/a> documents are essential to allow users who cannot see the layout to navigate documents. Assistive technology relies on the underlying structure to differentiate between (and indicate to users) content types which allows users to jump to specific places in the document, browse or skim information, and understand an overview before delving deeper. Consistently structured documents help all readers with context, organization of ideas, and clarity.<\/p>\n<table class=\"grid\" style=\"border-collapse: collapse;width: 100%;height: 85px\">\n<caption>Consider your user<\/caption>\n<tbody>\n<tr style=\"height: 17px\">\n<th class=\"shaded\" style=\"width: 50%;height: 17px\" scope=\"col\"><span style=\"color: #ffffff\">User Question<\/span><\/th>\n<th class=\"shaded\" style=\"width: 50%;height: 17px\" scope=\"col\"><span style=\"color: #ffffff\">Feature used to answer<\/span><\/th>\n<\/tr>\n<tr style=\"height: 17px\">\n<td style=\"width: 50%;height: 17px\">Where am I?<\/td>\n<td style=\"width: 50%;height: 17px\">Page, slide, and document titles<\/td>\n<\/tr>\n<tr style=\"height: 17px\">\n<td style=\"width: 50%;height: 17px\">How did I get here, where can I go?<\/td>\n<td style=\"width: 50%;height: 17px\">Navigation menu, table of contents<\/td>\n<\/tr>\n<tr style=\"height: 17px\">\n<td style=\"width: 50%;height: 17px\">What is here?<\/td>\n<td style=\"width: 50%;height: 17px\">Headings, lists, labels<\/td>\n<\/tr>\n<tr style=\"height: 17px\">\n<td style=\"width: 50%;height: 17px\">What does this relate to?<\/td>\n<td style=\"width: 50%;height: 17px\">Consistent style and layout across related material<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>On this page:<\/strong><\/p>\n<ul class=\"navbar\">\n<li class=\"navitem\"><a href=\"#headings\">Headings<\/a><\/li>\n<li class=\"navitem\"><a href=\"#nav\">Navigation<\/a><\/li>\n<li class=\"navitem\"><a href=\"#lists\">Lists<\/a><\/li>\n<li class=\"navitem\"><a href=\"#tables\">Tables<\/a><\/li>\n<\/ul>\n<h2><a id=\"headings\"><\/a>Headings<\/h2>\n<p><a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2067_1105\">Headings<\/a> are an important part of documents and web pages. Headings create organizational flow, build connections between key concepts, and break up large blocks of text to increase readability. Headings create a navigable document outline that helps all readers understand the logical structure of the page and navigate to different sections. Properly coded headings convey the document structure to screen readers and speech-to-text software.<\/p>\n<p>Use built-in tools to create headings in nested, sequential order. Proper headings are both visual (often larger font) and semantic (code for interpreting content). Simply making text larger and bold does not give headings essential meaning in code. Proper headings have both style and meaning.<\/p>\n<p>Headings are<\/p>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Essential for<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p><a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2067_1303\">Screen reader<\/a> users that rely on headings to navigate the web and longer documents. The nest hierarchy of headings also provides context and relationships between key concepts to screen reader users.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">But benefit<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>All readers, regardless of access means.<\/p>\n<ul>\n<li>Headings provide context and explain relationships between ideas.<\/li>\n<li>Headings visually show how information flows and review relationships between concepts.\n<ul>\n<li>Coded headings provide the same meaning through their nested hierarchy.<\/li>\n<li>Consistent style and usage aid readers in understanding and navigation.<\/li>\n<\/ul>\n<\/li>\n<li>Headings emphasize key concepts.<\/li>\n<li>Headings can be used as \u201cbookmarks\u201d in a long document for readers to use to take breaks and resume their place.<\/li>\n<li>Headings allow for skimming to review and find specific content efficiently.<\/li>\n<\/ul>\n<p>Authors.<\/p>\n<ul>\n<li>Headings can be used to create a table of contents automatically in Word documents.<\/li>\n<li>Headings can be moved in the Word Navigation pane to move all subheadings and subordinate content under that heading.<\/li>\n<li>Easily update heading style to change the appearance of all headings of that level.<\/li>\n<li>Create a summary or overview document.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h2><a id=\"nav\"><\/a>Navigation<\/h2>\n<ul>\n<li>Ensure documents have a title.<\/li>\n<li>Add a table of contents to documents longer than 5 pages.<\/li>\n<li>Provide <a class=\"glossary-term\" aria-haspopup=\"dialog\" aria-describedby=\"definition\" href=\"#term_2067_1170\">skip links<\/a> and multiple ways to navigate (previous and next buttons, menus, breadcrumb navigation, site map, etc.) in HTML.<\/li>\n<\/ul>\n<h2><a id=\"lists\"><\/a>Lists<\/h2>\n<p>Use the list tools to create lists. Creating lists using asterisks or dashes will not inform assistive technology that the content is part of a list. Lists are useful for steps in a process or grouping items. It is important that everyone is made aware of the presence of a list.<\/p>\n<p>Properly formatted lists\u00a0organize information and makes your documents accessible.<\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\">Use bullet lists to group items or show hierarchy.<\/li>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\">Lists where the sequence is not important.<\/li>\n<\/ul>\n<ol>\n<li data-leveltext=\"%1.\" data-font=\"Calibri Light,Times New Roman\" data-listid=\"7\" data-aria-posinset=\"1\" data-aria-level=\"1\">Use numbered lists for items where sequence is important.<\/li>\n<li data-leveltext=\"%1.\" data-font=\"Calibri Light,Times New Roman\" data-listid=\"7\" data-aria-posinset=\"1\" data-aria-level=\"1\">Such as steps in a process.<\/li>\n<\/ol>\n<h2><a id=\"tables\"><\/a>Tables<\/h2>\n<h3>Table Best Practices<\/h3>\n<ul>\n<li>Tables must have a header and\/or column row.<\/li>\n<li>A concise, descriptive table title or caption helps with context and organization.<\/li>\n<li>Do not use nested, merged, split, or unnecessary blank cells.<\/li>\n<li>Use cell borders to keep data visually discrete. There are exceptions in which cell borders can be removed.<\/li>\n<li>Ensure cells have adequate padding and margins.<\/li>\n<li>Do not use colour alone to indicate meaning.<\/li>\n<li>Verify table reading order by placing the text cursor in cell A1 and press the\u00a0<strong>Tab<\/strong> key to move cell to cell. Ensure reading order matches the visual order.<\/li>\n<li>The Brightspace Accessibility Checker offers significant checks and resolutions to improve table accessibility. The Office (Word and PowerPoint) checker does not offer as robust checks, only flagging missing header row.<\/li>\n<\/ul>\n<div class=\"textbox shaded\">\n<p>Do not use tables to enforce layout. Tables are for organizing and presenting data (data can be numbers or text) in a tabular format. Use columns, text alignment, or other layout tools for layout.<\/p>\n<\/div>\n<p>Later chapters will expand on using built-in tools to create headings, lists, and tables in different software suites and document types.<\/p>\n<div class=\"glossary\"><span class=\"screen-reader-text\" id=\"definition\">definition<\/span><template id=\"term_2067_1305\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2067_1305\"><div tabindex=\"-1\"><p>The use of code (HTML attributes, PDF tags, XML, etc.) to distinguish content by meaning, not appearance. For example, a &lt;h1&gt; heading tag creates both a visual and coded navigation waypoint whereas increasing the font size and bolding simply makes regular text appear larger.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_2067_1105\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2067_1105\"><div tabindex=\"-1\"><p>Headings are text used to organize a document. Headings are section and subsection titles used to logically separate content, build and show relationships between ideas, and explain the development of concepts. Headings must be hierarchical, not skip a level, and be semantically programmed, not merely cosmetic.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_2067_1303\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2067_1303\"><div tabindex=\"-1\"><p>Assistive technology software that reads content aloud and helps blind and low vision users navigate and interact with their computers.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><template id=\"term_2067_1170\"><div class=\"glossary__definition\" role=\"dialog\" data-id=\"term_2067_1170\"><div tabindex=\"-1\"><p>Often hidden links accessible by keyboard navigation that assist users to skip over repeated parts of webpages or to different parts of a webpage, such as search or navigation region.<\/p>\n<\/div><button><span aria-hidden=\"true\">&times;<\/span><span class=\"screen-reader-text\">Close definition<\/span><\/button><\/div><\/template><\/div>","protected":false},"author":1655,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[48],"contributor":[],"license":[],"class_list":["post-2067","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":6454,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/users\/1655"}],"version-history":[{"count":26,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2067\/revisions"}],"predecessor-version":[{"id":10054,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2067\/revisions\/10054"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/parts\/6454"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapters\/2067\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/media?parent=2067"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/pressbooks\/v2\/chapter-type?post=2067"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/contributor?post=2067"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-json\/wp\/v2\/license?post=2067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}