{"id":8515,"date":"2026-04-15T11:36:41","date_gmt":"2026-04-15T17:36:41","guid":{"rendered":"https:\/\/www.macalester.edu\/its\/?page_id=8515"},"modified":"2026-07-31T08:56:14","modified_gmt":"2026-07-31T14:56:14","slug":"digital-accessibility-guidelines","status":"publish","type":"page","link":"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/","title":{"rendered":"Digital Accessibility Guidelines"},"content":{"rendered":"<section class=\"introduction block-container\" >\n    <div class=\"introduction__content\">\n    \t        \t<p class=\"introduction__copy\">When we&#8217;re creating digital media\u2014whether writing an email, designing a Moodle course, publishing a podcast, or posting to social media\u2014it&#8217;s important to make sure our audience can access our content. Authoring accessible digital materials is vital to creating an inclusive, thriving campus community.<\/p>\n    \t    <\/div>\n<\/section>\n\n\n<p>This page offers foundational guidelines for creating accessible digital content. These guidelines are based on the World Wide Web Consortium&#8217;s (W3C&#8217;s) <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\">Web Content Accessibility Guidelines (WCAG) 2.1 AA<\/a>, and they&#8217;re the baseline we&#8217;re aiming for across campus. Use the links below each topic to find information and resources that can help you start putting these guidelines into practice.<\/p>\n\n\n\n<p>There&#8217;s a lot here, but don&#8217;t feel like you have to start doing everything at once. If it&#8217;s feeling overwhelming, try adding one accessible practice to your routine this week (or month). At the end of that period, see if you can add one more practice. And if you&#8217;d like extra support, reach out to your academic technologist. We&#8217;re here to help!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n<section class=\"card-group block-container three-col-txt card-group--3\" >\n            <div class=\"card-group__header-container\">\n            <div class=\"card-group__header-inner\">\n                <div class=\"base-lockup\">\n                                                                <h2 class=\"base-lockup__heading\">Digital Accessibility in Three Parts<\/h2>\n                                                        <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"card-group__cards-container\">\n                    <article class=\"card-group__card\">\n                                                            <img decoding=\"async\" class=\"card-group__card-image card-group__card-image-nolink\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/10-640x0-c-default.png\">\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                Creating Accessible Materials\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">When we design materials with accessibility in mind, we save time in the long run and create more equitable experiences for our users. Read on below for best practices when creating accessible digital materials.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/macalester.topdesk.net\/tas\/public\/ssp\/content\/detail\/knowledgeitem?unid=7d9bdb7194544726b55224a8bb6c2589\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/pruners-take-2-640x0-c-default.jpg\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/macalester.topdesk.net\/tas\/public\/ssp\/content\/detail\/knowledgeitem?unid=7d9bdb7194544726b55224a8bb6c2589\" target=\"_self\">\n                                                Remediating Inaccessible Materials\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">We can modify inaccessible materials to make them more accessible, using their native software or tools like Panorama or Adobe Acrobat Pro.<\/p>\n                    \n                                            <div class=\"card-group__card-cta\">\n                            <a class=\"base-cta-secondary\" href=\"https:\/\/macalester.topdesk.net\/tas\/public\/ssp\/content\/detail\/knowledgeitem?unid=7d9bdb7194544726b55224a8bb6c2589\" target=\"_self\">More on Panorama<\/a>\n                        <\/div>\n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/disability-resources\/assistive-tech\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/11-640x0-c-default.jpg\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/disability-resources\/assistive-tech\/\" target=\"_self\">\n                                                Providing Assistive Technology\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Assistive technology can improve user experience of digital materials. Mac offers a variety of assistive technology\u2014some reserved for folks with accommodations, and some available to everyone.<\/p>\n                    \n                                            <div class=\"card-group__card-cta\">\n                            <a class=\"base-cta-secondary\" href=\"https:\/\/www.macalester.edu\/disability-resources\/assistive-tech\/\" target=\"_self\">Assistive Tech at Mac<\/a>\n                        <\/div>\n                                                            \n                <\/div>\n            <\/article>    \n            <\/div>\n<\/section>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Digital Accessibility Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Organizing Content<\/h3>\n\n\n<section class=\"card-group block-container three-col-txt card-group--3\" >\n        <div class=\"card-group__cards-container\">\n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/headings\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Adobe-Express-file-10-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/headings\/\" target=\"_self\">\n                                                Headings\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Headings separate paragraphs of content. True headings use the heading text style, rather than merely being large text or bold.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/lists\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Untitled-2-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/lists\/\" target=\"_self\">\n                                                Lists\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Lists present strings of related content. True lists have special formatting that communicates with screen readers. Using ordered or unordered lists matters, too.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/tables\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Adobe-Express-file-3-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/tables\/\" target=\"_self\">\n                                                Tables\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Tables are only for displaying data\u2014not for arranging content. Tables need formatting to help both screen reader users and sighted readers navigate them smoothly.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n            <\/div>\n<\/section>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Clarity<\/h3>\n\n\n<section class=\"card-group block-container three-col-txt card-group--3\" >\n        <div class=\"card-group__cards-container\">\n                    <article class=\"card-group__card\">\n                                                            <img decoding=\"async\" class=\"card-group__card-image card-group__card-image-nolink\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/magnifying-glass-640x0-c-default.png\">\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                Readability &amp; Legibility\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Not just what you write, but paragraph structure, word choice, and how you style your text can all impact readers&#8217; ability to perceive and understand your content.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/descriptive-links\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Adobe-Express-file-2-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/descriptive-links\/\" target=\"_self\">\n                                                Descriptive Links\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Descriptive text for hyperlinks helps readers understand where each link leads. They&#8217;re both clearer and more efficient than &#8220;naked&#8221; hyperlinks (http:\/\/&#8230;).<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/color-and-contrast\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Untitled-5-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/color-and-contrast\/\" target=\"_self\">\n                                                Color\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">WCAG 2.1 AA has standards for color contrast. This, plus how and when you use color (and with what) can all impact accessibility.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n            <\/div>\n<\/section>\n\n\n\n<h3 class=\"wp-block-heading\">Media Considerations<\/h3>\n\n\n<section class=\"card-group block-container three-col-txt card-group--3\" >\n        <div class=\"card-group__cards-container\">\n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/alt-text\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Adobe-Express-file-1-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/alt-text\/\" target=\"_self\">\n                                                Alt Text\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Some images convey content, while others are purely decorative. If an image conveys content, alternative text (&#8220;alt text&#8221;) is added, so users who can&#8217;t see the image can still access its content.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/text-alternatives\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Untitled-1-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/text-alternatives\/\" target=\"_self\">\n                                                Text Alternatives\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">For audio and video media, text alternatives help ensure users can perceive content. This includes transcripts for podcasts, captions and descriptive audio for videos, etc.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n                    <article class=\"card-group__card\">\n                                                        <a\n                        href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/considerations-by-type\/\"\n                        class=\"card-group__card-link\"\n                        target=\"_self\"\n                    >\n                        <img decoding=\"async\" class=\"card-group__card-image\" alt=\"\" src=\"https:\/\/www.macalester.edu\/its\/wp-content\/uploads\/sites\/313\/Adobe-Express-file-4-1-640x0-c-default.png\">\n                    <\/a>\n                                                    <div class=\"card-group__card-inner\">\n                                            <h3 class=\"card-group__card-headline\">\n                                                    <a href=\"https:\/\/www.macalester.edu\/its\/academic-technology-services-2\/digital-accessibility-guidelines\/considerations-by-type\/\" target=\"_self\">\n                                                Guidelines by Media Type\n                                                    <\/a>\n                         \n                        <\/h3>\n                                                                <p class=\"card-group__card-copy\">Some accessibility considerations apply to all digital media, while others are media-type specific. Review the accessibility guidelines for each type of digital media before beginning a project.<\/p>\n                    \n                                                            \n                <\/div>\n            <\/article>    \n            <\/div>\n<\/section>\n\n\n<section class=\"callout-feature-text block-container\" >\n    <div class=\"callout-feature-text__inner\">\n        <div class=\"callout-feature-text__container\">\n            <div class=\"callout-feature-text__feature-wrapper\">\n                <div class=\"callout-feature-text__feature-card\">\n                    <div class=\"base-lockup\">\n                                                                            <h2 class=\"base-lockup__heading\">Want Help?<\/h2>\n                                                                            <p class=\"base-lockup__copy\">For personalized support in implementing these guidelines, set up a 1:1 session with an academic technologist.<\/p>\n                                            <\/div>\n                                            <div class=\"callout-feature-text__ctas\">\n                                                            <a class=\"base-cta-primary\" href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScEd-YbMje5d9G33PkkJZIJEUTG2B5JtF9MIPQLzvAqrpYFeQ\/viewform?usp=dialog\" target=\"_self\">Schedule a 1:1 Digital Accessibility Session<\/a>\n                                                                                <\/div>\n                                     <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This page offers foundational guidelines for creating accessible digital content. These guidelines are based on the World Wide Web Consortium&#8217;s (W3C&#8217;s) Web Content Accessibility Guidelines (WCAG) 2.1 AA, and they&#8217;re the baseline we&#8217;re aiming for across campus. Use the links below each topic to find information and resources that can help you start putting these [&hellip;]<\/p>","protected":false},"author":1419,"featured_media":0,"parent":3102,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-8515","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/pages\/8515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/users\/1419"}],"replies":[{"embeddable":true,"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/comments?post=8515"}],"version-history":[{"count":56,"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/pages\/8515\/revisions"}],"predecessor-version":[{"id":9259,"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/pages\/8515\/revisions\/9259"}],"up":[{"embeddable":true,"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/pages\/3102"}],"wp:attachment":[{"href":"https:\/\/www.macalester.edu\/its\/wp-json\/wp\/v2\/media?parent=8515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}