{"id":698,"date":"2018-06-11T16:16:55","date_gmt":"2018-06-11T16:16:55","guid":{"rendered":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/chapter\/organizing-content\/"},"modified":"2024-01-16T17:47:37","modified_gmt":"2024-01-16T17:47:37","slug":"organizing-content","status":"publish","type":"chapter","link":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/chapter\/organizing-content\/","title":{"raw":"Organizing Content","rendered":"Organizing Content"},"content":{"raw":"Organizing content so it has a logical flow just makes sense.\u00a0Using chapters, headings, and sub-headings to organize a resource allows students to clearly see how the main concepts are related. In addition, headings are one of the main ways that students using a screen reader navigate through a chapter.\r\n<h1>Who are you doing this for?<\/h1>\r\nEveryone benefits from having content that's clearly organized. Well-organized content supports students who:\r\n<ul>\r\n \t<li>Have a learning disability, like <a class=\"internal\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Ann\">Ann<\/a><\/li>\r\n \t<li>Are blind or have low vision, like <a class=\"internal\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\r\n<\/ul>\r\n[caption id=\"attachment_693\" align=\"aligncenter\" width=\"300\"]<a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2.jpg\"><img class=\"wp-image-693 size-medium\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-300x184.jpg\" alt=\"Ann has a learning disability that makes it difficult for her to concentrate\" width=\"300\" height=\"184\" \/><\/a> Ann: \"This allows me to go back and easily find the important points.\"[\/caption]\r\n\r\n[caption id=\"attachment_690\" align=\"aligncenter\" width=\"300\"]<a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob.jpg\"><img class=\"wp-image-690 size-medium\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-300x225.jpg\" alt=\"Jacob is blind\" width=\"300\" height=\"225\" \/><\/a> Jacob: \"This gives me more control in navigating through the chapter. I can skip to the relevant section, instead of having to read the whole thing in a linear fashion.\"[\/caption]\r\n\r\n<hr \/>\r\n\r\n<h1>Why is this important?<\/h1>\r\nHeadings help to identify the hierarchical structure of a document (e.g., sections, sub-sections). They provide a visual cue that helps sighted readers quickly navigate through sections of a document, skimming until they find the section they are looking for. Similarly, headings create logical divisions in the content and allow a non-sighted user to navigate a page or document easily using a screen reader.\r\n\r\nWhen it comes to using visual references to indicate the hierarchy and structure of a document, you might be accustomed to changing the font style, enlarging the type size, or highlighting the text with bold, underline or italics to create the impression of a heading. This approach presents problems when creating material with accessibility in mind because screen readers won\u2019t identify the text as a heading.\u00a0Instead, the screen reader will just \"read\" through the text of a heading as if it were regular content, missing your intended cues about structure and organization.\r\n<h1>What do you need to do?<\/h1>\r\nIn <a href=\"\/accessibilitytoolkit\/front-matter\/introduction\/#pressbooks\">Pressbooks<\/a>, use the <a href=\"http:\/\/en.support.wordpress.com\/visual-editor\/#styles\">visual editor<\/a> to tag sections with Heading 2, sub-sections with Heading 3, sub-sections of sub-sections with Heading 4, and so on.\r\n\r\n[caption id=\"attachment_697\" align=\"aligncenter\" width=\"244\"]<a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2.jpg\"><img class=\"wp-image-697 size-medium\" title=\"A drop-down menu showing a list of heading options in Pressbooks\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-244x300.jpg\" alt=\"A drop-down menu showing a list of heading options in Pressbooks\" width=\"244\" height=\"300\" data-popupalt-original-title=\"null\" \/><\/a> Heading options in Pressbooks' visual editor[\/caption]\r\n\r\nAlthough Pressbooks provides up to six heading levels, that many levels might be difficult for your readers to keep track of. If you find yourself getting to four to six heading levels, consider breaking up your chapter into multiple chapters.\r\n<h2>Textboxes with titles<\/h2>\r\nIf you are creating your textbook with Pressbooks, you might use some of the educational textboxes: Examples, Exercises, Key Takeaways, and Learning Objectives. Here is an example:\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Examples<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nType your examples here.\r\n<ul>\r\n \t<li>First<\/li>\r\n \t<li>Second<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\nThese textboxes have two sections that are different colours. The section on the top is for the textbox title and the section underneath is for the textbox content. For people who can see the textbox, the different colours used in the textbox title communicate that the text is a title. However, this is not communicated to people using screen readers. As such, the textbox title needs to be marked as a heading.\r\n\r\nWhich heading level you use will depend on where the textbox appears in the chapter. The heading level should be one level below the section heading level it appears under. So in this chapter, \"Textboxes with titles\" is a heading level 2, so I have assigned the \"Examples\" textbox title heading level 3.\r\n<div class=\"textbox shaded\">\r\n\r\nIf changing the heading level of your textbox title changes the appearance, here is some CSS you can add to your \"Custom Styles\" (under the Appearance tab in Pressbooks) to change it back:\r\n\r\n<code>h3.textbox__title {<\/code>\r\n<code>padding: 0.7em 0.7em 0.7em 0.7em;<\/code>\r\n<code>margin: -1.1428244907em -1.1428244907em -1em -1.1428244907em;<\/code>\r\n<code>font-size: 1.3em;<\/code>\r\n<code>font-weight: normal;<\/code>\r\n<code>}<\/code>\r\n\r\nNote that this CSS is targeting heading 3s. If your textbox titles are using a different heading level, change h3 to h2, h4, etc.\r\n\r\n<\/div>\r\n<h1 class=\"eocp\">Media Attributions<\/h1>\r\n<ul>\r\n \t<li>Ann: Original artwork by Hilda Anggraeni (BCcampus). \u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">Creative Commons Attribution 4.0 International Licence<\/a>.<\/li>\r\n \t<li>Jacob: \"<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/11496864803\/in\/album-72157638911360206\/\">WFE003: Jacob<\/a>\" by <a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/\">Rosenfeld Media<\/a>. \u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\r\n<\/ul>","rendered":"<p>Organizing content so it has a logical flow just makes sense.\u00a0Using chapters, headings, and sub-headings to organize a resource allows students to clearly see how the main concepts are related. In addition, headings are one of the main ways that students using a screen reader navigate through a chapter.<\/p>\n<h1>Who are you doing this for?<\/h1>\n<p>Everyone benefits from having content that&#8217;s clearly organized. Well-organized content supports students who:<\/p>\n<ul>\n<li>Have a learning disability, like <a class=\"internal\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Ann\">Ann<\/a><\/li>\n<li>Are blind or have low vision, like <a class=\"internal\" href=\"\/accessibilitytoolkit\/chapter\/using-personas\/#Jacob\">Jacob<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_693\" aria-describedby=\"caption-attachment-693\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-693 size-medium\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-300x184.jpg\" alt=\"Ann has a learning disability that makes it difficult for her to concentrate\" width=\"300\" height=\"184\" srcset=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-300x184.jpg 300w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-65x40.jpg 65w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-225x138.jpg 225w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2-350x215.jpg 350w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/persona2.jpg 700w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-693\" class=\"wp-caption-text\">Ann: &#8220;This allows me to go back and easily find the important points.&#8221;<\/figcaption><\/figure>\n<figure id=\"attachment_690\" aria-describedby=\"caption-attachment-690\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-690 size-medium\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-300x225.jpg\" alt=\"Jacob is blind\" width=\"300\" height=\"225\" srcset=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-300x225.jpg 300w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-65x49.jpg 65w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-225x169.jpg 225w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob-350x263.jpg 350w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/Jacob.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-690\" class=\"wp-caption-text\">Jacob: &#8220;This gives me more control in navigating through the chapter. I can skip to the relevant section, instead of having to read the whole thing in a linear fashion.&#8221;<\/figcaption><\/figure>\n<hr \/>\n<h1>Why is this important?<\/h1>\n<p>Headings help to identify the hierarchical structure of a document (e.g., sections, sub-sections). They provide a visual cue that helps sighted readers quickly navigate through sections of a document, skimming until they find the section they are looking for. Similarly, headings create logical divisions in the content and allow a non-sighted user to navigate a page or document easily using a screen reader.<\/p>\n<p>When it comes to using visual references to indicate the hierarchy and structure of a document, you might be accustomed to changing the font style, enlarging the type size, or highlighting the text with bold, underline or italics to create the impression of a heading. This approach presents problems when creating material with accessibility in mind because screen readers won\u2019t identify the text as a heading.\u00a0Instead, the screen reader will just &#8220;read&#8221; through the text of a heading as if it were regular content, missing your intended cues about structure and organization.<\/p>\n<h1>What do you need to do?<\/h1>\n<p>In <a href=\"\/accessibilitytoolkit\/front-matter\/introduction\/#pressbooks\">Pressbooks<\/a>, use the <a href=\"http:\/\/en.support.wordpress.com\/visual-editor\/#styles\">visual editor<\/a> to tag sections with Heading 2, sub-sections with Heading 3, sub-sections of sub-sections with Heading 4, and so on.<\/p>\n<figure id=\"attachment_697\" aria-describedby=\"caption-attachment-697\" style=\"width: 244px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-697 size-medium\" title=\"A drop-down menu showing a list of heading options in Pressbooks\" src=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-244x300.jpg\" alt=\"A drop-down menu showing a list of heading options in Pressbooks\" width=\"244\" height=\"300\" data-popupalt-original-title=\"null\" srcset=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-244x300.jpg 244w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-65x80.jpg 65w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-225x277.jpg 225w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2-350x430.jpg 350w, https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2018\/06\/heading-options-2.jpg 358w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/><\/a><figcaption id=\"caption-attachment-697\" class=\"wp-caption-text\">Heading options in Pressbooks&#8217; visual editor<\/figcaption><\/figure>\n<p>Although Pressbooks provides up to six heading levels, that many levels might be difficult for your readers to keep track of. If you find yourself getting to four to six heading levels, consider breaking up your chapter into multiple chapters.<\/p>\n<h2>Textboxes with titles<\/h2>\n<p>If you are creating your textbook with Pressbooks, you might use some of the educational textboxes: Examples, Exercises, Key Takeaways, and Learning Objectives. Here is an example:<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Examples<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Type your examples here.<\/p>\n<ul>\n<li>First<\/li>\n<li>Second<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>These textboxes have two sections that are different colours. The section on the top is for the textbox title and the section underneath is for the textbox content. For people who can see the textbox, the different colours used in the textbox title communicate that the text is a title. However, this is not communicated to people using screen readers. As such, the textbox title needs to be marked as a heading.<\/p>\n<p>Which heading level you use will depend on where the textbox appears in the chapter. The heading level should be one level below the section heading level it appears under. So in this chapter, &#8220;Textboxes with titles&#8221; is a heading level 2, so I have assigned the &#8220;Examples&#8221; textbox title heading level 3.<\/p>\n<div class=\"textbox shaded\">\n<p>If changing the heading level of your textbox title changes the appearance, here is some CSS you can add to your &#8220;Custom Styles&#8221; (under the Appearance tab in Pressbooks) to change it back:<\/p>\n<p><code>h3.textbox__title {<\/code><br \/>\n<code>padding: 0.7em 0.7em 0.7em 0.7em;<\/code><br \/>\n<code>margin: -1.1428244907em -1.1428244907em -1em -1.1428244907em;<\/code><br \/>\n<code>font-size: 1.3em;<\/code><br \/>\n<code>font-weight: normal;<\/code><br \/>\n<code>}<\/code><\/p>\n<p>Note that this CSS is targeting heading 3s. If your textbox titles are using a different heading level, change h3 to h2, h4, etc.<\/p>\n<\/div>\n<h1 class=\"eocp\">Media Attributions<\/h1>\n<ul>\n<li>Ann: Original artwork by Hilda Anggraeni (BCcampus). \u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">Creative Commons Attribution 4.0 International Licence<\/a>.<\/li>\n<li>Jacob: &#8220;<a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/11496864803\/in\/album-72157638911360206\/\">WFE003: Jacob<\/a>&#8221; by <a href=\"https:\/\/www.flickr.com\/photos\/rosenfeldmedia\/\">Rosenfeld Media<\/a>. \u00a9 <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons Attribution 2.0 Generic Licence<\/a>.<\/li>\n<\/ul>\n","protected":false},"author":90,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-698","chapter","type-chapter","status-publish","hentry"],"part":696,"_links":{"self":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/90"}],"version-history":[{"count":23,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/698\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/698\/revisions\/1237"}],"part":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/696"}],"metadata":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/698\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=698"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=698"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=698"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}