{"id":1013,"date":"2026-04-09T22:38:37","date_gmt":"2026-04-09T16:38:37","guid":{"rendered":"https:\/\/www.ssec.wisc.edu\/researchsupport\/?page_id=1013"},"modified":"2026-04-23T01:48:54","modified_gmt":"2026-04-22T19:48:54","slug":"accessibility","status":"publish","type":"page","link":"https:\/\/www.ssec.wisc.edu\/researchsupport\/accessibility\/","title":{"rendered":"Digital Accessibility"},"content":{"rendered":"\n<div class=\"wp-block-group ssec-two-cols-with-sidebar\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">About Digital Accessibility<\/h3>\n\n\n\n<p>Digital accessibility is a series of practices that can make content available to more people. This means designing websites, documents, and tools so more people can use them effectively. By increasing accessibility, we can improve usability for everyone and reduce barriers.<\/p>\n\n\n\n<p>Digital accessibility guidelines apply to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website content and web forms<\/li>\n\n\n\n<li>Software, apps, and mobile apps<\/li>\n\n\n\n<li>Multimedia (i.e. videos and gifs)<\/li>\n\n\n\n<li>Social media posts<\/li>\n\n\n\n<li>Blogs<\/li>\n\n\n\n<li>Course content<\/li>\n\n\n\n<li>Employee work tools, databases, systems, and internal documentation<\/li>\n\n\n\n<li>Emails<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why Now?<\/h3>\n\n\n\n<p>New laws have been passed at the federal level that have led to UW&#8217;s emphasis on accessibility across campus. However, accessibility has always been important, and the new laws are viewed as an opportunity to improve our web design process, become more educated about accessibility, and clean up material that is no longer needed.<\/p>\n\n\n\n<p>Keep in mind the 3 Rs when evaluating digital accessibility:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Remove<\/strong> content that is no longer relevant.<\/li>\n\n\n\n<li><strong>Remediate<\/strong> older content as you have time, focusing on high-impact materials first.<\/li>\n\n\n\n<li><strong>Right<\/strong> first-when create anything new, design with accessibility first.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group side-col\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group side-bar\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">More Questions?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Email us at <a href=\"mailto:accessibility@ssec.wisc.edu\">accessibility@ssec.wisc.edu<\/a><\/li>\n<\/ul>\n<\/div><\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color has-medium-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/accessible.wisc.edu\/digital\/\" style=\"border-top-left-radius:7px;border-top-right-radius:7px;border-bottom-left-radius:7px;border-bottom-right-radius:7px\">Digital Accessibility @ UW-Madison<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background has-link-color has-medium-font-size has-custom-font-size wp-element-button\" href=\"https:\/\/www.ada.gov\/resources\/2024-03-08-web-rule\/\" style=\"border-top-left-radius:7px;border-top-right-radius:7px;border-bottom-left-radius:7px;border-bottom-right-radius:7px\">Federal Digital Accessibility Fact Sheet<\/a><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Digital Accessibility Tips and Resources<\/h3>\n\n\n<div ><style>#sp-ea-1023 .spcollapsing { height: 0; overflow: hidden; transition-property: height;transition-duration: 300ms;}#sp-ea-1023.sp-easy-accordion>.sp-ea-single {margin-bottom: 10px; border: 1px solid #e2e2e2; }#sp-ea-1023.sp-easy-accordion>.sp-ea-single>.ea-header a {color: #444;}#sp-ea-1023.sp-easy-accordion>.sp-ea-single>.sp-collapse>.ea-body {background: #fff; color: #444;}#sp-ea-1023.sp-easy-accordion>.sp-ea-single {background: #eee;}#sp-ea-1023.sp-easy-accordion>.sp-ea-single>.ea-header a .ea-expand-icon { float: left; color: #444;font-size: 16px;}<\/style><div id=\"sp_easy_accordion-1775765468\"><div id=\"sp-ea-1023\" class=\"sp-ea-one sp-easy-accordion\" data-ea-active=\"ea-click\" data-ea-mode=\"vertical\" data-preloader=\"\" data-scroll-active-item=\"\" data-offset-to-scroll=\"0\"><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10230\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10230\" aria-controls=\"collapse10230\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Text and Background<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10230\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10230\"> <div class=\"ea-body\"><p>Font choice and size:<\/p><ul><li>Use sans serif fonts when you choose custom fonts &#8212; Arial and Calibri are examples. Using the default font is often preferable.<\/li><li>Keep text size large. &#8220;Point&#8221; is not a standard measurement of size and can vary by font, so use good judgment. Usually, 12 is a good minimum point size.<\/li><li>Don&#8217;t mix and match fonts too much, as this can be hard to read. Use a maximum of three fonts, and preferably fewer.<\/li><li>Avoid all caps text. When all of the letters are the same height, it can be harder to distinguish them.<\/li><\/ul><p>Color and contrast:<\/p><ul><li>When possible, keep body text the default dark color (black or dark gray) on light backgrounds.<\/li><li>If choosing other text or background colors, ensure that they meet the 4.5:1 contrast ratio requirement using the <a href=\"https:\/\/accessibleweb.com\/color-contrast-checker\/\">Accessible Web<\/a> or <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAIM<\/a> contrast checkers.<\/li><\/ul><p>&nbsp;<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10231\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10231\" aria-controls=\"collapse10231\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Images and Alternative Text<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10231\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10231\"> <div class=\"ea-body\"><p>Alternative text (&#8220;alt text&#8221;) describes non-text elements like photos, icons, logos, and illustrations so screen readers can convey them to blind and low-vision users. People whose internet connections may not load an image may also read the alt text to understand what is being shown. Photographs, pictures, icons, logos, and any pictorial elements should have alt text.<\/p><p>Alt text is <strong>not<\/strong> the same thing as a caption. Screen readers read out captions, so alt text should communicate information that is\u00a0<strong>only<\/strong> available in the image so as to not create a repetitive experience for people using screen readers. When writing alt text, try to think about what the purpose of your image is &#8212; why is it here, and what information does it offer that would be helpful for someone who can&#8217;t see it?<\/p><p>Best practices to follow:<\/p><ul><li>Keep alt text 150 characters or fewer to avoid overwhelming users with screen readers.<\/li><li>Don&#8217;t start alt text with &#8220;image of,&#8221; &#8220;photograph of,&#8221; or &#8220;screenshot of&#8221; unless that detail is essential. Screen readers inform users that they are reading alt text for an image before doing so, and low-vision users or those with poor internet connections can often tell that they are looking at an image, so this information is redundant. However, if showing, for example, a satellite image, starting with &#8220;satellite image&#8221; may communicate important context.<\/li><li>Images used as links should have alt text that describes the destination page or action, not the visual. For example, alt text might say &#8220;Geostationary satellites page&#8221; if it is attached to an image leading to that page.<\/li><\/ul><p>For an example of alt text, consider the following image:<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1040 size-medium\" src=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/SuomiCornfield-300x216.jpg\" alt=\"Verner Suomi and four other white men in suits stand in a cornfield around a scientific instrument.\" width=\"300\" height=\"216\" srcset=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/SuomiCornfield-300x216.jpg 300w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/SuomiCornfield-768x554.jpg 768w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/SuomiCornfield.jpg 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p><p>For this post, I wrote the following alt text: &#8220;Verner Suomi and four other white men in suits stand in a cornfield around a scientific instrument.&#8221; However, many other contexts are possible. In a post about Verner Suomi&#8217;s scientific accomplishments, I might say &#8220;Verner Suomi, Robert Parent, and other scientists stand with the net-flux radiometer in a cornfield.&#8221; In a post about corn, maybe I would write &#8220;Five white men with scientific equipment stand in a field of dent corn slightly taller than their heads. Tassles are visible on corn heads.&#8221; Consider what each alt text conveys, and when you might use each one.<\/p><p>In WordPress, add alt text to images either by selecting the image and then &#8220;edit&#8221; or by navigating to the WordPress media library and adding the alt text to the box labeled &#8220;alternative text&#8221;.<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1041\" src=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage-300x136.png\" alt=\"The WordPress media library image editor, with boxes to write in alternative text and a caption for an example image.\" width=\"300\" height=\"136\" srcset=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage-300x136.png 300w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage-1024x465.png 1024w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage-768x349.png 768w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage-1536x698.png 1536w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/WPEditImage.png 1847w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p><p>For more information, check out the <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/alternative-text\/\">UW &#8220;Make it Accessible&#8221; Alternative Text<\/a> page.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10232\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10232\" aria-controls=\"collapse10232\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Headings<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10232\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10232\"> <div class=\"ea-body\"><p>Headings are used to organize information on a page. There are six levels of heading. These are hard-coded into the HTML of a page, and screen reader users can skip from one heading to the next of the same or different levels in order to more efficiently find information on a page. For this reason, it is important to follow best practices:<\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">There should always be one level 1 heading (h1) on a page (and only one). In our WordPress theme, this is actually the name of the entire site, so no individual page should have an h1.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">If you use additional levels (h2, h3, etc.), use them in order \u2013 don\u2019t skip. In our WordPress theme, the page title (not the site title) is automatically an h2, so there should be no other h2s on the page &#8212; any additional headings should start with h3 (if you need another h2, that should be a separate page, organizationally).<\/span><\/li><li>Headings should not be used for styling, as this is very confusing if you&#8217;re using a screen reader. Image if you were trying to go through section headings to find the &#8220;methods&#8221; section of an article, and for some reason you had to hear someone read out any emphasized text in a section first. If you want to emphasize text, consider <strong>bolding<\/strong>.<\/li><\/ul><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10233\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10233\" aria-controls=\"collapse10233\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Links<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10233\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10233\"> <div class=\"ea-body\"><p>Best practices to follow when inserting links on pages:<\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Do not leave bare links (ex: <\/span><a href=\"https:\/\/www.library.wisc.edu\/\"><span style=\"font-weight: 400\"><span style=\"text-decoration: underline\">https:\/\/www.library.wisc.edu\/<\/span><\/span><\/a><span style=\"font-weight: 400\">). A screen reader will read this out letter by letter. Instead, link text should describe the link (ex: <\/span><a href=\"https:\/\/www.library.wisc.edu\/\"><span style=\"font-weight: 400\"><span style=\"text-decoration: underline\">library homepage<\/span><\/span><\/a><span style=\"font-weight: 400\">).\u00a0<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Avoid making link text things like \u201chere\u201d or \u201cclick here\u201d (ex. <\/span><a href=\"https:\/\/www.library.wisc.edu\/\"><span style=\"font-weight: 400\"><span style=\"text-decoration: underline\">click here<\/span><\/span><\/a><span style=\"font-weight: 400\"> for the library website). Some screen readers can jump from link to link for users looking for a particular link, and so links should be distinct from one another without context.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Links should be differentiated from other text in ways beyond just color \u2013 for example, with underlining. The default link formatting on most sites (including WordPress) should really just be left as is.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Images should not have unlabelled links attached to them. If you are attaching a link to an image, make sure to give the image alt text describing where the link will take the user. There is no need to say &#8220;link&#8221; in the alt text &#8212;\u00a0 a screen reader will inform the user that it is a link.<\/span><\/li><\/ul><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10234\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10234\" aria-controls=\"collapse10234\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Lists<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10234\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10234\"> <div class=\"ea-body\"><p>Lists are a great way to improve the usability and accessibility of a site by making information clear and organized. However, there are a few best practices to follow to maintain accessibility:<\/p><ul><li>If using unordered lists (like this one), do not make nested lists. Some screen readers do not distinguish between &#8220;levels&#8221; of list indentation\/nesting, so this can be confusing. This can be acceptable if the list is ordered (has numbers instead of bullet points), as users with screen readers will be able to hear the letter before the nested line and understand its ordering.<ul><li>This is a nested bullet point.<\/li><\/ul><\/li><\/ul><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10235\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10235\" aria-controls=\"collapse10235\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Tables<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10235\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10235\"> <div class=\"ea-body\"><p>Tables are invaluable means of conveying data, and are often good alternatives for inaccessible data displays like graphs. However, this means that tables should only be used to display data that can actually be described by a table &#8212; do not use tables to arrange elements on a page, such as to make an image sit next to a block of text. There are WordPress block elements specifically designed to do this, such as the &#8220;row&#8221; block or the &#8220;column&#8221; block.<\/p><p>Screen readers communicate table information by reading out the column header, the row header, and then the value in the intersecting box. Because of this, it is important to make sure any table has the following characteristics:<\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">It has a heading row and column to label values. Screen readers will read off the heading for each before reading the values sequentially.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">No cells are combined or split to show multiple values. Screen readers may have difficulty interpreting and communicating these.<\/span><\/li><\/ul><p>This also helps with general table hygiene and clarity.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10236\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10236\" aria-controls=\"collapse10236\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Graphs<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10236\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10236\"> <div class=\"ea-body\"><p><span style=\"font-weight: 400\">When possible, make graphs more accessible by:<\/span><\/p><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Labelling near elements, not using keys.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Using texture, symbols, or patterning, in addition to color, to distinguish elements.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Presenting information in a table in addition to graphically.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Using whitespace between elements to help those with low vision distinguish elements.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Describing the takeaways in the main text.<\/span><\/li><\/ul><p>You don&#8217;t need to use all of these techniques in every single graph! A good fail safe is to always include the data in the graph (or at least a summary of the main takeaways) textually elsewhere.<\/p><p>If the information in the graph is conveyed in detail elsewhere in your text, you do <strong>not<\/strong> need to give your graph an alt text &#8212; this would be redundant.<\/p><p>Google Sheets is not usually a good tool for creating accessible graphs. However, Excel has many <a href=\"https:\/\/support.microsoft.com\/en-gb\/office\/change-the-shape-fill-outline-or-effects-of-chart-elements-edbc9ae5-12ef-46d0-b078-67f450a35cb9\">options for adding textures and patterns to colors<\/a>.<\/p><p><a href=\"https:\/\/accessibility.huit.harvard.edu\/data-viz-charts-graphs\">Harvard&#8217;s accessible graphs guide<\/a> is also a great tool.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10237\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10237\" aria-controls=\"collapse10237\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> PDFs<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10237\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10237\"> <div class=\"ea-body\"><p><span style=\"font-weight: 400\">PDFs are not accessible \u201cby default\u201d \u2013 any PDFs that currently exist on SSEC\/CIMSS sites are unlikely to be accessible. <\/span><span style=\"font-weight: 400\">Adobe Acrobat cannot automatically recognize and differentiate between headings, body copy, tables, etc., which leads to the difficulties with PDF accessibility.<\/span><\/p><p><b>Microsoft Word\u2019s accessibility checker<\/b><span style=\"font-weight: 400\"> is a simple way to check a document before turning it into a PDF. <\/span><span style=\"font-weight: 400\">Old PDFs can also be converted to Word Docs, edited, then re-converted to PDF. If you go this route, you should still run <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/documents\/testing\/#microsoft-word-and-powerpoint\">basic accessibility checks<\/a> on the PDF once it is converted.<\/span><\/p><p>If you need to make a PDF accessible, you can remediate it. PDF remediation is a lengthy process &#8212; if you expect to have to do it more than once, it is worthwhile to go through the <a href=\"https:\/\/www.section508.gov\/training\/pdfs\/aed-cop-pdf03\/\">Section 508 videos<\/a> and learn how to do it. If you don&#8217;t expect to remediate more than one PDF, though, it might make more sense to try to convert the document to an accessible Word document or HTML.<\/p><p>Adobe Acrobat has a built-in Optical Character Recognition (OCR) tool. This allows you to change a scanned document or an image into a digital file. You can then save it as a text document and search, save, and edit all the text in the image. <a href=\"https:\/\/www.adobe.com\/acrobat\/guides\/what-is-ocr.html\">OCR<\/a> is an automatic and simple-to-use function in Adobe Acrobat &#8212; just click on the &#8220;edit&#8221; button in the left-hand toolbar. OCR provides better access to PDFs for blind and visually impaired users because it enables them to read PDFs with a screen reader. Once you have performed OCR on a PDF, you will likely still need to <a href=\"https:\/\/www.section508.gov\/training\/pdfs\/aed-cop-pdf03\/\">remediate the PDF<\/a>\u00a0in order to make sure it recognizes headers, tables, etc.<\/p><p>Adobe Acrobat also has a <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/documents\/testing\/#microsoft-word-and-powerpoint\">built-in accessibility checker<\/a>.<\/p><p>&nbsp;<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10238\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10238\" aria-controls=\"collapse10238\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Documents<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10238\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10238\"> <div class=\"ea-body\"><p>Generally speaking, all of the criteria above apply to any web document you might create.<\/p><p>In Google Docs, there are <a href=\"https:\/\/support.google.com\/docs\/answer\/6199477?hl=en\">various practices you can use to make your documents accessible<\/a>. In documents, Google allows you to <a href=\"https:\/\/support.google.com\/docs\/answer\/1696711?hl=en&amp;co=GENIE.Platform%3DDesktop#zippy=%2Cpin-header-rows-in-google-docs\">designate a header row for tables<\/a>, and you should always do this.<\/p><p>Both Google and Microsoft have <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/documents\/testing\/#microsoft-word-and-powerpoint\">built-in accessibility checkers<\/a> you can use to help check your work.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-10239\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse10239\" aria-controls=\"collapse10239\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> PowerPoints and Other Slideshows<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse10239\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-10239\"> <div class=\"ea-body\"><p>Both Google Slides and PowerPoint allow for the accessibility guidelines listed above, and you should strive to make these changes.<\/p><p>To add alt text in Google Slides or PowerPoint, right click on the image and select &#8220;alternative text&#8221; (Google Slides) or &#8220;edit alt text&#8221; (PowerPoint).<\/p><p>Both slides platforms automatically make heading slide text into the appropriate heading, so in order to keep headings consistent, <strong>make sure that you are using slide templates as intended<\/strong>, with a title slide at the start (and only used once), and appropriate subsection headings for subsections, etc.<\/p><p>In PowerPoint, you can make sure that tables have a header row by checking the &#8220;header row&#8221; box in the upper toolbar while the table is selected. Google Slides does not allow for table headers, so if your presentation requires tables, choose PowerPoint over Google Slides.<\/p><p>If presenting data in graphs, make sure to follow the accessibility tips for the graphs, and also to put the data presented in the graph elsewhere in text or in a table. If the data is too long or complex to be written out in full, provide a textual summary somewhere on the slide.<\/p><p>Both Google Slides and PowerPoint have <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/documents\/testing\/#microsoft-word-and-powerpoint\">built-in accessibility checkers<\/a> you can use to help check your work.<\/p><p>In Google Slides, <a href=\"https:\/\/support.google.com\/docs\/answer\/9109474?sjid=8990152142933385746-NC\">live captioning<\/a> is available with some browsers.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-102310\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse102310\" aria-controls=\"collapse102310\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Emails<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse102310\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-102310\"> <div class=\"ea-body\"><p>All of the above best practices also apply to emails. Here are some Outlook-specific tips:<\/p><ul><li>In order to add headings to emails, open your email, select the body area, and then navigate to &#8220;format text&#8221; in the upper toolbar. From there, choose the &#8220;text styles&#8221; button (an &#8220;A&#8221; with a pencil). <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1042\" src=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookHeadingBar-300x26.png\" alt=\"The text formatting options bar in Outlook mail.\" width=\"300\" height=\"26\" srcset=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookHeadingBar-300x26.png 300w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookHeadingBar-768x67.png 768w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookHeadingBar.png 843w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li><li>You can run accessibility checks in Outlook prior to sending emails. Do this by choosing the &#8220;more&#8221; (an ellipsis) option in the upper toolbar, then &#8220;check accessibility&#8221;. <img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-1043 alignright\" src=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookAccessibilityCheck-115x300.png\" alt=\"The Outlook email &quot;more options&quot; menu, including the &quot;check accessibility&quot; option.\" width=\"115\" height=\"300\" srcset=\"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookAccessibilityCheck-115x300.png 115w, https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-content\/uploads\/sites\/31\/2026\/04\/OutlookAccessibilityCheck.png 183w\" sizes=\"auto, (max-width: 115px) 100vw, 115px\" \/><\/li><li>Make sure to add alt text to any images included in the body of your email (including any logos or images in your signature). This can be done by right-clicking on the image.<\/li><li>Include a subject that is brief but contains useful keywords about the contents of the email. This helps both with accessibility and with searchability for anyone who might want to find your email in the future.<\/li><\/ul><p>More information can be found on the <a href=\"https:\/\/www.section508.gov\/create\/email-messages\/\">Section 508 webpage<\/a>.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-102311\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse102311\" aria-controls=\"collapse102311\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Social Media<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse102311\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-102311\"> <div class=\"ea-body\"><p><strong>Images:\u00a0<\/strong><\/p><ul><li>Add clear, descriptive\u00a0<a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/alternative-text\/\">alt text<\/a>\u00a0(what\u2019s happening,\u00a0who\u2019s\u00a0in it, key context).<\/li><li>Tip: Some platforms\u00a0don\u2019t\u00a0support alt text (Instagram Stories, for example). If that is the case,\u00a0you should add\u00a0image descriptions\u00a0in\u00a0image\u00a0captions.<\/li><li>Avoid\u00a0excessive\u00a0text on graphics; if needed, repeat it in the caption or alt text.<\/li><li>Ensure color contrast meets accessibility guidelines (<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">use this tool to check<\/a>).<\/li><li>Avoid images with rapid flashing (&gt;3 times per\u00a0second).<\/li><\/ul><p><strong>Video and audio:\u00a0<\/strong><\/p><ul><li>Ensure captions are\u00a0accurate\u00a0\u2014 review auto\u2011captions before posting.<\/li><li>Include transcripts for longer audio or video content.<\/li><li>Use plain, concise language.<\/li><li>If using hashtags, use\u00a0UpperCamelCase\u00a0(also known as\u00a0TitleCase\u00a0or\u00a0PascalCase) for multiword hashtags (for example: #DisabilityAdvocacy).<\/li><li>Minimize emoji\u00a0use; if using,\u00a0place them at the end of sentences.<\/li><li>If the platform allows\u00a0you to hyperlink text, use descriptive text\u00a0so that a screen reader user gets\u00a0an accurate\u00a0idea about the destination or purpose of the link\u00a0they\u2019re\u00a0clicking.<\/li><\/ul><p>For more guidelines, see <a href=\"https:\/\/it.wisc.edu\/learn\/make-it-accessible\/social-media-accessibility\/\">Social Media Accessibility<\/a> page.<\/p><\/div><\/div><\/div><div class=\"ea-card sp-ea-single\"><h3 class=\"ea-header\"><a class=\"collapsed\" id=\"ea-header-102312\" role=\"button\" data-sptoggle=\"spcollapse\" data-sptarget=\"#collapse102312\" aria-controls=\"collapse102312\" href=\"#\" aria-expanded=\"false\" tabindex=\"0\"><i aria-hidden=\"true\" role=\"presentation\" class=\"ea-expand-icon eap-icon-ea-expand-plus\"><\/i> Easy First Steps and Tools<\/a><\/h3><div class=\"sp-collapse spcollapse spcollapse\" id=\"collapse102312\" data-parent=\"#sp-ea-1023\" role=\"region\" aria-labelledby=\"ea-header-102312\"> <div class=\"ea-body\"><h5><span style=\"font-weight: 400\">How does WordPress support accessibility?<\/span><\/h5><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">WordPress does most of the work for you &#8212; it makes managing accessible web content easier.<\/span><\/li><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">The SSEC Communications Team strongly recommends migrating your websites to WordPress &#8212; there are other benefits besides accessibility.<\/span><\/li><\/ul><h5><span style=\"font-weight: 400\">Tools to use<\/span><\/h5><ul><li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Browser extension: axe DevTools &#8211; Web Accessibility Testing<\/span> available on <a href=\"https:\/\/chromewebstore.google.com\/detail\/axe-devtools-web-accessib\/lhdoppojpmngadmnindnejefpokejbdd\"><span style=\"font-weight: 400\">Chrome<\/span><\/a> and on <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/axe-devtools\/\"><span style=\"font-weight: 400\">Firefox<\/span><\/a>.<\/li><li>UW&#8217;s <a href=\"https:\/\/it.wisc.edu\/wp-content\/uploads\/Digital-Accessibility-Fundamentals-Checklist-1.pdf\">Make It Accessible basic checklist<\/a>.<\/li><\/ul><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>About Digital Accessibility Digital accessibility is a series of practices that can make content available to more people. This means designing websites, documents, and tools so more people can use them effectively. By increasing accessibility, we can improve usability for everyone and reduce barriers. Digital accessibility guidelines apply to: Why Now? New laws have been [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1013","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/pages\/1013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/comments?post=1013"}],"version-history":[{"count":16,"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/pages\/1013\/revisions"}],"predecessor-version":[{"id":1048,"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/pages\/1013\/revisions\/1048"}],"wp:attachment":[{"href":"https:\/\/www.ssec.wisc.edu\/researchsupport\/wp-json\/wp\/v2\/media?parent=1013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}