CINXE.COM
Accessibility | Craft CMS
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" class="no-js scroll-behavior-smooth"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/siteicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/siteicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/siteicons/favicon-16x16.png"> <link rel="manifest" href="https://craftcms.com/site.webmanifest"> <link rel="mask-icon" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/siteicons/safari-pinned-tab.svg" color="#e5422b"> <link rel="shortcut icon" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/siteicons/favicon.ico"> <meta name="msapplication-TileColor" content="#f1f5fd"> <meta name="msapplication-config" content="https://craftcms.com/browserconfig.xml"> <meta name="theme-color" content="#f1f5fd"> <link rel="alternate" type="application/rss+xml" title="Accessibility RSS feed for craftcms.com" href="https://craftcms.com/accessibility.rss" /> <link rel="stylesheet" href="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/styles/app.css"> <script> window.addEventListener("load", function() { if (typeof window.onecookieconsent === "undefined") { console.log("One Cookie Consent plugin is not loaded."); return; } window.onecookieconsent.init({ cookieconsent: {"content":{"message":"This website uses cookies to ensure you get the best experience on our website.","dismiss":"Dismiss","allow":"Allow cookies","deny":"Don't allow cookies","link":"Cookie Notice","href":"\/cookie-notice"},"elements":{"dismiss":"","allow":"<a aria-label=\"allow cookies\" role=button tabindex=\"0\" class=\"btn cc-btn cc-allow\"><span class=\"btn__content\">{{allow}}<\/span><\/a>","deny":"<a aria-label=\"deny cookies\" role=button tabindex=\"0\" class=\"cc-btn cc-btn-as-link cc-deny\">{{deny}}<\/a>"},"revokeBtn":"<a><\/a>","compliance":{"opt-in":"<div class=\"cc-compliance cc-highlight\">{{dismiss}}{{deny}}{{allow}}<\/div>","opt-out":"<div class=\"cc-compliance cc-highlight\">{{dismiss}}{{deny}}{{allow}}<\/div>"},"location":{"services":["maxmind"]},"type":"opt-in","revokable":false,"law":{"hasLaw":["AT","BE","BG","HR","CH","CZ","CY","DE","DK","EE","EL","ES","FI","FR","GB","GI","GR","HU","IE","IT","IS","LV","LT","LU","MT","MC","NO","NL","PL","PO","RO","RU","PT","SK","SI","SE","TR","UA","UK","VA"],"revokable":["AT","BE","BG","HR","CH","CZ","CY","DE","DK","EE","EL","ES","FI","FR","GB","GI","GR","HU","HR","IE","IT","IS","LV","LT","LU","MT","MC","NO","NL","PL","PO","RO","RU","PT","SK","SI","SE","TR","UA","UK","VA"],"explicitAction":["AT","BE","BG","HR","CH","CZ","CY","DE","DK","EE","EL","ES","FI","FR","GB","GI","GR","HU","HR","IE","IT","IS","LV","LT","LU","MT","MC","NO","NL","PL","PO","RO","RU","PT","SK","SI","SE","TR","UA","UK","VA"],"regionalLaw":true}}, enableCookies: function() { if (typeof window.enableCookies == "function") { return window.enableCookies(); } }, disableCookies: function() { if (typeof window.disableCookies == "function") { return window.disableCookies(); } } }); }); </script> <script> window.enableCookies = function() { var gaId = 'G-DNT006C48D' var el = document.createElement('script') el.setAttribute('async', 'async') el.src = 'https://www.googletagmanager.com/gtag/js?id=' + gaId document.head.appendChild(el) window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', gaId); } </script> <script> window.sentryOnLoad = function() { Sentry.init({ environment: "production", sampleRate: 0.25, ignoreErrors: [ 'focus-trap' ], }); }; </script> <script src="https://js.sentry-cdn.com/4696799cb6d3460c8ff1a25e9e8f1842.min.js" crossorigin="anonymous"></script> <link rel="dns-prefetch" href="https://craftcms.com/" crossorigin> <link rel="preconnect" href="https://craftcms.com/" crossorigin> <title>Accessibility | Craft CMS</title><meta name="generator" content="SEOmatic"> <meta name="keywords" content="Craft, CMS, Craft CMS, Content, Management, System, CraftCMS"> <meta name="description" content="Craft aims to provide the best content authoring experience a CMS can provide—for everyone. We’re dedicated to achieving AA conformance with key web…"> <meta name="referrer" content="no-referrer-when-downgrade"> <meta name="robots" content="all"> <meta content="craftcms" property="fb:profile_id"> <meta content="en_US" property="og:locale"> <meta content="Craft CMS" property="og:site_name"> <meta content="website" property="og:type"> <meta content="https://craftcms.com/accessibility" property="og:url"> <meta content="Accessibility | Craft CMS" property="og:title"> <meta content="Craft aims to provide the best content authoring experience a CMS can provide—for everyone. We’re dedicated to achieving AA conformance with key web…" property="og:description"> <meta content="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/social-craft-cms.png?width=1200&height=630&quality=82&fit=cover&s=jlBhXBExwFzdRLTcZINJwq7z4I1uK545yc2XRy18y_k" property="og:image"> <meta content="1200" property="og:image:width"> <meta content="630" property="og:image:height"> <meta content="Craft CMS logo" property="og:image:alt"> <meta content="https://vimeo.com/craftcms" property="og:see_also"> <meta content="https://github.com/craftcms" property="og:see_also"> <meta content="https://www.linkedin.com/company/craftcms" property="og:see_also"> <meta content="https://www.facebook.com/craftcms/" property="og:see_also"> <meta content="https://twitter.com/craftcms" property="og:see_also"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@craftcms"> <meta name="twitter:creator" content="@craftcms"> <meta name="twitter:title" content="Accessibility | Craft CMS"> <meta name="twitter:description" content="Craft aims to provide the best content authoring experience a CMS can provide—for everyone. We’re dedicated to achieving AA conformance with key web…"> <meta name="twitter:image" content="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/social-twitter-919.png"> <meta name="twitter:image:width" content="512"> <meta name="twitter:image:height" content="512"> <meta name="twitter:image:alt" content="Craft CMS logo"> <link href="https://craftcms.com/accessibility" rel="canonical"> <link href="https://craftcms.com" rel="home"> <link type="text/plain" href="https://craftcms.com/humans.txt" rel="author"></head> <body class=""> <a class="btn btn--rect skip-link" href="#main-content"> <span class="btn__content">Skip to Main Content</span> <span class="btn__icon"><svg width="11px" height="8px" viewBox="0 0 11 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Default" transform="translate(-1108.000000, -72.000000)" stroke="#EAEAEA" stroke-width="2"> <g id="Buttons/Alt/-S-01-Icon-Copy" transform="translate(972.000000, 48.000000)"> <g id="Group-4" transform="translate(31.000000, 16.000000)"> <g id="Icons/Arrows/Down-Filled" transform="translate(106.000000, 5.000000)"> <g id="Group-Copy" transform="translate(4.500000, 4.500000) rotate(-270.000000) translate(-4.500000, -4.500000) "> <polyline id="Rectangle" transform="translate(4.569231, 4.430769) rotate(-315.000000) translate(-4.569231, -4.430769) " points="1.46769231 1.32923077 7.67076923 1.32923077 7.67076923 7.53230769"></polyline> </g> </g> </g> </g> </g> </g> </svg></span> </a> <div class="js-main-content"> <header class="site-header data-sticky"> <div class="site-header__inner"> <button class="site-header__mobile-nav-toggle js-mobile-nav-toggle" aria-label="Toggle navigation menu"><span class="site-header__mobile-nav-icon"></span></button> <a href="https://craftcms.com/" class="site-header__logo" aria-label="Craft CMS"> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="35" viewBox="0 0 140 35"> <path fill="#E5422B" d="M48.4829545 20.7215909C46.1761364 20.7215909 44.9034091 19.25 45.2215909 17.1420455 45.5795455 14.9943182 47.3295455 13.5625 49.5965909 13.5625 50.7897727 13.5625 51.8636364 14.1193182 52.5 14.9545455L54.7272727 13.125C53.5340909 11.7727273 51.8238636 11.0965909 49.9943182 11.0965909 46.2556818 11.0965909 42.9943182 13.6022727 42.4375 17.1420455 41.8806818 20.7215909 44.2670455 23.1875 48.0454545 23.1875 49.9545455 23.1875 51.8636364 22.3920455 53.5340909 21.0795455L51.9431818 19.25C50.7897727 20.2840909 49.5965909 20.7215909 48.4829545 20.7215909M63.4375 11.2159091C63.4375 11.2159091 62.9602273 11.1363636 62.9204545 11.1363636 62.4034091 11.0568182 61.8465909 11.0965909 61.3295455 11.1363636 60.8522727 11.1761364 60.375 11.2556818 59.8977273 11.4147727 59.5 11.5340909 59.0625 11.6931818 58.7045455 11.9318182L58.7840909 11.375 56.0795455 11.375 54.25 22.9090909 56.9545455 22.9090909 58.0284091 16.1875C58.0681818 15.7897727 58.2272727 15.4318182 58.4261364 15.1136364 58.625 14.7954545 58.9034091 14.5170455 59.2215909 14.3181818 59.5397727 14.0795455 59.8579545 13.9204545 60.2159091 13.8011364 60.5738636 13.6818182 60.9318182 13.6022727 61.3295455 13.5625 61.8465909 13.5227273 62.4034091 13.5625 62.9204545 13.6818182 62.9204545 13.6818182 62.9602273 13.6818182 62.9602273 13.6818182 63.0397727 13.6818182 63.4375 11.2159091 63.4375 11.2159091M72.9034091 12.0909091C72.1477273 11.4545455 70.9943182 11.0965909 69.6420455 11.0965909 66.2613636 11.0965909 63.1988636 13.5227273 62.6022727 17.1022727 62.0454545 20.6818182 64.3920455 23.1079545 67.6534091 23.1079545 69.125 23.1079545 70.3579545 22.9090909 71.3920455 22.1931818L71.3125 22.8295455 73.7784091 22.8295455 75.5681818 11.375 73.0227273 11.375 72.9034091 12.0909091zM72.3465909 17.1022727L72.3465909 17.1022727C71.9886364 19.2897727 70.3579545 20.8011364 68.25 20.8011364 66.1022727 20.8011364 64.8693182 19.2102273 65.2272727 17.0625 65.5852273 14.9147727 67.2954545 13.4034091 69.4034091 13.4034091 71.5113636 13.4431818 72.6647727 14.9147727 72.3465909 17.1022727L72.3465909 17.1022727zM88.0568182 11.375L88.5738636 8.11363636 85.4715909 10.3409091 85.3125 11.4147727 81.8125 11.4147727 82.1704545 9.22727273C82.3693182 8.19318182 83.4829545 8.23295455 83.4829545 8.23295455L84.7954545 8.23295455 85.1931818 5.84659091 83.6818182 5.84659091 83.3238636 5.84659091C79.625 5.84659091 79.5056818 8.71022727 79.5056818 8.71022727L79.2670455 10.0625 79.0681818 11.4147727 78.8295455 11.4147727 75.8068182 13.8011364 78.6704545 13.8011364 76.8409091 25.4545455 79.625 25.4545455 81.4545455 13.7613636 84.9545455 13.7613636 83.5227273 22.9090909 86.2670455 22.9090909 87.6988636 13.7613636 91.1193182 13.7613636 91.5170455 11.375 88.0568182 11.375zM95.4147727 17.1420455C95.9715909 13.6022727 99.1931818 11.0965909 102.971591 11.0965909 104.801136 11.0965909 106.511364 11.8125 107.704545 13.125L105.477273 14.9545455C104.840909 14.1193182 103.767045 13.5625 102.573864 13.5625 100.306818 13.5625 98.5568182 15.0340909 98.1988636 17.1420455 97.8806818 19.25 99.1534091 20.7215909 101.460227 20.7215909 102.573864 20.7215909 103.767045 20.2840909 104.920455 19.25L106.511364 21.0795455C104.840909 22.4318182 102.931818 23.1875 101.022727 23.1875 97.2443182 23.1875 94.8579545 20.7215909 95.4147727 17.1420455M127.630682 15.9090909L126.556818 22.9090909 123.852273 22.9090909 124.926136 16.1079545C125.204545 14.5170455 124.329545 13.5625 122.778409 13.5625 121.147727 13.5625 119.517045 14.5568182 119.278409 16.1875L118.204545 22.9090909 115.5 22.9090909 116.573864 16.1079545C116.8125 14.5568182 115.897727 13.6022727 114.426136 13.5625 112.914773 13.6420455 111.164773 14.5965909 110.926136 16.1875L109.852273 22.9090909 107.147727 22.9090909 108.977273 11.375 111.681818 11.375 111.602273 11.9318182C112.517045 11.375 113.551136 11.1363636 114.863636 11.0965909L115.102273 11.0965909C116.772727 11.0965909 118.125 11.7727273 118.840909 12.9261364 119.954545 11.7727273 121.664773 11.0965909 123.375 11.0965909 126.318182 11.0965909 128.107955 13.0454545 127.630682 15.9090909M127.511364 21.5170455L129.181818 19.4488636C130.096591 20.1647727 131.846591 20.7215909 133.318182 20.7215909 134.670455 20.7215909 136.022727 20.4431818 136.181818 19.5284091 136.301136 18.8125 134.988636 18.5738636 133.517045 18.3352273 130.454545 17.8181818 128.903409 17.1818182 129.221591 14.875 129.698864 11.9715909 132.681818 11.1363636 135.147727 11.1363636 136.897727 11.1363636 138.727273 11.7329545 139.960227 12.5681818L138.289773 14.6363636C137.335227 14.0397727 136.102273 13.6022727 134.710227 13.6022727 133.079545 13.6022727 132.125 14.0795455 132.005682 14.8352273 131.926136 15.3522727 132.363636 15.5511364 134.272727 15.8693182 137.056818 16.3465909 139.363636 16.7840909 138.926136 19.4488636 138.568182 21.875 136.102273 23.2272727 132.880682 23.2272727 131.090909 23.1875 128.784091 22.5511364 127.511364 21.5170455M30.4261364 0L3.57954545 0C1.59090909 0 0 1.59090909 0 3.57954545L0 30.4261364C0 32.4147727 1.59090909 34.0056818 3.57954545 34.0056818L30.4261364 34.0056818C32.375 34.0056818 34.0056818 32.4147727 34.0056818 30.4261364L34.0056818 3.57954545C34.0056818 1.59090909 32.4147727 0 30.4261364 0M16.9431818 20.7215909C18.0568182 20.7215909 19.25 20.2840909 20.4034091 19.25L21.9943182 21.0795455C20.3238636 22.4318182 18.4147727 23.1875 16.5056818 23.1875 12.7272727 23.1875 10.3409091 20.6818182 10.8977273 17.1420455 11.4545455 13.6022727 14.6761364 11.0965909 18.4545455 11.0965909 20.2840909 11.0965909 21.9943182 11.8125 23.1875 13.125L20.9602273 14.9545455C20.3238636 14.1193182 19.25 13.5625 18.0568182 13.5625 15.7897727 13.5625 14.0397727 15.0340909 13.6818182 17.1420455 13.3636364 19.25 14.6363636 20.7215909 16.9431818 20.7215909"/> </svg> </a> <nav class="site-header__nav" aria-label="Primary"> <div class="site-header__nav-item data-current-features"> <a href="/features" >CMS</a> </div> <div class="site-header__nav-item data-current-cloud"> <a href="/cloud" >Hosting<span class="tw-ml-2"><span class=" tw-inline-block tw-rounded-full tw-px-[0.75em] tw-py-[0.375em] tw-bg-[#637599] tw-text-white tw-text-[0.5em] tw-tracking-wide tw-leading-none -tw-translate-y-[0.3em] tw-no-underline hover:tw-no-underline focus:tw-no-underline" style="font-size: max(10px, 0.5em)">New!</span></span></a> </div> <div class="site-header__nav-item data-current-pricing"> <a href="https://craftcms.com/pricing" >Pricing</a> </div> <div class="site-header__nav-item data-current-partners"> <a href="https://craftcms.com/partners" >Partners</a> </div> <div class="site-header__nav-item data-current-resources"> <a href="https://craftcms.com/knowledge-base" >Resources<span class="site-header__subnav-icon"><svg width="11px" height="7px" viewBox="0 0 11 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Default" transform="translate(-434.000000, -77.000000)" stroke="#202020" stroke-width="2"> <g id="Group-2" transform="translate(372.000000, 67.000000)"> <g id="Group-3"> <g id="Icons/Arrows/Caret-Down-Linear" transform="translate(63.000000, 11.000000)"> <polyline id="Triangle-Copy-2" transform="translate(4.500000, 2.000000) rotate(-180.000000) translate(-4.500000, -2.000000) " points="0 4 4.5 0 4.5 0 9 4"></polyline> </g> </g> </g> </g> </g> </svg></span></a> <nav class="site-header__subnav" aria-label="Secondary"> <div class="site-header__subnav-inner"> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://craftcms.com/docs/" target="_blank" rel="noopener"> Documentation </a> <a class="site-header__subnav-item " href="https://craftcms.com/knowledge-base" > Knowledge Base </a> <a class="site-header__subnav-item " href="https://craftcms.com/starters" > Starters </a> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://plugins.craftcms.com" target="_blank" rel="noopener"> Plugin Store </a> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://console.craftcms.com" target="_blank" rel="noopener"> Craft Console </a> <a class="site-header__subnav-item " href="https://craftcms.com/community" > Community </a> <a class="site-header__subnav-item " href="https://craftcms.com/support-services" > Support </a> <a class="site-header__subnav-item " href="https://craftcms.com/accessibility" > Accessibility </a> <a class="site-header__subnav-item " href="https://craftcms.com/accessibility/reports/acr" > Accessibility Report </a> <a class="site-header__subnav-item " href="https://craftcms.com/blog" > Blog </a> <a class="site-header__subnav-item " href="https://craftcms.com/events" > Events </a> </div> </nav> </div> </nav> <div class="site-header__right"> <div class="site-header__try-craft"> <a href="https://craftcms.com/demo" class="btn btn--rect btn--dropdown js-btn js-try-btn"> <span class="btn__content">View the Demo</span> </a> </div> <button class="site-header__search-btn js-search-toggle" type="button" aria-label="Search website"> <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Signed-In" transform="translate(-1288.000000, -115.000000)" stroke="#0F0F0F" stroke-width="2"> <g id="Group" transform="translate(1288.000000, 112.000000)"> <circle id="Oval-2" transform="translate(14.000000, 12.000000) rotate(-315.000000) translate(-14.000000, -12.000000) " cx="14" cy="12" r="8"></circle> <path d="M5,16 L5,26" id="Path-4" transform="translate(5.000000, 21.000000) rotate(-315.000000) translate(-5.000000, -21.000000) "></path> </g> </g> </g> </svg> </button> </div> </div> </header> <div class="mobile-nav js-mobile-nav"> <button type="button" class="mobile-nav__close js-mobile-nav-toggle" aria-label="Close navigation menu"></button> <nav class="mobile-nav__inner js-mobile-nav-inner" aria-label="Primary"> <div class="mobile-nav__nav-item data-current-cms"> <a href="/features" > CMS</a> </div> <div class="mobile-nav__nav-item data-current-hosting"> <a href="/cloud" > Hosting<span class="tw-ml-2"><span class=" tw-inline-block tw-rounded-full tw-px-[0.75em] tw-py-[0.375em] tw-bg-[#637599] tw-text-white tw-text-[0.5em] tw-tracking-wide tw-leading-none -tw-translate-y-[0.3em] tw-no-underline hover:tw-no-underline focus:tw-no-underline" style="font-size: max(10px, 0.5em)">New!</span></span></a> </div> <div class="mobile-nav__nav-item data-current-pricing"> <a href="https://craftcms.com/pricing" > Pricing</a> </div> <div class="mobile-nav__nav-item data-current-partners"> <a href="https://craftcms.com/partners" > Partners</a> </div> <div class="mobile-nav__nav-item data-current-resources"> <div class="js-toggle" data-toggle-element=".js-subnav" data-toggle-class="is-open"> Resources<span class="mobile-nav__subnav-icon"></span> </div> <nav class="mobile-nav__subnav js-subnav" aria-label="Secondary"> <div class="mobile-nav__subnav-inner"> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://craftcms.com/docs/" target="_blank" rel="noopener"> Documentation </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/knowledge-base" > Knowledge Base </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/starters" > Starters </a> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://plugins.craftcms.com" target="_blank" rel="noopener"> Plugin Store </a> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://console.craftcms.com" target="_blank" rel="noopener"> Craft Console </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/community" > Community </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/support-services" > Support </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/accessibility" > Accessibility </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/accessibility/reports/acr" > Accessibility Report </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/blog" > Blog </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/events" > Events </a> </div> </nav> </div> </nav> </div> <header class="site-header js-site-header site-header--sticky"> <div class="site-header__inner"> <button class="site-header__mobile-nav-toggle js-mobile-nav-toggle" aria-label="Toggle navigation menu"><span class="site-header__mobile-nav-icon"></span></button> <a href="https://craftcms.com/" class="site-header__logo" aria-label="Craft CMS"> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="35" viewBox="0 0 140 35"> <path fill="#E5422B" d="M48.4829545 20.7215909C46.1761364 20.7215909 44.9034091 19.25 45.2215909 17.1420455 45.5795455 14.9943182 47.3295455 13.5625 49.5965909 13.5625 50.7897727 13.5625 51.8636364 14.1193182 52.5 14.9545455L54.7272727 13.125C53.5340909 11.7727273 51.8238636 11.0965909 49.9943182 11.0965909 46.2556818 11.0965909 42.9943182 13.6022727 42.4375 17.1420455 41.8806818 20.7215909 44.2670455 23.1875 48.0454545 23.1875 49.9545455 23.1875 51.8636364 22.3920455 53.5340909 21.0795455L51.9431818 19.25C50.7897727 20.2840909 49.5965909 20.7215909 48.4829545 20.7215909M63.4375 11.2159091C63.4375 11.2159091 62.9602273 11.1363636 62.9204545 11.1363636 62.4034091 11.0568182 61.8465909 11.0965909 61.3295455 11.1363636 60.8522727 11.1761364 60.375 11.2556818 59.8977273 11.4147727 59.5 11.5340909 59.0625 11.6931818 58.7045455 11.9318182L58.7840909 11.375 56.0795455 11.375 54.25 22.9090909 56.9545455 22.9090909 58.0284091 16.1875C58.0681818 15.7897727 58.2272727 15.4318182 58.4261364 15.1136364 58.625 14.7954545 58.9034091 14.5170455 59.2215909 14.3181818 59.5397727 14.0795455 59.8579545 13.9204545 60.2159091 13.8011364 60.5738636 13.6818182 60.9318182 13.6022727 61.3295455 13.5625 61.8465909 13.5227273 62.4034091 13.5625 62.9204545 13.6818182 62.9204545 13.6818182 62.9602273 13.6818182 62.9602273 13.6818182 63.0397727 13.6818182 63.4375 11.2159091 63.4375 11.2159091M72.9034091 12.0909091C72.1477273 11.4545455 70.9943182 11.0965909 69.6420455 11.0965909 66.2613636 11.0965909 63.1988636 13.5227273 62.6022727 17.1022727 62.0454545 20.6818182 64.3920455 23.1079545 67.6534091 23.1079545 69.125 23.1079545 70.3579545 22.9090909 71.3920455 22.1931818L71.3125 22.8295455 73.7784091 22.8295455 75.5681818 11.375 73.0227273 11.375 72.9034091 12.0909091zM72.3465909 17.1022727L72.3465909 17.1022727C71.9886364 19.2897727 70.3579545 20.8011364 68.25 20.8011364 66.1022727 20.8011364 64.8693182 19.2102273 65.2272727 17.0625 65.5852273 14.9147727 67.2954545 13.4034091 69.4034091 13.4034091 71.5113636 13.4431818 72.6647727 14.9147727 72.3465909 17.1022727L72.3465909 17.1022727zM88.0568182 11.375L88.5738636 8.11363636 85.4715909 10.3409091 85.3125 11.4147727 81.8125 11.4147727 82.1704545 9.22727273C82.3693182 8.19318182 83.4829545 8.23295455 83.4829545 8.23295455L84.7954545 8.23295455 85.1931818 5.84659091 83.6818182 5.84659091 83.3238636 5.84659091C79.625 5.84659091 79.5056818 8.71022727 79.5056818 8.71022727L79.2670455 10.0625 79.0681818 11.4147727 78.8295455 11.4147727 75.8068182 13.8011364 78.6704545 13.8011364 76.8409091 25.4545455 79.625 25.4545455 81.4545455 13.7613636 84.9545455 13.7613636 83.5227273 22.9090909 86.2670455 22.9090909 87.6988636 13.7613636 91.1193182 13.7613636 91.5170455 11.375 88.0568182 11.375zM95.4147727 17.1420455C95.9715909 13.6022727 99.1931818 11.0965909 102.971591 11.0965909 104.801136 11.0965909 106.511364 11.8125 107.704545 13.125L105.477273 14.9545455C104.840909 14.1193182 103.767045 13.5625 102.573864 13.5625 100.306818 13.5625 98.5568182 15.0340909 98.1988636 17.1420455 97.8806818 19.25 99.1534091 20.7215909 101.460227 20.7215909 102.573864 20.7215909 103.767045 20.2840909 104.920455 19.25L106.511364 21.0795455C104.840909 22.4318182 102.931818 23.1875 101.022727 23.1875 97.2443182 23.1875 94.8579545 20.7215909 95.4147727 17.1420455M127.630682 15.9090909L126.556818 22.9090909 123.852273 22.9090909 124.926136 16.1079545C125.204545 14.5170455 124.329545 13.5625 122.778409 13.5625 121.147727 13.5625 119.517045 14.5568182 119.278409 16.1875L118.204545 22.9090909 115.5 22.9090909 116.573864 16.1079545C116.8125 14.5568182 115.897727 13.6022727 114.426136 13.5625 112.914773 13.6420455 111.164773 14.5965909 110.926136 16.1875L109.852273 22.9090909 107.147727 22.9090909 108.977273 11.375 111.681818 11.375 111.602273 11.9318182C112.517045 11.375 113.551136 11.1363636 114.863636 11.0965909L115.102273 11.0965909C116.772727 11.0965909 118.125 11.7727273 118.840909 12.9261364 119.954545 11.7727273 121.664773 11.0965909 123.375 11.0965909 126.318182 11.0965909 128.107955 13.0454545 127.630682 15.9090909M127.511364 21.5170455L129.181818 19.4488636C130.096591 20.1647727 131.846591 20.7215909 133.318182 20.7215909 134.670455 20.7215909 136.022727 20.4431818 136.181818 19.5284091 136.301136 18.8125 134.988636 18.5738636 133.517045 18.3352273 130.454545 17.8181818 128.903409 17.1818182 129.221591 14.875 129.698864 11.9715909 132.681818 11.1363636 135.147727 11.1363636 136.897727 11.1363636 138.727273 11.7329545 139.960227 12.5681818L138.289773 14.6363636C137.335227 14.0397727 136.102273 13.6022727 134.710227 13.6022727 133.079545 13.6022727 132.125 14.0795455 132.005682 14.8352273 131.926136 15.3522727 132.363636 15.5511364 134.272727 15.8693182 137.056818 16.3465909 139.363636 16.7840909 138.926136 19.4488636 138.568182 21.875 136.102273 23.2272727 132.880682 23.2272727 131.090909 23.1875 128.784091 22.5511364 127.511364 21.5170455M30.4261364 0L3.57954545 0C1.59090909 0 0 1.59090909 0 3.57954545L0 30.4261364C0 32.4147727 1.59090909 34.0056818 3.57954545 34.0056818L30.4261364 34.0056818C32.375 34.0056818 34.0056818 32.4147727 34.0056818 30.4261364L34.0056818 3.57954545C34.0056818 1.59090909 32.4147727 0 30.4261364 0M16.9431818 20.7215909C18.0568182 20.7215909 19.25 20.2840909 20.4034091 19.25L21.9943182 21.0795455C20.3238636 22.4318182 18.4147727 23.1875 16.5056818 23.1875 12.7272727 23.1875 10.3409091 20.6818182 10.8977273 17.1420455 11.4545455 13.6022727 14.6761364 11.0965909 18.4545455 11.0965909 20.2840909 11.0965909 21.9943182 11.8125 23.1875 13.125L20.9602273 14.9545455C20.3238636 14.1193182 19.25 13.5625 18.0568182 13.5625 15.7897727 13.5625 14.0397727 15.0340909 13.6818182 17.1420455 13.3636364 19.25 14.6363636 20.7215909 16.9431818 20.7215909"/> </svg> </a> <nav class="site-header__nav" aria-label="Primary"> <div class="site-header__nav-item data-current-features"> <a href="/features" >CMS</a> </div> <div class="site-header__nav-item data-current-cloud"> <a href="/cloud" >Hosting<span class="tw-ml-2"><span class=" tw-inline-block tw-rounded-full tw-px-[0.75em] tw-py-[0.375em] tw-bg-[#637599] tw-text-white tw-text-[0.5em] tw-tracking-wide tw-leading-none -tw-translate-y-[0.3em] tw-no-underline hover:tw-no-underline focus:tw-no-underline" style="font-size: max(10px, 0.5em)">New!</span></span></a> </div> <div class="site-header__nav-item data-current-pricing"> <a href="https://craftcms.com/pricing" >Pricing</a> </div> <div class="site-header__nav-item data-current-partners"> <a href="https://craftcms.com/partners" >Partners</a> </div> <div class="site-header__nav-item data-current-resources"> <a href="https://craftcms.com/knowledge-base" >Resources<span class="site-header__subnav-icon"><svg width="11px" height="7px" viewBox="0 0 11 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Default" transform="translate(-434.000000, -77.000000)" stroke="#202020" stroke-width="2"> <g id="Group-2" transform="translate(372.000000, 67.000000)"> <g id="Group-3"> <g id="Icons/Arrows/Caret-Down-Linear" transform="translate(63.000000, 11.000000)"> <polyline id="Triangle-Copy-2" transform="translate(4.500000, 2.000000) rotate(-180.000000) translate(-4.500000, -2.000000) " points="0 4 4.5 0 4.5 0 9 4"></polyline> </g> </g> </g> </g> </g> </svg></span></a> <nav class="site-header__subnav" aria-label="Secondary"> <div class="site-header__subnav-inner"> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://craftcms.com/docs/" target="_blank" rel="noopener"> Documentation </a> <a class="site-header__subnav-item " href="https://craftcms.com/knowledge-base" > Knowledge Base </a> <a class="site-header__subnav-item " href="https://craftcms.com/starters" > Starters </a> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://plugins.craftcms.com" target="_blank" rel="noopener"> Plugin Store </a> <a class="site-header__subnav-item site-header__subnav-item--external " href="https://console.craftcms.com" target="_blank" rel="noopener"> Craft Console </a> <a class="site-header__subnav-item " href="https://craftcms.com/community" > Community </a> <a class="site-header__subnav-item " href="https://craftcms.com/support-services" > Support </a> <a class="site-header__subnav-item " href="https://craftcms.com/accessibility" > Accessibility </a> <a class="site-header__subnav-item " href="https://craftcms.com/accessibility/reports/acr" > Accessibility Report </a> <a class="site-header__subnav-item " href="https://craftcms.com/blog" > Blog </a> <a class="site-header__subnav-item " href="https://craftcms.com/events" > Events </a> </div> </nav> </div> </nav> <div class="site-header__right"> <div class="site-header__try-craft"> <a href="https://craftcms.com/demo" class="btn btn--rect btn--dropdown js-btn js-try-btn"> <span class="btn__content">View the Demo</span> </a> </div> <button class="site-header__search-btn js-search-toggle" type="button" aria-label="Search website"> <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Signed-In" transform="translate(-1288.000000, -115.000000)" stroke="#0F0F0F" stroke-width="2"> <g id="Group" transform="translate(1288.000000, 112.000000)"> <circle id="Oval-2" transform="translate(14.000000, 12.000000) rotate(-315.000000) translate(-14.000000, -12.000000) " cx="14" cy="12" r="8"></circle> <path d="M5,16 L5,26" id="Path-4" transform="translate(5.000000, 21.000000) rotate(-315.000000) translate(-5.000000, -21.000000) "></path> </g> </g> </g> </svg> </button> </div> </div> </header> <div class="mobile-nav js-mobile-nav"> <button type="button" class="mobile-nav__close js-mobile-nav-toggle" aria-label="Close navigation menu"></button> <nav class="mobile-nav__inner js-mobile-nav-inner" aria-label="Primary"> <div class="mobile-nav__nav-item data-current-cms"> <a href="/features" > CMS</a> </div> <div class="mobile-nav__nav-item data-current-hosting"> <a href="/cloud" > Hosting<span class="tw-ml-2"><span class=" tw-inline-block tw-rounded-full tw-px-[0.75em] tw-py-[0.375em] tw-bg-[#637599] tw-text-white tw-text-[0.5em] tw-tracking-wide tw-leading-none -tw-translate-y-[0.3em] tw-no-underline hover:tw-no-underline focus:tw-no-underline" style="font-size: max(10px, 0.5em)">New!</span></span></a> </div> <div class="mobile-nav__nav-item data-current-pricing"> <a href="https://craftcms.com/pricing" > Pricing</a> </div> <div class="mobile-nav__nav-item data-current-partners"> <a href="https://craftcms.com/partners" > Partners</a> </div> <div class="mobile-nav__nav-item data-current-resources"> <div class="js-toggle" data-toggle-element=".js-subnav" data-toggle-class="is-open"> Resources<span class="mobile-nav__subnav-icon"></span> </div> <nav class="mobile-nav__subnav js-subnav" aria-label="Secondary"> <div class="mobile-nav__subnav-inner"> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://craftcms.com/docs/" target="_blank" rel="noopener"> Documentation </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/knowledge-base" > Knowledge Base </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/starters" > Starters </a> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://plugins.craftcms.com" target="_blank" rel="noopener"> Plugin Store </a> <a class="mobile-nav__subnav-item mobile-nav__subnav-item--external " href="https://console.craftcms.com" target="_blank" rel="noopener"> Craft Console </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/community" > Community </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/support-services" > Support </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/accessibility" > Accessibility </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/accessibility/reports/acr" > Accessibility Report </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/blog" > Blog </a> <a class="mobile-nav__subnav-item " href="https://craftcms.com/events" > Events </a> </div> </nav> </div> </nav> </div> <div class="js-header-flick"></div> <main id="main-content"> <div class="l-features-landing tw-pf"> <div class="tw-pt-4 tw-relative"> <div class="tw-max-w-7xl tw-mx-auto tw-p-6"> <div class="tw-py-4"> <div class="tw-max-w-7xl tw-mx-auto tw-mt-4 tw-mb-6 lg:tw-mb-8 tw-px-4 lg:tw-px-5"> <div class="lg:tw-flex tw-justify-center tw-items-center -tw-mx-4"> <div class="tw-text-center tw-text-center tw-px-4 "> <div class=" lg:tw-mx-auto"> <div> <div class="tw-mb-4"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl sm:tw-text-5xl md:tw-text-4xl lg:tw-text-4xl tw-leading-none"> Accessibility at Craft </h2> </div> <p class="tw-text-lg md:tw-text-md tw-text-slate-500 tw-leading-normal lg:tw-mb-0 tw-max-w-sm lg:tw-max-w-prose tw-mx-auto lg:tw-mx-0"> <div class="tw-max-w-prose tw-mx-auto"> <p class="tw-mb-2">Craft aims to provide the best content authoring experience a CMS can provide—for everyone. We’re dedicated to achieving AA conformance with key web accessibility standards WCAG 2.2 and ATAG 2.0.</p> </div> </p> </div> <div class="tw-mx-auto tw-my-6"> <div class="tw-flex tw-items-center tw-justify-center -tw-mx-2 "> <div class="tw-px-2"> <a class="btn btn--xs js-btn" href="/demo"> <span class="btn__content">Try the Demo</span> </a> </div> <div class="tw-px-2"> <a class="link link--xs tw-no-underline" href="/accessibility/report"> View the Report </a> </div> </div> </div> </div> </div> <div class=" tw-px-4"> </div> </div> </div> </div> <div class="lg:tw-grid tw-grid-rows-8 tw-grid-cols-12 tw-min-h-[50vh] tw-mb-4 tw-gap-4 sm:tw-mb-12 md:tw-mb-12"> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-1 tw-col-end-7 tw-row-start-1 tw-row-end-3"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-items-center tw-p-4 tw-bg-slate-900 tw-text-slate-300"> <div class="tw-w-full "> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Build Accessible Sites</h2> <div class=" tw-text-center"> <p>Craft itself imposes no limitations on how you build your front-end or distribute your content—so your have complete control to make your content accessible.</p> </div> </div> </div> <div class="tw-rounded-md tw-overflow-hidden "> <video width="854" autoplay muted loop playsinline disablePictureInPicture class="tw-m-0"> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/media/live-preview.webm" type="video/webm" /> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/media/live-preview.mp4" type="video/mp4" /> </video> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-7 tw-col-end-13 tw-row-start-1 tw-row-end-3"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-white "> <div class="tw-relative {{ imgBackground ? (imgFirst ? 'tw-self-start' : 'tw-self-end') : 'tw-mx-6 tw-my-10' }}"> <div class="tw-bg-gray-300 tw-rounded-md tw-w-full tw-overflow-hidden "> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/errors.png" alt="" /> </div> <div class="tw-bg-gradient-to-b tw-from-transparent tw-to-white tw-absolute tw-h-full tw-w-full tw-top-0 tw-left-0"> </div> </div> <div class="tw-w-full tw-mb-10 tw-p-4"> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Accessible Content Authoring</h2> <div class=" tw-text-center"> <p>Developers can provide descriptive labels, instructions, and info boxes to facilitate accessible content authoring. Error messages summarized in each form, and directly per form field.</p> </div> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-1 tw-col-end-7 tw-row-start-3 tw-row-end-5"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-white tw-py-12 tw-px-4 tw-items-center"> <div class="tw-w-full "> <div class="tw-h-full"> <blockquote> <div class="tw-italic tw-text-xl sm:tw-text-2xl lg:tw-text-3xl tw-leading-normal lg:tw-leading-normal tw-mb-6 tw-max-w-md tw-mx-auto tw-border-l-4 tw-border-[#e4edf6] tw-pl-4"> <p>the important thing for us wasn’t just the features it had, it was actually that they baked-in accessibility into their process and workflow.</p> </div> <footer class="tw-text-sm sm:tw-text-md tw-leading-tight tw-text-left tw-mx-auto tw-max-w-md tw-flex tw-justify-center tw-items-center"> <div class="tw-max-w-12 sm:tw-max-w-16 tw-mr-4"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/events/presenters/Simon-Photo_2023-10-23-010615_pary.jpg?width=192&height=192&quality=50&fit=cover&s=FIUD3kmijgWmeCv9fzMVJ1SOxZ4kflGIIM_33ioHY-w" alt="Simon Jones" width="192" height="192" class="tw-rounded-full" /> </div> <div> <span>—Simon Jones, Studio 24</span><br/> <a target="_blank" class="tw-teext-italic" href="https://www.studio24.net/blog/how-we-grew-as-an-agency/">How we grew as an agency by redesigning w3.org</a> </div> </footer> </blockquote> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-7 tw-col-end-13 tw-row-start-3 tw-row-end-5"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-[#e4edf6] "> <div class="tw-relative {{ imgBackground ? (imgFirst ? 'tw-self-start' : 'tw-self-end') : 'tw-mx-6 tw-my-10' }}"> <div class="tw-bg-gray-300 tw-rounded-md tw-w-full tw-overflow-hidden "> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/reports-2.png" alt="" /> </div> <div class="tw-bg-gradient-to-b tw-from-transparent tw-to-[#e4edf6] tw-absolute tw-h-full tw-w-full tw-top-0 tw-left-0"> </div> </div> <div class="tw-w-full tw-mb-10 tw-p-4"> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Auditing & Reporting</h2> <div class=" tw-text-center"> <p>Our <a href="/accessibility/reports/acr">Accessibility Conformance Report</a> and <a href="/accessibility/reports/atag">Authoring Tool Accessibility Guidelines (ATAG) Report</a> describe our ongoing efforts to reach full WCAG 2.2 and ATAG 2.0 Level AA support.</p> </div> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-1 tw-col-end-7 tw-row-start-5 tw-row-end-7"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-[#e4edf6] "> <div class="tw-relative {{ imgBackground ? (imgFirst ? 'tw-self-start' : 'tw-self-end') : 'tw-mx-6 tw-my-10' }}"> <div class="tw-bg-gray-300 tw-rounded-md tw-w-full tw-overflow-hidden "> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/shapes.png" alt="" /> </div> </div> <div class="tw-w-full tw-mb-10 tw-p-4"> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Contrast & Color</h2> <div class=" tw-text-center"> <p>The entire control panel is tested for contrast requirements. Plus, users can fully remove colour as differentiator in their preferences.</p> </div> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-7 tw-col-end-13 tw-row-start-5 tw-row-end-7"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-items-center tw-p-4 "> <div class="tw-rounded-md tw-overflow-hidden tw-mb-10"> <video width="854" autoplay muted loop playsinline disablePictureInPicture class="tw-m-0"> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/zoom.webm" type="video/webm" /> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/zoom.mp4" type="video/mp4" /> </video> </div> <div class="tw-w-full tw-mb-10 "> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Zoom</h2> <div class=" tw-text-center"> <p>Zoom up to 200% without loss of functionality. Craft is intended to be used across device sizes, orientations, and zoom levels.</p> </div> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-1 tw-col-end-7 tw-row-start-7 tw-row-end-9"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-[#dfe9f4] "> <div class="tw-relative {{ imgBackground ? (imgFirst ? 'tw-self-start' : 'tw-self-end') : 'tw-mx-6 tw-my-10' }}"> <div class="tw-bg-gray-300 tw-rounded-md tw-w-full tw-overflow-hidden "> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/screen-reader.png" alt="" /> </div> </div> <div class="tw-w-full tw-mb-10 tw-p-4"> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Screen Reader Support</h2> <div class=" tw-text-center"> <p>Dedicated screen reader testing, performed using a combination of NVDA/Firefox, JAWS/Chrome, and VoiceOver/Safari.</p> </div> </div> </div> </div> </div> <div class="tw-relative tw-mb-4 lg:tw-mb-0 tw-col-start-7 tw-col-end-13 tw-row-start-7 tw-row-end-9"> <!-- Card --> <div class="tw-border tw-border-blue-50 tw-shadow-craftcom tw-h-full tw-rounded-xl tw-flex tw-flex-wrap tw-bg-[#dfe9f4] tw-p-4"> <div class="tw-w-full tw-mt-10 "> <div class="tw-max-w-md tw-mx-auto"> <h2 class="tw-font-bold tw-mb-2 tw-text-3xl md:tw-text-2xl lg:tw-text-3xl tw-text-center">Keyboard Support</h2> <div class=" tw-text-center"> <p>Extensive keyboard support across the entire Craft control panel.</p> </div> </div> </div> <div class="tw-rounded-md tw-overflow-hidden tw-mt-10"> <video width="854" autoplay muted loop playsinline disablePictureInPicture class="tw-m-0"> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/keyboard.webm" type="video/webm" /> <source src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/features-landing/a11y/keyboard.mp4" type="video/mp4" /> </video> </div> </div> </div> </div> </div> </div> </div> <div> <div class="tw-mt-4 tw-mb-2 tw-text-center tw-mx-auto tw-max-w-prose"> <h2 class="tw-m0 sm:tw-mt-12 tw-text-3xl sm:tw-text-5xl md:tw-text-4xl lg:tw-text-4xl tw-leading-none"> Blog </h2> </div> <div class="l-wrap"> <div class="l-wrap__inner"> <div class="l-section"> <div class="l-post-grid"> <div class="l-post-grid__featured-post"> <div class="news-blurb news-blurb--l"> <a class="news-blurb__img" href="https://craftcms.com/blog/designing-for-reduced-motion" aria-hidden="true"> <div class="news-blurb__img-inner"> <div class="news-blurb__loading"><div class="loading"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png" alt=""> </div></div> <img class="lazyload" alt="Prefers Reduced Motion" data-src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/prefers-reduced-motion.png?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=XEDsvWEwyZiYmmVe6cuHmvjs2eEARM75y9IiR04h2QU" data-srcset="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/prefers-reduced-motion.png?width=500&height=300&quality=80&format=baseline-jpeg&fit=contain&s=HvhoplEwWUAIIOa6wqWgIhiRjs8Y6eGygg7hi9JECLI 0.5x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/prefers-reduced-motion.png?width=750&height=450&quality=80&format=baseline-jpeg&fit=contain&s=EvfRoGWgfEqd5E3EzVomhYb1yflzYZQcJ5CZD6GqrRg 0.75x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/prefers-reduced-motion.png?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=XEDsvWEwyZiYmmVe6cuHmvjs2eEARM75y9IiR04h2QU, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/prefers-reduced-motion.png?width=2000&height=1200&quality=80&format=baseline-jpeg&fit=contain&s=ZNMEC6Kh1iY9Fx7smaz4g_UZxLX7XjFZWoVuE8L8fOs 2x"> </div> </a> <div class="news-blurb__content"> <a class="news-blurb__category-top" href="https://craftcms.com/blog/accessibility"> #Accessibility </a> <a href="https://craftcms.com/blog/designing-for-reduced-motion"> <h2 class="news-blurb__heading"> Designing for Reduced Motion </h2> <div class="news-blurb__excerpt"> <p>It’s important to consider the reduced-motion experience during design and development.</p> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> Keep Reading <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> </div> <div class="l-post-grid"> <div class="l-post-grid__block"> <div class="news-blurb "> <a class="news-blurb__img" href="https://craftcms.com/blog/accessible-target-sizes" aria-hidden="true"> <div class="news-blurb__img-inner"> <div class="news-blurb__loading"><div class="loading"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png" alt=""> </div></div> <img class="lazyload" alt="Accessible Target Sizes" data-src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/12-Accessible-Target-Sizes.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=myugA3hktw6FW2aI7r6kq2PEM4xXBYPUVV-_tIYiwO8" data-srcset="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/12-Accessible-Target-Sizes.jpg?width=500&height=300&quality=80&format=baseline-jpeg&fit=contain&s=O6nr3AwQsTESipKx0MjousJPV1U8KLry8679yg8usyU 0.5x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/12-Accessible-Target-Sizes.jpg?width=750&height=450&quality=80&format=baseline-jpeg&fit=contain&s=q9iKFORPU8w-a8SqtL0Eol7eEZysWeH123VDRuwqzK8 0.75x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/12-Accessible-Target-Sizes.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=myugA3hktw6FW2aI7r6kq2PEM4xXBYPUVV-_tIYiwO8, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/12-Accessible-Target-Sizes.jpg?width=2000&height=1200&quality=80&format=baseline-jpeg&fit=contain&s=kBgw8wR2J0YMOgCcRTwyS8L7tgvvFuhLrbhIbVIAhc0 2x"> </div> </a> <div class="news-blurb__content"> <a class="news-blurb__category-top" href="https://craftcms.com/blog/accessibility"> #Accessibility </a> <a href="https://craftcms.com/blog/accessible-target-sizes"> <h2 class="news-blurb__heading"> Accessible Target Sizes </h2> <div class="news-blurb__excerpt"> <p>Appropriately sized touch targets improve both accessibility and overall usability.</p> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> Keep Reading <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> <div class="l-post-grid__block"> <div class="news-blurb "> <a class="news-blurb__img" href="https://craftcms.com/blog/accessible-custom-fields" aria-hidden="true"> <div class="news-blurb__img-inner"> <div class="news-blurb__loading"><div class="loading"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png" alt=""> </div></div> <img class="lazyload" alt="Accessible Custom Fields" data-src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/11-Accessible-Custom-Fields.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=5mroPYAPVflTY2E01jY6GcjoCppLH5LXDpztYULIXCI" data-srcset="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/11-Accessible-Custom-Fields.jpg?width=500&height=300&quality=80&format=baseline-jpeg&fit=contain&s=hESN5mjwqLs0OkeWYHnUuSamiu0E84scYXi77LdwWv0 0.5x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/11-Accessible-Custom-Fields.jpg?width=750&height=450&quality=80&format=baseline-jpeg&fit=contain&s=5tmgtQ33hKon6sAf5-kArBt11iL1DTaX8wIsZBR72kg 0.75x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/11-Accessible-Custom-Fields.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=5mroPYAPVflTY2E01jY6GcjoCppLH5LXDpztYULIXCI, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/11-Accessible-Custom-Fields.jpg?width=2000&height=1200&quality=80&format=baseline-jpeg&fit=contain&s=djYawjr1cXdQHTYepm09EdoYerbo4WdiD_HdZ0QjuV0 2x"> </div> </a> <div class="news-blurb__content"> <a class="news-blurb__category-top" href="https://craftcms.com/blog/accessibility"> #Accessibility </a> <a href="https://craftcms.com/blog/accessible-custom-fields"> <h2 class="news-blurb__heading"> Accessible Custom Fields </h2> <div class="news-blurb__excerpt"> <p>As part of our journey toward achieving <span class="caps">WCAG</span> <span class="numbers">2</span>.<span class="numbers">1</span> <span class="caps">AA</span> compliance, we’ve been working to ensure that custom fields are accessible to all users.</p> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> Keep Reading <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> <div class="l-post-grid__block"> <div class="news-blurb "> <a class="news-blurb__img" href="https://craftcms.com/blog/accessibility-conformance-report" aria-hidden="true"> <div class="news-blurb__img-inner"> <div class="news-blurb__loading"><div class="loading"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png" alt=""> </div></div> <img class="lazyload" alt="10 Craft E28099s Accessibility Conformance Report" data-src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/10-CraftE28099s-Accessibility-Conformance-Report.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=5wKTS9cuq3Sry5u0lEE2Z28ncBf5pam0B74IQutRzxA" data-srcset="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/10-CraftE28099s-Accessibility-Conformance-Report.jpg?width=500&height=300&quality=80&format=baseline-jpeg&fit=contain&s=1Qd7wlB-fWWuk5OOGW-rozr51BdH0noFrTDq5LrJGZA 0.5x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/10-CraftE28099s-Accessibility-Conformance-Report.jpg?width=750&height=450&quality=80&format=baseline-jpeg&fit=contain&s=XLvvnZstzgDhmY-zRAXuTcXeVDZa37f_5gRfG6aH_rs 0.75x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/10-CraftE28099s-Accessibility-Conformance-Report.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=5wKTS9cuq3Sry5u0lEE2Z28ncBf5pam0B74IQutRzxA, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/10-CraftE28099s-Accessibility-Conformance-Report.jpg?width=2000&height=1200&quality=80&format=baseline-jpeg&fit=contain&s=dYYHvjkvWGZfyXMRwDQq1HcZ_3mv4ihFamLSTSvkt9w 2x"> </div> </a> <div class="news-blurb__content"> <a class="news-blurb__category-top" href="https://craftcms.com/blog/accessibility"> #Accessibility </a> <a href="https://craftcms.com/blog/accessibility-conformance-report"> <h2 class="news-blurb__heading"> Craft’s Accessibility Conformance Report </h2> <div class="news-blurb__excerpt"> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> Keep Reading <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> <div class="l-post-grid__block"> <div class="news-blurb "> <a class="news-blurb__img" href="https://craftcms.com/blog/disclosure-menus" aria-hidden="true"> <div class="news-blurb__img-inner"> <div class="news-blurb__loading"><div class="loading"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png" alt=""> </div></div> <img class="lazyload" alt="Disclosure Menus" data-src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/09-Disclosure-Menus.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=NOHTvKM8un9MP5jhx_3JYLSc7zZgQVQSBUjNPsI2bFI" data-srcset="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/09-Disclosure-Menus.jpg?width=500&height=300&quality=80&format=baseline-jpeg&fit=contain&s=_SuO98JsXUyW66YKayEVo7LfD_yF2YY9pIExFnp_SPw 0.5x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/09-Disclosure-Menus.jpg?width=750&height=450&quality=80&format=baseline-jpeg&fit=contain&s=mAuPwXzdIe1Zgtc2zlNuH8bG_37GgwRNm1K5m_w0K7U 0.75x, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/09-Disclosure-Menus.jpg?width=1000&height=600&quality=80&format=baseline-jpeg&fit=contain&s=NOHTvKM8un9MP5jhx_3JYLSc7zZgQVQSBUjNPsI2bFI, https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/thumbnails/09-Disclosure-Menus.jpg?width=2000&height=1200&quality=80&format=baseline-jpeg&fit=contain&s=shDWnsykX5l6wMKYbZR4_Mw8wsLi2r1p5KDgOrCmgLs 2x"> </div> </a> <div class="news-blurb__content"> <a class="news-blurb__category-top" href="https://craftcms.com/blog/accessibility"> #Accessibility </a> <a href="https://craftcms.com/blog/disclosure-menus"> <h2 class="news-blurb__heading"> Disclosure Menus </h2> <div class="news-blurb__excerpt"> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> Keep Reading <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div class="tw-mt-4 tw-mb-2 tw-text-center tw-mx-auto tw-max-w-prose"> <h2 class="tw-m0 sm:tw-mt-12 tw-text-3xl sm:tw-text-5xl md:tw-text-4xl lg:tw-text-4xl tw-leading-none"> Sessions </h2> </div> <div class="l-wrap"> <div class="l-wrap__inner"> <div class="l-section"> <div class="l-events-videos-grid"> <div class="l-events-videos-grid__block l-events-videos-grid__block--videos"> <div class="news-blurb"> <a href="https://craftcms.com/events/dot-all-2021/sessions/getting-started-with-manual-accessibility-testing"> <p class="eyebrow-s">Talk</p> <h3 class="heading-m" style="max-width: 500px">Getting Started with Manual Accessibility Testing</h3> <div class="post-intro__byline"> <div class="post-intro__author "> <div class="post-intro__author-photo 1"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/events/presenters/LupesHeadshot.jpg?width=600&height=600&fit=cover&s=6KiShN-s15QwwGNaI1sIg-mionTNtTxqTSrva-LEuYg" alt="Lupe Camacho"> </div> <div class="post-intro__author-name"> Lupe Camacho </div> <span class="post-intro__byline-text"></span> </div> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> More <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> <div class="l-events-videos-grid__block l-events-videos-grid__block--videos"> <div class="news-blurb"> <a href="https://craftcms.com/events/dot-all-2023/sessions/practical-tips-for-making-your-website-accessible"> <p class="eyebrow-s">Talk</p> <h3 class="heading-m" style="max-width: 500px">Practical Tips for Making Your Website Accessible</h3> <div class="post-intro__byline"> <div class="post-intro__author "> <div class="post-intro__author-photo 1"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/events/presenters/Kaitlyn-Martinez.jpg?width=600&height=600&fit=cover&s=tGEJ9sD4llw6nU4fb2Nr1eOb2Sh3Ao7qLxn2SNpKe4Y" alt="Kaitlyn Martinez"> </div> <div class="post-intro__author-name"> Kaitlyn Martinez </div> <span class="post-intro__byline-text"> and </span> </div> <div class="post-intro__author "> <div class="post-intro__author-photo 1"> <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/events/presenters/LupesHeadshot.jpg?width=600&height=600&fit=cover&s=6KiShN-s15QwwGNaI1sIg-mionTNtTxqTSrva-LEuYg" alt="Lupe Camacho"> </div> <div class="post-intro__author-name"> Lupe Camacho </div> <span class="post-intro__byline-text"></span> </div> </div> <div class="news-blurb__link"> <span class="link link--w-icon"> More <span class="link__icon"> <svg width="7px" height="12px" viewBox="0 0 7 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Cards/A-–-No-Border" transform="translate(-117.000000, -221.000000)" fill-rule="nonzero" stroke="#4A7CF6" stroke-width="1.5"> <polyline id="Triangle-3" transform="translate(120.500000, 227.000000) rotate(-270.000000) translate(-120.500000, -227.000000) " points="115.5 229.5 120.5 224.5 120.5 224.5 125.5 229.5"></polyline> </g> </g> </svg> </span> </span> </div> </a> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="site-footer "> <div class="site-footer__inner"> <div class="site-footer__logo"> <a href="https://craftcms.com/" aria-label="Craft CMS"> <svg xmlns="http://www.w3.org/2000/svg" width="140" height="35" viewBox="0 0 140 35"> <path fill="#E5422B" d="M48.4829545 20.7215909C46.1761364 20.7215909 44.9034091 19.25 45.2215909 17.1420455 45.5795455 14.9943182 47.3295455 13.5625 49.5965909 13.5625 50.7897727 13.5625 51.8636364 14.1193182 52.5 14.9545455L54.7272727 13.125C53.5340909 11.7727273 51.8238636 11.0965909 49.9943182 11.0965909 46.2556818 11.0965909 42.9943182 13.6022727 42.4375 17.1420455 41.8806818 20.7215909 44.2670455 23.1875 48.0454545 23.1875 49.9545455 23.1875 51.8636364 22.3920455 53.5340909 21.0795455L51.9431818 19.25C50.7897727 20.2840909 49.5965909 20.7215909 48.4829545 20.7215909M63.4375 11.2159091C63.4375 11.2159091 62.9602273 11.1363636 62.9204545 11.1363636 62.4034091 11.0568182 61.8465909 11.0965909 61.3295455 11.1363636 60.8522727 11.1761364 60.375 11.2556818 59.8977273 11.4147727 59.5 11.5340909 59.0625 11.6931818 58.7045455 11.9318182L58.7840909 11.375 56.0795455 11.375 54.25 22.9090909 56.9545455 22.9090909 58.0284091 16.1875C58.0681818 15.7897727 58.2272727 15.4318182 58.4261364 15.1136364 58.625 14.7954545 58.9034091 14.5170455 59.2215909 14.3181818 59.5397727 14.0795455 59.8579545 13.9204545 60.2159091 13.8011364 60.5738636 13.6818182 60.9318182 13.6022727 61.3295455 13.5625 61.8465909 13.5227273 62.4034091 13.5625 62.9204545 13.6818182 62.9204545 13.6818182 62.9602273 13.6818182 62.9602273 13.6818182 63.0397727 13.6818182 63.4375 11.2159091 63.4375 11.2159091M72.9034091 12.0909091C72.1477273 11.4545455 70.9943182 11.0965909 69.6420455 11.0965909 66.2613636 11.0965909 63.1988636 13.5227273 62.6022727 17.1022727 62.0454545 20.6818182 64.3920455 23.1079545 67.6534091 23.1079545 69.125 23.1079545 70.3579545 22.9090909 71.3920455 22.1931818L71.3125 22.8295455 73.7784091 22.8295455 75.5681818 11.375 73.0227273 11.375 72.9034091 12.0909091zM72.3465909 17.1022727L72.3465909 17.1022727C71.9886364 19.2897727 70.3579545 20.8011364 68.25 20.8011364 66.1022727 20.8011364 64.8693182 19.2102273 65.2272727 17.0625 65.5852273 14.9147727 67.2954545 13.4034091 69.4034091 13.4034091 71.5113636 13.4431818 72.6647727 14.9147727 72.3465909 17.1022727L72.3465909 17.1022727zM88.0568182 11.375L88.5738636 8.11363636 85.4715909 10.3409091 85.3125 11.4147727 81.8125 11.4147727 82.1704545 9.22727273C82.3693182 8.19318182 83.4829545 8.23295455 83.4829545 8.23295455L84.7954545 8.23295455 85.1931818 5.84659091 83.6818182 5.84659091 83.3238636 5.84659091C79.625 5.84659091 79.5056818 8.71022727 79.5056818 8.71022727L79.2670455 10.0625 79.0681818 11.4147727 78.8295455 11.4147727 75.8068182 13.8011364 78.6704545 13.8011364 76.8409091 25.4545455 79.625 25.4545455 81.4545455 13.7613636 84.9545455 13.7613636 83.5227273 22.9090909 86.2670455 22.9090909 87.6988636 13.7613636 91.1193182 13.7613636 91.5170455 11.375 88.0568182 11.375zM95.4147727 17.1420455C95.9715909 13.6022727 99.1931818 11.0965909 102.971591 11.0965909 104.801136 11.0965909 106.511364 11.8125 107.704545 13.125L105.477273 14.9545455C104.840909 14.1193182 103.767045 13.5625 102.573864 13.5625 100.306818 13.5625 98.5568182 15.0340909 98.1988636 17.1420455 97.8806818 19.25 99.1534091 20.7215909 101.460227 20.7215909 102.573864 20.7215909 103.767045 20.2840909 104.920455 19.25L106.511364 21.0795455C104.840909 22.4318182 102.931818 23.1875 101.022727 23.1875 97.2443182 23.1875 94.8579545 20.7215909 95.4147727 17.1420455M127.630682 15.9090909L126.556818 22.9090909 123.852273 22.9090909 124.926136 16.1079545C125.204545 14.5170455 124.329545 13.5625 122.778409 13.5625 121.147727 13.5625 119.517045 14.5568182 119.278409 16.1875L118.204545 22.9090909 115.5 22.9090909 116.573864 16.1079545C116.8125 14.5568182 115.897727 13.6022727 114.426136 13.5625 112.914773 13.6420455 111.164773 14.5965909 110.926136 16.1875L109.852273 22.9090909 107.147727 22.9090909 108.977273 11.375 111.681818 11.375 111.602273 11.9318182C112.517045 11.375 113.551136 11.1363636 114.863636 11.0965909L115.102273 11.0965909C116.772727 11.0965909 118.125 11.7727273 118.840909 12.9261364 119.954545 11.7727273 121.664773 11.0965909 123.375 11.0965909 126.318182 11.0965909 128.107955 13.0454545 127.630682 15.9090909M127.511364 21.5170455L129.181818 19.4488636C130.096591 20.1647727 131.846591 20.7215909 133.318182 20.7215909 134.670455 20.7215909 136.022727 20.4431818 136.181818 19.5284091 136.301136 18.8125 134.988636 18.5738636 133.517045 18.3352273 130.454545 17.8181818 128.903409 17.1818182 129.221591 14.875 129.698864 11.9715909 132.681818 11.1363636 135.147727 11.1363636 136.897727 11.1363636 138.727273 11.7329545 139.960227 12.5681818L138.289773 14.6363636C137.335227 14.0397727 136.102273 13.6022727 134.710227 13.6022727 133.079545 13.6022727 132.125 14.0795455 132.005682 14.8352273 131.926136 15.3522727 132.363636 15.5511364 134.272727 15.8693182 137.056818 16.3465909 139.363636 16.7840909 138.926136 19.4488636 138.568182 21.875 136.102273 23.2272727 132.880682 23.2272727 131.090909 23.1875 128.784091 22.5511364 127.511364 21.5170455M30.4261364 0L3.57954545 0C1.59090909 0 0 1.59090909 0 3.57954545L0 30.4261364C0 32.4147727 1.59090909 34.0056818 3.57954545 34.0056818L30.4261364 34.0056818C32.375 34.0056818 34.0056818 32.4147727 34.0056818 30.4261364L34.0056818 3.57954545C34.0056818 1.59090909 32.4147727 0 30.4261364 0M16.9431818 20.7215909C18.0568182 20.7215909 19.25 20.2840909 20.4034091 19.25L21.9943182 21.0795455C20.3238636 22.4318182 18.4147727 23.1875 16.5056818 23.1875 12.7272727 23.1875 10.3409091 20.6818182 10.8977273 17.1420455 11.4545455 13.6022727 14.6761364 11.0965909 18.4545455 11.0965909 20.2840909 11.0965909 21.9943182 11.8125 23.1875 13.125L20.9602273 14.9545455C20.3238636 14.1193182 19.25 13.5625 18.0568182 13.5625 15.7897727 13.5625 14.0397727 15.0340909 13.6818182 17.1420455 13.3636364 19.25 14.6363636 20.7215909 16.9431818 20.7215909"/> </svg> </a> </div> <nav class="site-footer__nav" aria-label="Primary"> <span class="site-footer__nav-item"> <a href="https://craftcms.com/features" >Product</a> <nav class="site-footer__subnav" aria-label="Secondary"> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/features" > <span>Features</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/cloud" > <span>Cloud</span><span class="tw-ml-2"><span class=" tw-inline-block tw-rounded-full tw-px-[0.75em] tw-py-[0.375em] tw-bg-[#637599] tw-text-white tw-text-[0.5em] tw-tracking-wide tw-leading-none -tw-translate-y-[0.3em] tw-no-underline hover:tw-no-underline focus:tw-no-underline" style="font-size: max(10px, 0.5em)">New!</span></span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/commerce" > <span>Commerce</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/demo" > <span>Demo</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/vs-wordpress" > <span>Craft vs. WordPress</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/terms-of-use" > <span>Terms of Use</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://github.com/craftcms/cms/blob/5.x/CHANGELOG.md" target="_blank" rel="noopener me"> <span>Changelog</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/roadmap" > <span>Roadmap</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/pricing" > <span>Pricing</span></a> </span> </nav> </span> <span class="site-footer__nav-item"> <a href="https://craftcms.com/knowledge-base" >Resources</a> <nav class="site-footer__subnav" aria-label="Secondary"> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/docs/" target="_blank" rel="noopener me"> <span>Documentation</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/knowledge-base" > <span>Knowledge Base</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/starters" > <span>Starters</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://plugins.craftcms.com" target="_blank" rel="noopener me"> <span>Plugin Store</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://console.craftcms.com" target="_blank" rel="noopener me"> <span>Craft Console</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/accessibility" > <span>Accessibility</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/partners" > <span>Partners</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/events" > <span>Events</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://status.craftcms.com/" target="_blank" rel="noopener me"> <span>Status</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/blog" > <span>Blog</span></a> </span> </nav> </span> <span class="site-footer__nav-item"> <a href="https://craftcms.com/about" >About</a> <nav class="site-footer__subnav" aria-label="Secondary"> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/brand-resources" > <span>Brand Resources</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/legal" > <span>Legal</span></a> </span> </nav> </span> <span class="site-footer__nav-item"> <a href="https://craftcms.com/community" >Community</a> <nav class="site-footer__subnav" aria-label="Secondary"> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/docs/4.x/coc.html" target="_blank" rel="noopener me"> <span>Code of Conduct</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://craftcms.com/meetups" > <span>Meetups</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://bsky.app/profile/craftcms.com" target="_blank" rel="noopener me"> <img class="site-footer__subnav-item-icon" src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/icons/bluesky.svg" alt="Bluesky"> <span>Bluesky</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://masto.craftcms.com/@craftcms" target="_blank" rel="noopener me"> <img class="site-footer__subnav-item-icon" src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/icons/mastodon.svg" alt="Logo Mastodon"> <span>Mastodon</span></a> </span> <span class="site-footer__subnav-item"> <a href="https://www.threads.net/@craftcms" target="_blank" rel="noopener me"> <img class="site-footer__subnav-item-icon" src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/icons/threads.svg" alt="Threads"> <span>Threads</span></a> </span> </nav> </span> </nav> <div class="site-footer__right"> <div class="site-footer__contact"> <a class="js-btn btn btn--rect" href="https://craftcms.com/contact"> <span class="btn__content">Contact Us</span> </a> </div> <div class="site-footer__newsletter"> <a class="btn btn--newsletter" href="https://craftcms.com/newsletter/subscribe" target="_blank" rel="noopener" > <span class="btn__content">Subscribe to Our Newsletter</span> <svg width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Nav/Footer" transform="translate(-1285.000000, -336.000000)" stroke="#202020" stroke-width="2"> <g id="Group" transform="translate(1285.000000, 337.000000)"> <path d="M0,7.2 L17.5728451,7.2" id="Path-3"></path> <polyline id="Rectangle" transform="translate(10.800000, 7.200000) rotate(-315.000000) translate(-10.800000, -7.200000) " points="5.76 2.16 15.84 2.16 15.84 12.24"></polyline> </g> </g> </g> </svg> </a> <p class="site-footer__newsletter-etc">Regular updates on all things Craft</p> </div> </div> <div class="site-footer__copyright"> © 2024 Pixel & Tonic, Inc. <a href="https://craftcms.com/privacy">Privacy Statement</a> <a class="cc-revoke" href="https://craftcms.com/privacy">Cookie Notice</a> </div> <div class="site-footer__credits"> a product by <img src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/pixel-tonic-logo@2x.png" alt="Pixel & Tonic"> </div> </div> </footer> </div> <div class="l-site-search js-site-search" id="js-site-search"> <div class="l-site-search__inner"> <div class="l-site-search__overlay js-search-toggle"></div> <button class="l-site-search__close js-search-toggle" type="button" aria-label="Close search"></button> <div class="l-site-search__form-container" id="js-site-search-form-container"> <div class="l-site-search__form"> <div class="search-bar search-bar--site-search search-bar--l"> <div class="search-bar__shadow"></div> <div class="search-bar__inner"> <form action="https://craftcms.com/search" id="js-site-search-form"> <label for="qSearch" class="h-hide-visually">Search website</label> <input type="search" name="qSearch" id="qSearch" class="js-site-search-input search-bar__input" placeholder="What are you looking for?" aria-label="Search website"> <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Signed-In" transform="translate(-1288.000000, -115.000000)" stroke="#0F0F0F" stroke-width="2"> <g id="Group" transform="translate(1288.000000, 112.000000)"> <circle id="Oval-2" transform="translate(14.000000, 12.000000) rotate(-315.000000) translate(-14.000000, -12.000000) " cx="14" cy="12" r="8"></circle> <path d="M5,16 L5,26" id="Path-4" transform="translate(5.000000, 21.000000) rotate(-315.000000) translate(-5.000000, -21.000000) "></path> </g> </g> </g> </svg> <input type="submit" value="Submit" class="h-hide-visually" tabindex="-1"> </form> </div> </div> </div> </div> <div class="l-site-search__dropdown" id="js-site-search-results-container"> <div class="l-site-search__dropdown-content" id="js-site-search-results" data-loading-img="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/images/icon-loading.png"></div> </div> </div> </div> <script src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/artifacts/dist/scripts/app.js"></script> <script type="application/ld+json">{"@context":"http://schema.org","@graph":[{"@type":"WebPage","author":{"@id":"https://pixelandtonic.com/#identity"},"copyrightHolder":{"@id":"https://pixelandtonic.com/#identity"},"copyrightYear":"2021","creator":{"@id":"#creator"},"dateCreated":"2021-03-16T15:05:00-07:00","dateModified":"2024-06-12T10:56:49-07:00","datePublished":"2021-03-16T15:05:00-07:00","description":"Craft aims to provide the best content authoring experience a CMS can provide—for everyone. We’re dedicated to achieving AA conformance with key web accessibility standards WCAG 2.2 and ATAG 2.0.","headline":"Accessibility","image":{"@type":"ImageObject","url":"https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/assets/social-craft-cms.png"},"inLanguage":"en-us","mainEntityOfPage":"https://craftcms.com/accessibility","name":"Accessibility","publisher":{"@id":"#creator"},"url":"https://craftcms.com/accessibility"},{"@id":"https://pixelandtonic.com/#identity","@type":"WebApplication","description":"We’re the team behind Craft CMS.","image":{"@type":"ImageObject","height":"90","url":"https://craftcms-com.s3.amazonaws.com/logos/pixel-and-tonic.png","width":"367"},"inLanguage":"en-us","name":"Pixel & Tonic, Inc.","sameAs":["https://twitter.com/craftcms","https://www.facebook.com/craftcms/","https://www.linkedin.com/company/craftcms","https://github.com/craftcms","https://vimeo.com/craftcms"],"url":"https://pixelandtonic.com"},{"@id":"#creator","@type":"ProfessionalService","image":{"@type":"ImageObject","height":"612","url":"http://craftcms-com.s3.amazonaws.com/logos/one-design-company.png","width":"792"},"priceRange":"$"},{"@type":"BreadcrumbList","description":"Breadcrumbs list","itemListElement":[{"@type":"ListItem","item":"https://craftcms.com","name":"Homepage","position":1},{"@type":"ListItem","item":"https://craftcms.com/accessibility","name":"Accessibility","position":2}],"name":"Breadcrumbs"}]}</script><script src="https://cdn.craft.cloud/032c8560-18a8-45ba-a958-a03804e5cb66/builds/9d9b9373-287f-4add-8b7e-9c6564c2b365/cpresources/root-plugins-onecookieconsent-src-assetbundles-dist-scripts/cookieconsent.js?v=1732915226"></script></body> </html>