{"id":7140,"date":"2021-01-07T12:48:41","date_gmt":"2021-01-07T17:48:41","guid":{"rendered":"https:\/\/blogs.swarthmore.edu\/its\/?p=7140"},"modified":"2021-01-20T14:40:21","modified_gmt":"2021-01-20T19:40:21","slug":"how-to-be-friendly-to-everyones-reading-style","status":"publish","type":"post","link":"https:\/\/blogs.swarthmore.edu\/its\/2021\/01\/07\/how-to-be-friendly-to-everyones-reading-style\/","title":{"rendered":"How to be friendly to everyone&#8217;s reading style"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-rich is-provider-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"jetpack-video-wrapper\"><iframe loading=\"lazy\" title=\"Introduction to Web Accessibility and W3C Standards\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/20SHvU2PKsM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><figcaption>The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.<br><em>&#8211;&nbsp;<strong>Tim Berners-Lee<\/strong>, W3C Director and inventor of the World Wide Web<\/em><\/figcaption><\/figure>\n\n\n\n<p>We have all come to appreciate the ability to consume documents in different ways in recent months. When a document is made accessible, it means we provide readers with multiple ways of interacting with it. We can listen, we can zoom, we can change the font size, and we can read on different devices.<\/p>\n\n\n\n<p>Focusing on making your materials accessible will allow you to create content in multiple formats from web to print to PDF. The fundamentals for each of these are the same:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Use headings to improve readability<\/li><li>Use built-in lists<\/li><li>Use built-in tools to control the look and feel<\/li><li>Use alt text or descriptive text fields to describe imagery<\/li><li>Use descriptive link text<\/li><li>Fonts and line-height<\/li><li>Check contrast levels<\/li><li>Ensure tables have headings<\/li><li>Use accessibility checkers<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use Headings to improve readability<\/strong><\/h2>\n\n\n\n<p>Use headings to outline a document and provide structure.&nbsp; Headings allow any user to quickly jump from one section to another visually or auditorily (using read-aloud tools and screen readers)&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Do not fake headings by bolding, italicizing, or increasing the font size to make them look like headings.&nbsp;&nbsp;<\/li><li>Every document should have at least one heading and should begin with a Heading 1<\/li><li>Heading levels should not be skipped (e.g. h2 followed by h4).&nbsp;&nbsp;<\/li><li>If the look of a heading is undesirable, change that look in the document styles instead of skipping a heading<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use built-in lists<\/strong><\/h2>\n\n\n\n<p>Every word processing tool has built-in lists tools &#8211; even<a href=\"https:\/\/helpx.adobe.com\/indesign\/how-to\/create-bulleted-numbered-lists.html\"> InDesign has methods to create lists<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Use numbered lists when the order matters (e.g. step 1 must be completed before step 2)<\/li><li>Use bulleted lists when order does not matter&nbsp;<\/li><li>Use lists to break out items that are in paragraph format<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>List as paragraph:<\/p>\n\n\n\n<p>Here is the list of ingredients you\u2019ll need for creating a delish lemon curd without sugar: three egg yolks, \u00bd cup of powdered swerve, \u00bc cup freshly squeezed lemon juice, two teaspoons of lemon zest, four tablespoons of grass-fed butter<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The same paragraph with items broken into a list, which makes it much clearer to read:<\/p>\n\n\n\n<p>Here is the list of ingredients you\u2019ll need to create a delish lemon curd without sugar:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>3 large eggs<\/li><li>1\/2 cup powdered Swerve Sweetener<\/li><li>1\/4 cup freshly squeezed lemon juice<\/li><li>2 teaspoons grated lemon zest<\/li><li>4 tablespoons of grass-fed butter<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use built-in tools to control the look and feel<\/strong><\/h2>\n\n\n\n<p>Use built-in styles to control and manipulate a consistent look and feel.\u00a0 Word, Google Docs, and Apple Pages all provide the ability to create styles that help control the look and feel of headings, paragraphs, lists, and tables.\u00a0 Use them to help maintain consistency.\u00a0 Once these are in place they can easily be changed and automatically flow to the rest of your document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use alt text or descriptive text fields to describe imagery<\/strong><\/h2>\n\n\n\n<p>There is nothing more annoying when listening to a document or website than to hear a description as &#8220;https colon slash slash www dot somewebite dot com slash 123Px94abc? dot jpg&#8221;.&nbsp; This is what happens when you do not use alt text or mark an image as decorative.&nbsp; It is very fatiguing for the listener.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Imagine describing the image to a friend on the phone:\u00a0<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>How does the imagery relate to the content?<\/li><li>What is the essence of that image?<\/li><li>Why is it being included?<\/li><\/ul>\n\n\n\n<p>One important note:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Avoid text in images or text as images at all costs<\/li><li>If they absolutely must be used include the text contained in that image as a caption or in the descriptive text<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"635\" height=\"124\" src=\"https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-07-at-10.18.00-AM.png\" alt=\"\" class=\"wp-image-7145\" srcset=\"https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-07-at-10.18.00-AM.png 635w, https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-07-at-10.18.00-AM-300x59.png 300w, https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2021\/01\/Screen-Shot-2021-01-07-at-10.18.00-AM-270x53.png 270w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/figure>\n\n\n\n<p>The alt text should be &#8220;Top 10 Things to Do for Your Career Over Winter Break.&#8221;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use descriptive link text<\/strong><\/h2>\n\n\n\n<p>Link text should give readers an idea of where they will go when they engage a link.&nbsp; Some read-aloud and screen reader tools allow users to list all the links in one place.&nbsp; This means some users are getting links out of context.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Here are examples of links that don&#8217;t make much sense out of context:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Here<\/li><li>Click Here<\/li><li>Read More<\/li><li>Learn More<\/li><li>Click Here to Read More<\/li><\/ul>\n\n\n\n<p>Better options could be:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Download installation instructions here<\/li><li>Sign up for the vegetarian soup class<\/li><li>Read more about metacognition<\/li><li>Explore the life and times of Mr. Magoo<\/li><\/ul>\n\n\n\n<p>All the items in the list above tell the user what to expect when they click on those links<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fonts and Line Height<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Font-size should be no less than 12pt, 14pt is better and preferred for body text<\/li><li>Line-height should be 1.5\u00a0<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Font-family<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>A sans-serif font is suggested for body text.&nbsp; Verdana has the most white space between letters and it is the font recommended by most in the accessibility field.&nbsp; You can use a serif font if desired, just make the font size slightly larger and be sure there is plenty of white space between lines<\/li><li>Headings tend to be short, concise, and larger than body text.&nbsp; Because of these factors, font-family is not as important<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Check Contrast Levels<\/h2>\n\n\n\n<p>Maintain and check the contrast between the text color and the background.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>When in doubt use a contrast checker like <a href=\"http:\/\/bit.ly\/WebAIM-contrast-checker\">WebAim\u2019s contrast checker<\/a> and strive for AAA compliance<\/li><li>Use the <a href=\"http:\/\/bit.ly\/squint-test\">squint test<\/a> for early detection of possible issues<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ensure Tables Have Headings<\/h2>\n\n\n\n<p>Ideally, tables are only used to provide data.&nbsp; Think about a train schedule, election data, or international literacy data. All tables must have row and or column headings that tell users what the row or column content relates to.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Accessibility Checkers<\/h2>\n\n\n\n<p>Here are some links that might be useful<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/kb.swarthmore.edu\/display\/ALLY\/Making+Accessible+PDFs+from+Word\">Making accessible PDFs from Word<\/a><\/li><li><a href=\"https:\/\/kb.swarthmore.edu\/display\/ALLY\/Creating+Accessible+Documents\">Creating Accessible Documents<\/a><\/li><li>LinkedIn Learning&#8217;s <a href=\"https:\/\/www.linkedin.com\/learning-login\/share?forceAccount=false&amp;redirect=https%3A%2F%2Fwww.linkedin.com%2Flearning%2Fcreating-accessible-pdfs%3Ftrk%3Dshare_ent_url&amp;account=76206914\">Creating Accessible PDFs<\/a> with InDesign<\/li><li><a href=\"https:\/\/blogs.swarthmore.edu\/its\/2019\/03\/18\/grackle-making-google-documents-accessible\/\">Grackle &#8211; Making Google Documents Accessible<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We have all come to appreciate the ability to consume documents in different ways in recent months. When a document is made accessible, it means we provide readers with multiple ways of interacting with it. We can listen, we can &hellip; <a href=\"https:\/\/blogs.swarthmore.edu\/its\/2021\/01\/07\/how-to-be-friendly-to-everyones-reading-style\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to be friendly to everyone&#8217;s reading style<\/span><\/a><\/p>\n","protected":false},"author":57,"featured_media":7150,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2,71,113,115,114],"tags":[90],"class_list":{"0":"post-7140","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-academic-technology","8":"category-accessibility","9":"category-facultystaff","10":"category-people","11":"category-students","12":"tag-featured","14":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/blogs.swarthmore.edu\/its\/wp-content\/uploads\/2021\/01\/springColors.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/ph2nPL-1Ra","_links":{"self":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/7140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/comments?post=7140"}],"version-history":[{"count":11,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/7140\/revisions"}],"predecessor-version":[{"id":8602,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/posts\/7140\/revisions\/8602"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/media\/7150"}],"wp:attachment":[{"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/media?parent=7140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/categories?post=7140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.swarthmore.edu\/its\/wp-json\/wp\/v2\/tags?post=7140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}