{"id":117,"date":"2020-08-03T22:55:14","date_gmt":"2020-08-04T05:55:14","guid":{"rendered":"http:\/\/idwerkz.com\/blog\/?p=117"},"modified":"2020-08-03T23:20:23","modified_gmt":"2020-08-04T06:20:23","slug":"formatting-affects-usability-of-digital-information","status":"publish","type":"post","link":"https:\/\/idwerkz.com\/blog\/accessibility\/formatting-affects-usability-of-digital-information\/","title":{"rendered":"Formatting Affects Usability of Digital Information"},"content":{"rendered":"\n<p>When you author digital content, there are some simple things you can do that have a significant impact on the user experience for your students who are using assistive technology.<\/p>\n\n\n\n<p>When you take the time to format your content for accessibility, you enable different assistive technologies to better navigate and make use of your content. More often than not, you also tend to make your content easier to read for your students without disabilities too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Start with Headings<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"184\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/styles.png\" alt=\"Styles pane from MS Word\" class=\"wp-image-121\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/styles.png 603w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/styles-300x92.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><figcaption>Styles pane from MS Word<\/figcaption><\/figure>\n\n\n\n<p>You may have heard that headings are important for accessibility. This is a point I completely agree with.<\/p>\n\n\n\n<p>In fact, I\u2019d go so far as to say Heading styles are one of the most important elements you can incorporate into your workflow.<\/p>\n\n\n\n<p>Besides looking differently from the body text, the Heading style is a semantic element used in the digital definition of your document.<\/p>\n\n\n\n<p>This means that Heading styles are a way of identifying the text at a programming level.<\/p>\n\n\n\n<p>With this capability to be defined in the digital code of your document, your Headings can be referenced and used by other technologies such as search engines, auto-formatting tools, and assistive technologies used by students with disabilities.<\/p>\n\n\n\n<p>But exactly <em>why<\/em> are Headings useful for accessibility?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Headings Help You Move Through Text<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"522\" height=\"482\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/NVDA-heading-list.png\" alt=\"Headings from this blog being presented by the NVDA screenreader.\" class=\"wp-image-122\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/NVDA-heading-list.png 522w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/NVDA-heading-list-300x277.png 300w\" sizes=\"auto, (max-width: 522px) 100vw, 522px\" \/><figcaption>Headings from this blog being presented by the NVDA screenreader.<\/figcaption><\/figure>\n\n\n\n<p>In the user experience of a student using assistive technology, the Heading styles serve as landmarks in digital content. <\/p>\n\n\n\n<p>Different assistive technologies present the user with a list of headings that serves as a table of contents. The user selects the heading they want to go to, and the assistive technology focuses that part of the document for the student to read.<\/p>\n\n\n\n<p>Headings allow for students to more easily move through the material, rather than always starting at the beginning and reading through the text linearly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Headings Provide Context and Structure<\/h3>\n\n\n\n<p>When you look at a written page you are taking in the headings and layout to form an impression of what the document is communicating, all within your first glance.<\/p>\n\n\n\n<p>A student without sight can make use of a list of all the headings in a document to get a similar basic overview.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Headings Are Good Instructional Design<\/h3>\n\n\n\n<p>Whether or not you have a disability, Headings are useful in providing structure, reinforcing key points, and indicating what is to come. The use of Headings serves an instructional purpose for all of your students who are seeking to understand what you are sharing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Heading Stlyes<\/h2>\n\n\n\n<p>The basic principle of Heading styles is always start with Heading 1 as your first heading.<\/p>\n\n\n\n<p>Sub-headings follow in a numerical fashion, so Heading 2 follows Heading 1, Heading 3 follows Heading 2, and you never skip a level of Headings.<\/p>\n\n\n\n<p>However, the most important rule of Headings is to simply have them!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Text Formatting<\/h2>\n\n\n\n<p>Beyond the use of Heading styles, you can add more clarity to your digital text when you utilize the defined styles from your text editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ordered and Unordered Lists<\/h3>\n\n\n\n<p>The use of Numbered (also called Ordered) lists and Bulleted (also called Unordered) lists is another example of digital formatting identifying text as unique at a programmatic level. <\/p>\n\n\n\n<p>Much like headings, defined lists can be used by some assistive technologies as reference points, making them easier to identify and use.<\/p>\n\n\n\n<p>Use Numbered (Ordered) lists to provide a sequence of steps or instructions that need to be followed in a specific order.<\/p>\n\n\n\n<p>Use Bulleted (Unordered) lists to simply indicate a grouping of items with no specific hierarchy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Describe Non-Textual Content<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alt-text-dialog.png\" alt=\"The Alternative Text Editing Window from MS Word\" class=\"wp-image-120\" width=\"503\" height=\"357\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alt-text-dialog.png 671w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/alt-text-dialog-300x213.png 300w\" sizes=\"auto, (max-width: 503px) 100vw, 503px\" \/><figcaption>The Alternative Text Editing Window from MS Word<\/figcaption><\/figure>\n\n\n\n<p>When you use images, charts, graphs, or other non-textual content, always provide a textual description of the main point that content is conveying.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Friendly and Meaningful Hyperlinks<\/h2>\n\n\n\n<p>When you include links in your materials, try to make them descriptive of the content they lead to. Avoid repetitive or meaningless text like \u201cclick here\u201d or \u201cmore info\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"295\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/link-properties.png\" alt=\"Link Properties dialog from MS Word\" class=\"wp-image-119\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/link-properties.png 436w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/link-properties-300x203.png 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><figcaption>Link Properties dialog from MS Word<\/figcaption><\/figure>\n\n\n\n<p>Links can be used in the same way as Headings by assistive technology, extracted from the main text and presented as a list of navigation points for the document.<\/p>\n\n\n\n<p>When you have multiple links using the same text for the anchor, it makes the links confusing and useless when they are presented out of context by assistive technology.<\/p>\n\n\n\n<p>Also, it is recommended you don\u2019t present the raw URL of links as the anchor unless it is possible the content might be printed out and distributed in paper format.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Define Header Rows for Tables<\/h2>\n\n\n\n<p>When you use digital tables in your content, it is important to label the Header Row (and column, if appropriate).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"224\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/table-header-cell-option.png\" alt=\"Table Tools for defining Header Rows in MS Word\" class=\"wp-image-118\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/table-header-cell-option.png 597w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/table-header-cell-option-300x113.png 300w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/><figcaption>The Table Tools in MS Word allow you to define a Header Row for your table.<\/figcaption><\/figure>\n\n\n\n<p>Table Summaries should be provided for complex tables where an individual who is blind would need some sort of overview in order to understand the table layout and function.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Good Start<\/h2>\n\n\n\n<p>These formatting tasks will not solve all of the accessibility problems your students might face, but when you perform them on your content, you will significantly improve the accessibility and usability of the content.<\/p>\n\n\n\n<p>You can start incorporating these formatting tips into your workflow today, and have greater power in reaching ALL of your students.<\/p>\n\n\n\n<p>Thanks for reading!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you author digital content, there are some simple things you can do that have a significant impact on the user experience for your students who are using assistive technology. When you take the time to format your content for accessibility, you enable different assistive technologies to better navigate and make use of your content. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/idwerkz.com\/blog\/accessibility\/formatting-affects-usability-of-digital-information\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Formatting Affects Usability of Digital Information&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,5],"tags":[9,24,13],"class_list":["post-117","post","type-post","status-publish","format-standard","hentry","category-31-days-to-a11y","category-accessibility","tag-a11y","tag-a11y-formatting","tag-online-education"],"_links":{"self":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":5,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":127,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/117\/revisions\/127"}],"wp:attachment":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}