{"id":343,"date":"2025-10-06T14:56:00","date_gmt":"2025-10-06T18:56:00","guid":{"rendered":"https:\/\/cms.web.umflint.edu\/accessibility\/?p=343"},"modified":"2026-06-22T15:11:38","modified_gmt":"2026-06-22T19:11:38","slug":"designing-content-for-screen-readers","status":"publish","type":"post","link":"https:\/\/www.umflint.edu\/accessibility\/designing-content-for-screen-readers\/","title":{"rendered":"Designing Content for Screen Readers"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Creating content that works for everyone means considering how people with different abilities interact with websites and documents. Screen reader users, for example, rely on structure and clear content to navigate and understand what\u2019s on a page, often using only their keyboard. Let\u2019s take a closer look at how we can make our content more accessible by using alt text, headings, and descriptive links.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">How Screen Readers Navigate Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Screen readers typically begin reading from the top of a page and move downward, including reading out alternate text for images. Many users navigate through content using keyboard commands and shortcuts that allow them to jump between page elements such as headings, links, and form fields without having to read everything in order.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s why using structured content like headings and descriptive links is so important.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">Alt Text for Images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Making images and graphics accessible starts with alternative text (alt text). This short description tells users what an image conveys, which is especially important for those who can\u2019t see it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-large-font-size\">Tips for writing good alt text<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Focus on the purpose and context of the image.<\/li>\n\n\n\n<li>Keep it clear and concise.<\/li>\n\n\n\n<li>Avoid phrases like \u201cimage of\u201d or \u201cpicture of.\u201d Screen readers already announce it\u2019s an image.<\/li>\n\n\n\n<li>Think about how you\u2019d describe the image to someone in person.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">Headings for Structure &amp; Navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Headings provide structure and a clear hierarchy, making it easier for all users, especially those using screen readers, to scan and understand content. The image below showcases a screen reader rotor, isolating the headings from all the other content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"493\" src=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/headings-rotor.png\" alt=\"Screenshot of VoiceOver rotor pulling up headings and Why Checking Captions Matters is highlighted\" class=\"wp-image-351\" title=\"Screenshot 2025-06-04 at 3.08.07\u202fPM.png\" srcset=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/headings-rotor.png 602w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/headings-rotor-300x246.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Screen readers allow users to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jump from heading to heading.<\/li>\n\n\n\n<li>Pull up a list of all headings on a page.<\/li>\n\n\n\n<li>Understand the importance of each section based on heading level (H1-H6).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong>&nbsp;Use headings in logical order;&nbsp; don\u2019t skip levels just for visual appeal.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">Descriptive Links<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Clear, meaningful links help users understand where they\u2019ll go if they click on it or select it with a screen reader. You should avoid vague phrases like: \u201cClick here,\u201d \u201cRead more,\u201d or \u201cLearn more.\u201d Instead, use phrases like: \u201cRead more about the BSN program\u201d or \u201cDownload the application (PDF).\u201d Below we have two examples of a screen reader pulling up the list of links on a page. One page has many links that just state \u201cclick here\u201d while the other has more descriptive links.<\/p>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"270\" src=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-rotor-300x270.png\" alt=\"A list of links labeled &quot;click here&quot; displayed in VoiceOver.\" class=\"wp-image-349\" title=\"Screenshot of VoiceOver rotor pulling up list of links on a page\" srcset=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-rotor-300x270.png 300w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-rotor.png 768w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor-1024x591.png\" alt=\"Screenshot of VoiceOver rotor pulling up list of descriptive links on a page\" class=\"wp-image-346\" title=\"Screenshot 2025-09-22 at 1.24.00\u202fPM.png\" srcset=\"https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor-1024x591.png 1024w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor-300x173.png 300w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor-768x443.png 768w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor-1536x886.png 1536w, https:\/\/www.umflint.edu\/accessibility\/wp-content\/uploads\/sites\/18\/2026\/06\/links-webpage-rotor.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Screen readers let users pull up a list of all links on a page. If multiple links are labeled simply \u201cclick here,\u201d users can\u2019t tell where each link leads, making navigation confusing and inefficient. In contrast, descriptive link text, such as \u201cUsing Headings to Structure Content\u201d gives meaningful context and allows users of assistive technology to quickly understand and move through a page. Descriptive links create a clearer, more user-friendly experience for everyone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By applying these accessibility practices such as alt text, headings, and clear links, you\u2019re helping ensure our content is inclusive and usable for everyone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-x-large-font-size\">Resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.umflint.edu\/accessibility\/guides\/structuring-your-documents\/\">Structuring Documents with Headings<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.umflint.edu\/accessibility\/tools\/wolverine-describer\/\">Alt Text with Wolverine Describer<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.nvaccess.org\/download\/\">Download NVDA<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dequeuniversity.com\/screenreaders\/nvda-keyboard-shortcuts\">NVDA commands<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/software.umich.edu\/titles\/jaws-2025\">Download JAWS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dequeuniversity.com\/screenreaders\/jaws-keyboard-shortcuts\">JAWS commands<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dequeuniversity.com\/screenreaders\/talkback-shortcuts\">TalkBack gestures<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dequeuniversity.com\/screenreaders\/voiceover-ios-shortcuts\">VoiceOver for iOS gestures<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/dequeuniversity.com\/screenreaders\/voiceover-keyboard-shortcuts\">VoiceOver for Mac commands<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Creating content that works for everyone means considering how people with different abilities interact with websites and documents. Screen reader users, for example, rely on structure and clear content to navigate and understand what\u2019s on a page, often using only their keyboard. Let\u2019s take a closer look at how we can make our content more [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-343","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"featured_media_global":[],"_links":{"self":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":3,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/posts\/343\/revisions\/356"}],"wp:attachment":[{"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.umflint.edu\/accessibility\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}