CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="profile" href="https://gmpg.org/xfn/11"> <title>Automattic Design Inclusive Design Checklist – Automattic Design</title> <meta name='robots' content='max-image-preview:large' />  <script id="wpcom_remote_login_js"> var wpcom_remote_login_extra_auth = ''; function wpcom_remote_login_remove_dom_node_id( element_id ) { var dom_node = document.getElementById( element_id ); if ( dom_node ) { dom_node.parentNode.removeChild( dom_node ); } } function wpcom_remote_login_remove_dom_node_classes( class_name ) { var dom_nodes = document.querySelectorAll( '.' + class_name ); for ( var i = 0; i < dom_nodes.length; i++ ) { dom_nodes[ i ].parentNode.removeChild( dom_nodes[ i ] ); } } function wpcom_remote_login_final_cleanup() { wpcom_remote_login_remove_dom_node_classes( "wpcom_remote_login_msg" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_key" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_validate" ); wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_js" ); wpcom_remote_login_remove_dom_node_id( "wpcom_request_access_iframe" ); wpcom_remote_login_remove_dom_node_id( "wpcom_request_access_styles" ); } // Watch for messages back from the remote login window.addEventListener( "message", function( e ) { if ( e.origin === "https://r-login.wordpress.com" ) { var data = {}; try { data = JSON.parse( e.data ); } catch( e ) { wpcom_remote_login_final_cleanup(); return; } if ( data.msg === 'LOGIN' ) { // Clean up the login check iframe wpcom_remote_login_remove_dom_node_id( "wpcom_remote_login_key" ); var id_regex = new RegExp( /^[0-9]+$/ ); var token_regex = new RegExp( /^.*|.*|.*$/ ); if ( token_regex.test( data.token ) && id_regex.test( data.wpcomid ) ) { // We have everything we need to ask for a login var script = document.createElement( "script" ); script.setAttribute( "id", "wpcom_remote_login_validate" ); script.src = '/remote-login.php?wpcom_remote_login=validate' + '&wpcomid=' + data.wpcomid + '&token=' + encodeURIComponent( data.token ) + '&host=' + window.location.protocol + '//' + window.location.hostname + '&postid=14152' + '&is_singular='; document.body.appendChild( script ); } return; } // Safari ITP, not logged in, so redirect if ( data.msg === 'LOGIN-REDIRECT' ) { window.location = 'https://wordpress.com/log-in?redirect_to=' + window.location.href; return; } // Safari ITP, storage access failed, remove the request if ( data.msg === 'LOGIN-REMOVE' ) { var css_zap = 'html { -webkit-transition: margin-top 1s; transition: margin-top 1s; } /* 9001 */ html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } @media screen and ( max-width: 782px ) { html { margin-top: 0 !important; } * html body { margin-top: 0 !important; } }'; var style_zap = document.createElement( 'style' ); style_zap.type = 'text/css'; style_zap.appendChild( document.createTextNode( css_zap ) ); document.body.appendChild( style_zap ); var e = document.getElementById( 'wpcom_request_access_iframe' ); e.parentNode.removeChild( e ); document.cookie = 'wordpress_com_login_access=denied; path=/; max-age=31536000'; return; } // Safari ITP if ( data.msg === 'REQUEST_ACCESS' ) { console.log( 'request access: safari' ); // Check ITP iframe enable/disable knob if ( wpcom_remote_login_extra_auth !== 'safari_itp_iframe' ) { return; } // If we are in a "private window" there is no ITP. var private_window = false; try { var opendb = window.openDatabase( null, null, null, null ); } catch( e ) { private_window = true; } if ( private_window ) { console.log( 'private window' ); return; } var iframe = document.createElement( 'iframe' ); iframe.id = 'wpcom_request_access_iframe'; iframe.setAttribute( 'scrolling', 'no' ); iframe.setAttribute( 'sandbox', 'allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-top-navigation-by-user-activation' ); iframe.src = 'https://r-login.wordpress.com/remote-login.php?wpcom_remote_login=request_access&origin=' + encodeURIComponent( data.origin ) + '&wpcomid=' + encodeURIComponent( data.wpcomid ); var css = 'html { -webkit-transition: margin-top 1s; transition: margin-top 1s; } /* 9001 */ html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } @media screen and ( max-width: 660px ) { html { margin-top: 71px !important; } * html body { margin-top: 71px !important; } #wpcom_request_access_iframe { display: block; height: 71px !important; } } #wpcom_request_access_iframe { border: 0px; height: 46px; position: fixed; top: 0; left: 0; width: 100%; min-width: 100%; z-index: 99999; background: #23282d; } '; var style = document.createElement( 'style' ); style.type = 'text/css'; style.id = 'wpcom_request_access_styles'; style.appendChild( document.createTextNode( css ) ); document.body.appendChild( style ); document.body.appendChild( iframe ); } if ( data.msg === 'DONE' ) { wpcom_remote_login_final_cleanup(); } } }, false ); // Inject the remote login iframe after the page has had a chance to load // more critical resources window.addEventListener( "DOMContentLoaded", function( e ) { var iframe = document.createElement( "iframe" ); iframe.style.display = "none"; iframe.setAttribute( "scrolling", "no" ); iframe.setAttribute( "id", "wpcom_remote_login_key" ); iframe.src = "https://r-login.wordpress.com/remote-login.php" + "?wpcom_remote_login=key" + "&origin=aHR0cHM6Ly9hdXRvbWF0dGljLmRlc2lnbg%3D%3D" + "&wpcomid=182890486" + "&time=1739774174"; document.body.appendChild( iframe ); }, false ); </script> <link rel='dns-prefetch' href='//s2.wp.com' /> <link rel='dns-prefetch' href='//s1.wp.com' /> <link rel='dns-prefetch' href='//s0.wp.com' /> <link rel='dns-prefetch' href='//fonts-api.wp.com' /> <link rel="alternate" type="application/rss+xml" title="Automattic Design » Feed" href="https://automattic.design/feed/" /> <link rel="alternate" type="application/rss+xml" title="Automattic Design » Comments Feed" href="https://automattic.design/comments/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } } /* ]]> */ </script> <script> window._wpemojiSettings = {"baseUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s0.wp.com\/wp-content\/mu-plugins\/wpcom-smileys\/twemoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/s2.wp.com\/wp-includes\/js\/wp-emoji-release.min.js?m=1719498190i&ver=6.7.2-RC1-59780"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); </script> <style id='wp-emoji-styles-inline-css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-2-1' href='https://s0.wp.com/_static/??-eJyljkEOwiAQRS8knWKNdmM8C9AJUimQmaGG21vdmLhq4vLn5b18eBblchJMAiVWHxKDr9u0SH4jhLAe+67vNNga4gQ2ZvdQMVgy1IClRewc8wH+C8kdlz2hj8UwoxTz1k3LVZSnMO3+8pMgIyF5/uq35aovwzieznrQ8wtw12pJ&cssminify=yes' type='text/css' media='all' /> <style id='wp-block-library-inline-css'> .has-text-align-justify { text-align:justify; } .has-text-align-justify{text-align:justify;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-4-1' href='https://s2.wp.com/_static/??-eJzTLy/QzcxLzilNSS3WzyrWz01NyUxMzUnNTc0rQeEU5CRWphbp5qSmJyZX6uVm5uklFxfr6OPTDpRD5sM02efaGpoZmFkYGRuZGmQBAHPvL0Y=&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-6-1' href='https://s2.wp.com/wp-content/plugins/coblocks/2.18.1-simple-rev.4/dist/coblocks-style.css?m=1681832297i&cssminify=yes' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-8-1' href='https://s1.wp.com/_static/??/wp-content/mu-plugins/core-compat/wp-mediaelement.css,/wp-content/mu-plugins/wpcom-bbpress-premium-themes.css?m=1432920480j&cssminify=yes' type='text/css' media='all' /> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--accent: #FFC300;--wp--preset--color--primary: #008CDB;--wp--preset--color--secondary: #BDBFC1;--wp--preset--color--subtle-background: #EEEFF0;--wp--preset--color--bodytext: #021A23;--wp--preset--color--background: #FFFFFF;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 24px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 50px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--normal: 40px;--wp--preset--font-size--huge: 80px;--wp--preset--font-family--albert-sans: 'Albert Sans', sans-serif;--wp--preset--font-family--alegreya: Alegreya, serif;--wp--preset--font-family--arvo: Arvo, serif;--wp--preset--font-family--bodoni-moda: 'Bodoni Moda', serif;--wp--preset--font-family--bricolage-grotesque: 'Bricolage Grotesque', sans-serif;--wp--preset--font-family--cabin: Cabin, sans-serif;--wp--preset--font-family--chivo: Chivo, sans-serif;--wp--preset--font-family--commissioner: Commissioner, sans-serif;--wp--preset--font-family--cormorant: Cormorant, serif;--wp--preset--font-family--courier-prime: 'Courier Prime', monospace;--wp--preset--font-family--crimson-pro: 'Crimson Pro', serif;--wp--preset--font-family--dm-mono: 'DM Mono', monospace;--wp--preset--font-family--dm-sans: 'DM Sans', sans-serif;--wp--preset--font-family--dm-serif-display: 'DM Serif Display', serif;--wp--preset--font-family--domine: Domine, serif;--wp--preset--font-family--eb-garamond: 'EB Garamond', serif;--wp--preset--font-family--epilogue: Epilogue, sans-serif;--wp--preset--font-family--fahkwang: Fahkwang, sans-serif;--wp--preset--font-family--figtree: Figtree, sans-serif;--wp--preset--font-family--fira-sans: 'Fira Sans', sans-serif;--wp--preset--font-family--fjalla-one: 'Fjalla One', sans-serif;--wp--preset--font-family--fraunces: Fraunces, serif;--wp--preset--font-family--gabarito: Gabarito, system-ui;--wp--preset--font-family--ibm-plex-mono: 'IBM Plex Mono', monospace;--wp--preset--font-family--ibm-plex-sans: 'IBM Plex Sans', sans-serif;--wp--preset--font-family--ibarra-real-nova: 'Ibarra Real Nova', serif;--wp--preset--font-family--instrument-serif: 'Instrument Serif', serif;--wp--preset--font-family--inter: Inter, sans-serif;--wp--preset--font-family--josefin-sans: 'Josefin Sans', sans-serif;--wp--preset--font-family--jost: Jost, sans-serif;--wp--preset--font-family--libre-baskerville: 'Libre Baskerville', serif;--wp--preset--font-family--libre-franklin: 'Libre Franklin', sans-serif;--wp--preset--font-family--literata: Literata, serif;--wp--preset--font-family--lora: Lora, serif;--wp--preset--font-family--merriweather: Merriweather, serif;--wp--preset--font-family--montserrat: Montserrat, sans-serif;--wp--preset--font-family--newsreader: Newsreader, serif;--wp--preset--font-family--noto-sans-mono: 'Noto Sans Mono', sans-serif;--wp--preset--font-family--nunito: Nunito, sans-serif;--wp--preset--font-family--open-sans: 'Open Sans', sans-serif;--wp--preset--font-family--overpass: Overpass, sans-serif;--wp--preset--font-family--pt-serif: 'PT Serif', serif;--wp--preset--font-family--petrona: Petrona, serif;--wp--preset--font-family--piazzolla: Piazzolla, serif;--wp--preset--font-family--playfair-display: 'Playfair Display', serif;--wp--preset--font-family--plus-jakarta-sans: 'Plus Jakarta Sans', sans-serif;--wp--preset--font-family--poppins: Poppins, sans-serif;--wp--preset--font-family--raleway: Raleway, sans-serif;--wp--preset--font-family--roboto: Roboto, sans-serif;--wp--preset--font-family--roboto-slab: 'Roboto Slab', serif;--wp--preset--font-family--rubik: Rubik, sans-serif;--wp--preset--font-family--rufina: Rufina, serif;--wp--preset--font-family--sora: Sora, sans-serif;--wp--preset--font-family--source-sans-3: 'Source Sans 3', sans-serif;--wp--preset--font-family--source-serif-4: 'Source Serif 4', serif;--wp--preset--font-family--space-mono: 'Space Mono', monospace;--wp--preset--font-family--syne: Syne, sans-serif;--wp--preset--font-family--texturina: Texturina, serif;--wp--preset--font-family--urbanist: Urbanist, sans-serif;--wp--preset--font-family--work-sans: 'Work Sans', sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-albert-sans-font-family{font-family: var(--wp--preset--font-family--albert-sans) !important;}.has-alegreya-font-family{font-family: var(--wp--preset--font-family--alegreya) !important;}.has-arvo-font-family{font-family: var(--wp--preset--font-family--arvo) !important;}.has-bodoni-moda-font-family{font-family: var(--wp--preset--font-family--bodoni-moda) !important;}.has-bricolage-grotesque-font-family{font-family: var(--wp--preset--font-family--bricolage-grotesque) !important;}.has-cabin-font-family{font-family: var(--wp--preset--font-family--cabin) !important;}.has-chivo-font-family{font-family: var(--wp--preset--font-family--chivo) !important;}.has-commissioner-font-family{font-family: var(--wp--preset--font-family--commissioner) !important;}.has-cormorant-font-family{font-family: var(--wp--preset--font-family--cormorant) !important;}.has-courier-prime-font-family{font-family: var(--wp--preset--font-family--courier-prime) !important;}.has-crimson-pro-font-family{font-family: var(--wp--preset--font-family--crimson-pro) !important;}.has-dm-mono-font-family{font-family: var(--wp--preset--font-family--dm-mono) !important;}.has-dm-sans-font-family{font-family: var(--wp--preset--font-family--dm-sans) !important;}.has-dm-serif-display-font-family{font-family: var(--wp--preset--font-family--dm-serif-display) !important;}.has-domine-font-family{font-family: var(--wp--preset--font-family--domine) !important;}.has-eb-garamond-font-family{font-family: var(--wp--preset--font-family--eb-garamond) !important;}.has-epilogue-font-family{font-family: var(--wp--preset--font-family--epilogue) !important;}.has-fahkwang-font-family{font-family: var(--wp--preset--font-family--fahkwang) !important;}.has-figtree-font-family{font-family: var(--wp--preset--font-family--figtree) !important;}.has-fira-sans-font-family{font-family: var(--wp--preset--font-family--fira-sans) !important;}.has-fjalla-one-font-family{font-family: var(--wp--preset--font-family--fjalla-one) !important;}.has-fraunces-font-family{font-family: var(--wp--preset--font-family--fraunces) !important;}.has-gabarito-font-family{font-family: var(--wp--preset--font-family--gabarito) !important;}.has-ibm-plex-mono-font-family{font-family: var(--wp--preset--font-family--ibm-plex-mono) !important;}.has-ibm-plex-sans-font-family{font-family: var(--wp--preset--font-family--ibm-plex-sans) !important;}.has-ibarra-real-nova-font-family{font-family: var(--wp--preset--font-family--ibarra-real-nova) !important;}.has-instrument-serif-font-family{font-family: var(--wp--preset--font-family--instrument-serif) !important;}.has-inter-font-family{font-family: var(--wp--preset--font-family--inter) !important;}.has-josefin-sans-font-family{font-family: var(--wp--preset--font-family--josefin-sans) !important;}.has-jost-font-family{font-family: var(--wp--preset--font-family--jost) !important;}.has-libre-baskerville-font-family{font-family: var(--wp--preset--font-family--libre-baskerville) !important;}.has-libre-franklin-font-family{font-family: var(--wp--preset--font-family--libre-franklin) !important;}.has-literata-font-family{font-family: var(--wp--preset--font-family--literata) !important;}.has-lora-font-family{font-family: var(--wp--preset--font-family--lora) !important;}.has-merriweather-font-family{font-family: var(--wp--preset--font-family--merriweather) !important;}.has-montserrat-font-family{font-family: var(--wp--preset--font-family--montserrat) !important;}.has-newsreader-font-family{font-family: var(--wp--preset--font-family--newsreader) !important;}.has-noto-sans-mono-font-family{font-family: var(--wp--preset--font-family--noto-sans-mono) !important;}.has-nunito-font-family{font-family: var(--wp--preset--font-family--nunito) !important;}.has-open-sans-font-family{font-family: var(--wp--preset--font-family--open-sans) !important;}.has-overpass-font-family{font-family: var(--wp--preset--font-family--overpass) !important;}.has-pt-serif-font-family{font-family: var(--wp--preset--font-family--pt-serif) !important;}.has-petrona-font-family{font-family: var(--wp--preset--font-family--petrona) !important;}.has-piazzolla-font-family{font-family: var(--wp--preset--font-family--piazzolla) !important;}.has-playfair-display-font-family{font-family: var(--wp--preset--font-family--playfair-display) !important;}.has-plus-jakarta-sans-font-family{font-family: var(--wp--preset--font-family--plus-jakarta-sans) !important;}.has-poppins-font-family{font-family: var(--wp--preset--font-family--poppins) !important;}.has-raleway-font-family{font-family: var(--wp--preset--font-family--raleway) !important;}.has-roboto-font-family{font-family: var(--wp--preset--font-family--roboto) !important;}.has-roboto-slab-font-family{font-family: var(--wp--preset--font-family--roboto-slab) !important;}.has-rubik-font-family{font-family: var(--wp--preset--font-family--rubik) !important;}.has-rufina-font-family{font-family: var(--wp--preset--font-family--rufina) !important;}.has-sora-font-family{font-family: var(--wp--preset--font-family--sora) !important;}.has-source-sans-3-font-family{font-family: var(--wp--preset--font-family--source-sans-3) !important;}.has-source-serif-4-font-family{font-family: var(--wp--preset--font-family--source-serif-4) !important;}.has-space-mono-font-family{font-family: var(--wp--preset--font-family--space-mono) !important;}.has-syne-font-family{font-family: var(--wp--preset--font-family--syne) !important;}.has-texturina-font-family{font-family: var(--wp--preset--font-family--texturina) !important;}.has-urbanist-font-family{font-family: var(--wp--preset--font-family--urbanist) !important;}.has-work-sans-font-family{font-family: var(--wp--preset--font-family--work-sans) !important;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-10-1' href='https://s1.wp.com/wp-content/themes/a8c/a8cdesign/style.css?m=1671021359i&cssminify=yes' type='text/css' media='all' /> <style id='a8cdesign-style-inline-css'> /* -- footer links ---------------- */ .menu-item a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']), .footer-widgets a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']){ background-image: url(https://s2.wp.com/wp-content/themes/a8c/a8cdesign/assets/svg/external-link-arrow.svg); background-size: 10px 10px; background-position: top right; background-repeat: no-repeat; padding-right: 10px; transition: background-position .3s ease-in-out; } /* hover */ .menu-item a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover, .footer-widgets a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover { background-position: top -2px right -2px; } /* -- WP block button ---------------- */ /* -- outline button but not text -- */ .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']) { background-position: calc(100% - 32px) 30%; padding-right: 30px; transition: all 0.15s linear, background-position .3s ease-in-out; } /* hover */ .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover { background-position: calc(100% - 30px) calc(30% - 2px); } /* -- outline button -- */ .wp-block-buttons .wp-block-button.wp-block-button a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/'])::after { background-image: url(https://s2.wp.com/wp-content/themes/a8c/a8cdesign/assets/svg/external-link-arrow.svg); background-size: 10px 10px; background-position: top 1px right 8px; background-repeat: no-repeat; content: ''; display: inline-block; width: 20px; height: 20px; transition: background-position .3s ease-in-out; } /* hover */ .wp-block-buttons .wp-block-button.wp-block-button a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover::after { background-position: top -1px right 6px; } /* -- buttons inside block with bg colour -- */ .has-primary-background-color .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-outline):not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/'])::after { filter: brightness(0); } /* -- default button & hover on outline & hover on button inside block with bg colour -- */ .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-outline):not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/'])::after, .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover::after, .has-primary-background-color .wp-block-buttons .wp-block-button.wp-block-button:not(.is-style-outline):not(.is-style-text) a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover::after { filter: brightness(1000); } /* -- text button icon colour -- */ .wp-block-buttons .wp-block-button.wp-block-button.is-style-text a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/'])::after { filter: invert(43%) sepia(66%) saturate(4008%) hue-rotate(178deg) brightness(94%) contrast(101%); } .wp-block-buttons .wp-block-button.wp-block-button.is-style-text a.wp-block-button__link:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover::after { filter: none; } /* -- Main menu links ---------------- */ .primary-menu a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']), .modal-menu a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']) { background-position: top 15px left calc(100% - 2rem + 12px ); padding-right: 2rem; transition: background-position .3s ease-in-out } /* hover */ .primary-menu a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover, .modal-menu a:not([href*='https://automattic.design']):not([href^='#']):not([href^='/']):hover { background-position: top 13px left calc(100% - 2rem + 14px ); } .author-bio { clip: rect(1px, 1px, 1px, 1px); height: 1px; position: absolute; overflow: hidden; width: 1px; } </style> <link crossorigin='anonymous' rel='stylesheet' id='print-css-11-1' href='https://s2.wp.com/wp-content/themes/a8c/a8cdesign/print.css?m=1600727710i&cssminify=yes' type='text/css' media='print' /> <link rel='stylesheet' id='a8cdesign-fonts-css' href='https://fonts-api.wp.com/css?family=Libre+Franklin%3Aital%2Cwght%400%2C200%3B0%2C300%3B0%2C400%3B0%2C600%3B0%2C700%3B0%2C900%3B1%2C300%3B1%2C400%3B1%2C600%3B1%2C700%7CLibre+Baskerville%3Aital%2Cwght%400%2C400%3B1%2C400%26display%3Dswap&subset=latin-ext&ver=1.0' media='all' /> <style id='akismet-widget-style-inline-css'> .a-stats { --akismet-color-mid-green: #357b49; --akismet-color-white: #fff; --akismet-color-light-grey: #f6f7f7; max-width: 350px; width: auto; } .a-stats * { all: unset; box-sizing: border-box; } .a-stats strong { font-weight: 600; } .a-stats a.a-stats__link, .a-stats a.a-stats__link:visited, .a-stats a.a-stats__link:active { background: var(--akismet-color-mid-green); border: none; box-shadow: none; border-radius: 8px; color: var(--akismet-color-white); cursor: pointer; display: block; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif; font-weight: 500; padding: 12px; text-align: center; text-decoration: none; transition: all 0.2s ease; } /* Extra specificity to deal with TwentyTwentyOne focus style */ .widget .a-stats a.a-stats__link:focus { background: var(--akismet-color-mid-green); color: var(--akismet-color-white); text-decoration: none; } .a-stats a.a-stats__link:hover { filter: brightness(110%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.16); } .a-stats .count { color: var(--akismet-color-white); display: block; font-size: 1.5em; line-height: 1.4; padding: 0 13px; white-space: nowrap; } </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-16-1' href='https://s1.wp.com/_static/??-eJzTLy/QTc7PK0nNK9HPLdUtyClNz8wr1i9KTcrJTwcy0/WTi5G5ekCujj52Temp+bo5+cmJJZn5eSgc3bScxMwikFb7XFtDE1NLExMLc0OTLACohS2q&cssminify=yes' type='text/css' media='all' /> <style id='jetpack-global-styles-frontend-style-inline-css'> :root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;} </style> <link crossorigin='anonymous' rel='stylesheet' id='all-css-18-1' href='https://s2.wp.com/wp-content/themes/h4/global.css?m=1420737423i&cssminify=yes' type='text/css' media='all' /> <script id="wpcom-actionbar-placeholder-js-extra"> var actionbardata = {"siteID":"182890486","postID":"14152","siteURL":"https:\/\/automattic.design","xhrURL":"https:\/\/automattic.design\/wp-admin\/admin-ajax.php","nonce":"2ee1984496","isLoggedIn":"","statusMessage":"","subsEmailDefault":"instantly","proxyScriptUrl":"https:\/\/s0.wp.com\/wp-content\/js\/wpcom-proxy-request.js?ver=20211021","shortlink":"https:\/\/wp.me\/Pcnoay-3Gg","i18n":{"followedText":"New posts from this site will now appear in your <a href=\"https:\/\/wordpress.com\/reader\">Reader<\/a>","foldBar":"Collapse this bar","unfoldBar":"Expand this bar","shortLinkCopied":"Shortlink copied to clipboard."}}; </script> <script id="jetpack-mu-wpcom-settings-js-before"> var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/s1.wp.com\/wp-content\/mu-plugins\/jetpack-mu-wpcom-plugin\/sun\/jetpack_vendor\/automattic\/jetpack-mu-wpcom\/src\/build\/"}; </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/_static/??/wp-content/js/rlt-proxy.js,/wp-content/themes/a8c/a8cdesign/assets/js/index.js?m=1720530689j'></script> <script id="rlt-proxy-js-after"> rltInitialize( {"token":null,"iframeOrigins":["https:\/\/widgets.wp.com"]} ); </script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://a8cdesignsimple.wordpress.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress.com" /> <link rel="canonical" href="https://automattic.design/inclusive/" /> <link rel='shortlink' href='https://wp.me/Pcnoay-3Gg' /> <style> @font-face { font-family: Recoleta; font-display: swap; src: url('https://s1.wp.com/i/fonts/recoleta/400.woff2') } </style> <link rel="alternate" type="application/json+oembed" href="https://public-api.wordpress.com/oembed/?format=json&url=https%3A%2F%2Fautomattic.design%2Finclusive%2F&for=wpcom-auto-discovery" /><link rel="alternate" type="application/xml+oembed" href="https://public-api.wordpress.com/oembed/?format=xml&url=https%3A%2F%2Fautomattic.design%2Finclusive%2F&for=wpcom-auto-discovery" />  <meta property="og:type" content="article" /> <meta property="og:title" content="Automattic Design Inclusive Design Checklist" /> <meta property="og:url" content="https://automattic.design/inclusive/" /> <meta property="og:description" content="Good design is inclusive design Design is more than color, shape, or font — it’s a powerful tool that mediates our relationship with the world. Inclusive design is that, plus potential: the p…" /> <meta property="article:published_time" content="2019-05-20T12:16:58+00:00" /> <meta property="article:modified_time" content="2019-05-20T12:16:58+00:00" /> <meta property="og:site_name" content="Automattic Design" /> <meta property="og:image" content="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=200" /> <meta property="og:image:width" content="200" /> <meta property="og:image:height" content="200" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta property="article:publisher" content="https://www.facebook.com/WordPresscom" /> <meta name="twitter:text:title" content="Automattic Design Inclusive Design Checklist" /> <meta name="twitter:image" content="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=240" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:app:name:iphone" content="Jetpack" /> <meta name="twitter:app:id:iphone" content="1565481562" /> <meta name="twitter:app:name:ipad" content="Jetpack" /> <meta name="twitter:app:id:ipad" content="1565481562" /> <meta name="twitter:app:name:googleplay" content="Jetpack" /> <meta name="twitter:app:id:googleplay" content="com.jetpack.android" />  <link rel="search" type="application/opensearchdescription+xml" href="https://automattic.design/osd.xml" title="Automattic Design" /> <link rel="search" type="application/opensearchdescription+xml" href="https://s1.wp.com/opensearch.xml" title="WordPress.com" /> <script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script> <meta name="description" content="Good design is inclusive design Design is more than color, shape, or font — it's a powerful tool that mediates our relationship with the world. Inclusive design is that, plus potential: the potential to unite heterogeneous cultures in shared understanding. To make products and experiences globally accessible. To connect us. Truly inclusive designs are never…" /> <link rel="icon" href="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=32" sizes="32x32" /> <link rel="icon" href="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=192" sizes="192x192" /> <link rel="apple-touch-icon" href="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=180" /> <meta name="msapplication-TileImage" content="https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=270" /> <link rel="stylesheet" id="custom-css-css" type="text/css" href="https://s2.wp.com/?custom-css=1&csblog=cnoay&cscache=6&csrev=209" /> </head> <body class="page-template-default page page-id-14152 wp-custom-logo customizer-styles-applied singular enable-search-modal missing-post-thumbnail has-no-pagination not-showing-comments show-avatars jetpack-reblog-enabled author-hidden"> <a class="skip-link screen-reader-text" href="#site-content">Skip to the content</a> <header id="site-header" class="header-footer-group" role="banner"> <div class="header-inner"> <div class="header-titles-wrapper"> <div class="header-titles"> <div class="site-logo faux-heading"><a href="https://automattic.design/" class="custom-logo-link" rel="home"><img width="300" height="30" style="height: 30px;" src="https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png" class="custom-logo" alt="Automattic Design" decoding="async" srcset="https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png 600w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png?w=150&h=15 150w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png?w=300&h=30 300w" sizes="(max-width: 600px) 100vw, 600px" data-attachment-id="21423" data-permalink="https://automattic.design/a8c-design-logo-2024b/" data-orig-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png" data-orig-size="600,60" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="a8c-design-logo-2024b" data-image-description="" data-image-caption="" data-medium-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png?w=300" data-large-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-logo-2024b.png?w=600" /><img width="300" height="48" style="height: 48px;" src="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png" class="custom-logo-mobile" alt="Automattic Design" decoding="async" srcset="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png 601w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png?w=150&h=24 150w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png?w=300&h=48 300w" sizes="(max-width: 601px) 100vw, 601px" data-attachment-id="21427" data-permalink="https://automattic.design/a8c-design-mobile-logo-2024/" data-orig-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png" data-orig-size="601,96" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="a8c-design-mobile-logo-2024" data-image-description="" data-image-caption="" data-medium-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png?w=300" data-large-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024.png?w=601" /></a><span class="screen-reader-text">Automattic Design</span></div><div class="site-description screen-reader-text">Designing a better web</div> </div> <button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle"> <span class="toggle-inner"> <span class="toggle-icon"> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z" /><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" /></svg> </span> <span class="screen-reader-text">Menu</span> </span> </button> </div> <div class="header-navigation-wrapper"> <nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation"> <ul class="primary-menu reset-list-style"> <li id="menu-item-15216" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15216"><a href="https://automattic.design/blog/">Blog</a></li> <li id="menu-item-19215" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19215"><a href="https://automattic.design/team/">Team</a></li> <li id="menu-item-16652" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16652"><a href="https://automattic.design/projects/">Projects</a></li> <li id="menu-item-17970" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17970"><a href="https://automattic.design/jobs/">Jobs</a></li> </ul> </nav> <div class="header-toggles hide-no-js"> <div class="toggle-wrapper search-toggle-wrapper"> <button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> <span class="toggle-inner"> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg"><path d="M1 13.8464L5.61544 9.80786" stroke="currentColor" stroke-width="1.5" /><circle fill="none" cx="9.65385" cy="6.34623" r="5.59623" stroke="currentColor" stroke-width="1.5" /></svg> <span class="toggle-text screen-reader-text">Search</span> </span> </button> </div> </div> </div> </div> <div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal"> <div class="menu-wrapper section-inner"> <div class="modal-header"> <div class="site-logo faux-heading"><a href="https://automattic.design/" class="custom-logo-link" rel="home"><img width="300" height="48" style="height: 48px;" src="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png" class="custom-logo-mobile" alt="Automattic Design" decoding="async" srcset="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png 601w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=150&h=24 150w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=300&h=48 300w" sizes="(max-width: 601px) 100vw, 601px" data-attachment-id="21429" data-permalink="https://automattic.design/a8c-design-mobile-logo-2024-alt/" data-orig-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png" data-orig-size="601,96" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="a8c-design-mobile-logo-2024-alt" data-image-description="" data-image-caption="" data-medium-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=300" data-large-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=601" /></a><span class="screen-reader-text">Automattic Design</span></div> <button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal"> <span class="toggle-text screen-reader-text">Close Menu</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><path d="M1.72243 1L26 26M1 26L25.2776 1" stroke="currentColor" stroke-width="1.5" /></svg> </button> </div> <div class="menu-top"> <nav class="mobile-menu" aria-label="Mobile" role="navigation"> <ul class="modal-menu reset-list-style"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15216"><div class="ancestor-wrapper"><a href="https://automattic.design/blog/">Blog</a></div></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19215"><div class="ancestor-wrapper"><a href="https://automattic.design/team/">Team</a></div></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16652"><div class="ancestor-wrapper"><a href="https://automattic.design/projects/">Projects</a></div></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17970"><div class="ancestor-wrapper"><a href="https://automattic.design/jobs/">Jobs</a></div></li> </ul> </nav> <button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> <span class="toggle-inner"> Search </span> </button> </div> <p class="footer-company-logo"> <a href="https://automattic.com">automattic.com</a> </p> </div> </div> <div class="search-modal cover-modal" data-modal-disable-html-styles data-modal-target-string=".search-modal"> <div class="search-modal-inner modal-inner"> <div class="modal-header"> <div class="site-logo faux-heading"><a href="https://automattic.design/" class="custom-logo-link" rel="home"><img width="300" height="48" style="height: 48px;" src="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png" class="custom-logo-mobile" alt="Automattic Design" decoding="async" srcset="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png 601w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=150&h=24 150w, https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=300&h=48 300w" sizes="(max-width: 601px) 100vw, 601px" data-attachment-id="21429" data-permalink="https://automattic.design/a8c-design-mobile-logo-2024-alt/" data-orig-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png" data-orig-size="601,96" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="a8c-design-mobile-logo-2024-alt" data-image-description="" data-image-caption="" data-medium-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=300" data-large-file="https://automattic.design/wp-content/uploads/2024/09/a8c-design-mobile-logo-2024-alt.png?w=601" /></a><span class="screen-reader-text">Automattic Design</span></div> <button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".search-modal,.menu-modal" aria-expanded="false" data-set-focus=".menu-modal"> <span class="toggle-text screen-reader-text">Close Menu</span> <svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="27" height="27" viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><path d="M1.72243 1L26 26M1 26L25.2776 1" stroke="currentColor" stroke-width="1.5" /></svg> </button> </div> <form role="search" aria-label="Search for:" method="get" class="search-form" action="https://automattic.design/"> <label for="search-form-1"> <span class="screen-reader-text">Search for:</span> <input type="search" id="search-form-1" class="search-field" placeholder="Search …" value="" name="s" /> </label> <button type="submit" class="search-submit"><svg class="svg-icon" aria-hidden="true" role="img" focusable="false" width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg"><path d="M1 13.8464L5.61544 9.80786" stroke="currentColor" stroke-width="1.5" /><circle fill="none" cx="9.65385" cy="6.34623" r="5.59623" stroke="currentColor" stroke-width="1.5" /></svg><span class="screen-reader-text">Search</span></button> </form> </div> <button class="toggle search-untoggle close-search-toggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> Close </button> </div> </header> <main id="site-content" role="main"> <article class="post-14152 page type-page status-publish hentry" id="post-14152"> <header class="entry-header header-footer-group"> <div class="entry-header-inner"> <div class="entry-header-inner-top"> </div> <h1 class="entry-title">Automattic Design Inclusive Design Checklist</h1> </div> </header> <div class="post-inner"> <div class="entry-content"> <h3 class="wp-block-heading">Good design is inclusive design</h3> <p>Design is more than color, shape, or font — it’s a powerful tool that mediates our relationship with the world. Inclusive design is that, plus potential: the potential to unite heterogeneous cultures in shared understanding. To make products and experiences globally accessible. To connect us.</p> <p>Truly inclusive designs are never really finished, and becoming fluent in inclusive design takes more than a checklist. We all need a map when we start exploring any new world, though — let this list of ideas inspire and orient you and your team as you begin your journey into inclusive design.</p> <ol> <li><a href="#perspective">Broadening perspectives and building empathy ↓</a></li> <li><a href="#teams">Bringing diversity into teams and processes ↓</a></li> <li><a href="#designs">Building inclusion into designs ↓</a></li> </ol> <h3 id="perspective" class="perspective">Broadening perspectives and building empathy:</h3> <div class="perspective-container"> <ul> <li class="perspective"><strong>Expand your social network.</strong><br>Exposing ourselves to new and different perspectives gives us a richer and more nuanced understanding of the world. That can start with who we follow on social networks — and even which networks we use. Make an effort to follow individuals who represent a range of experiences, backgrounds, and identities. Give special consideration to the topics and experiences being shared by individuals who are different than you and groups you don’t belong to. One way to kickstart this: follow someone you don’t fully agree with, and give some real consideration to their perspective.</li> <li class="perspective"><strong>Refresh your advisors.</strong><br>Most of us have advisors, mentors, or coaches, even if the relationships are informal. Be sure that those who you look to for guidance, design review, for career advice come from diverse backgrounds and experiences. This should reduce the amount of redundant feedback you receive and increase the number of perspectives you are able to integrate into your work.</li> <li class="perspective"><strong>Go somewhere new.</strong><br>You probably have an established home, community, friends, work, and activities — your comfort zone. Being in a new place, with new people who have different values and routines, strips that familiarity away; that’s when we learn the most. This can help you relate to other cultural norms and can increase your ability to empathize with where someone else may be coming from. From visiting a new restaurant, store, or neighborhood to traveling to another country, there are many ways to experience a new place.</li> <li class="perspective"><strong>Read more.</strong><br>Reading is an important tool for understanding the world, and developing imagination, empathy, and critical thinking. It’s also easy to do: pick up a book or browse blog posts written by individuals across the globe from any internet-connected device. Read a variety of opinions and challenge yourself to consider multiple sides of a fruitful conversation or debate.</li> <li class="perspective"><strong>Consider nuanced experience.</strong><br>No individual or group is a spokesperson for an entire community. Everyone has nuanced experiences that make up their identity. We’re each layered and are often not as simple as we may appear to others. When we ignore the points of view of those we’re designing for, we risk designing for someone that doesn’t exist, following stereotypes, and alienating real people.</li> <li class="perspective"><strong>Commit to personal growth.</strong><br>A growth mindset requires approaching the world with the idea that you can learn and grow. You can learn a new skill. You can change your opinion. You don’t know as much about something as you want. You can be a better designer tomorrow than you are today. When we don’t take on a growth mindset, we risk remaining in a fixed state, producing stagnant designs that don’t support evolving needs.</li> </ul> <p><a href="#top">Return to top ↑</a></p> </div> <h3 id="teams" class="teams">Bringing diversity into teams and processes:</h3> <div class="teams-container"> <ul> <li class="teams"><strong>Diversify your team.</strong><br>Homogeneous teams create narrow designs; teams with diverse experiences create more inclusive designs. Be sure that members of your team don’t come from the same culture, age group, gender, or gender expression, and don’t all have similar experiences and educations. If your team is limited and you don’t have the ability to expand, actively seek out people with other perspectives to consult or act as project advisors, and give special consideration to their feedback.</li> <li class="teams"><strong>Help your audiences inform your design.</strong><br>Learn about your audiences: their motivations, needs, behaviors, challenges, pain points, and goals. Consider existing customers, prospective customers, your client’s customers, and past customers. It may be tempting to only pay attention to primary use cases, but get to know the less-common ones and design, review, and test with those in mind as well. Set up user interviews, split tests, and analytics so that your audience can inform your initial design decisions and later iterations.</li> </ul> <p><a href="#top">Return to top ↑</a></p> </div> <h3 id="designs" class="designs">Building inclusion into designs:</h3> <div class="designs-container"> <ul> <li class="designs"><strong>Use accessibility practices to avoid barriers.</strong><br>There’s no inclusion without accessibility. Accessible designs will present differently depending on the medium you’re working in; consider physical, visual, auditory, financial, and other factors as well as an individual’s temporary or permanent limitations to accessing each. Is your video accessible to someone with hearing impairment? Is your website accessible to someone with a low internet bandwidth? Is your copy readable by individuals with different education levels, for whom the text is in a second language, or who are new to the subject matter? The more contexts you consider, the more accessible and inclusive your designs will be. <p> </p> <ul> <li class="designs"><strong>Provide enough contrast between text and background color.</strong><br>Whether you’re working in print, digital, with light projection, or something else entirely, readers need contrast between text and background to distinguish letterforms. Designs with low contrast may be easy to read for one person, cause strain for another, and be entirely unreadable to a third. Test your contrast using a well-rated contrast checker and by having a diverse set of people review it and provide feedback.</li> <li class="designs"><strong>Use more than color to indicate important information.</strong><br>Using color alone to indicate important information, like “proceed” or “cancel,” may exclude those with color blindness or vision impairment. The addition of a written message or icon provides further access to information.</li> <li class="designs"><strong>Write good alt text for your images.</strong><br>“Alt text” is the common abbreviation for the alt attribute on an image online, and it’s used by screen readers to describe an image to the blind, visually impaired, and others. Images often provide useful context or flavor to content. Including good alt text — text that thoughtfully describes an image — helps more individuals get the full experience of your design.</li> <li class="designs"><strong>Use focus states.</strong><br>Have you ever noticed the outlines, often blue, that show up around buttons or form fields when you’re filling them out? These outlines are called “focus indicators” or “focus states,” and they’re visual markers to specify which element the user is on within a page or application. Including these in interactive designs — and making them really obvious — goes a long way towards making the elements inclusive. Those who use screen readers due to visual impairment or blindness; those who rely on keyboard navigation, a mouth stick, or switch due to limited mobility; or power users who quickly navigate through pages all benefit from this important design detail.</li> <li class="designs"><strong>Make descriptive links.</strong><br>Descriptive links provide your audience with context on where a link will take them. Screen readers navigate a page link by link. When a link doesn’t give any detail, but simply says something like “read more,” those engaging with your design via screen reader lack the context needed to get the full experience or make decisions.</li> <li class="designs"><strong>Provide captions and descriptions of video.</strong><br>Videos usually include spoken information in an audio track, and visual information in a video track. Any information that is only provided visually or audibly is inaccessible to individuals who can’t see or hear. Captions can help for individuals who can’t see, while audio descriptions are useful for making visually complex videos accessible to those without or with limited sight. Lastly, a media transcript is a text-based alternative that includes all audio and visual information, including descriptions of scenes, in a transcript form that can be accessed by all. You may have limited options based on where a video is posted, but keeping the possible limitations to the audio and visuals in mind will help you design accessible solutions around those barriers.</li> <li class="designs"><strong>Provide cost-accessible options of your designs.</strong><br>Some designs have high price tags due to expensive design details. Designs that are unnecessarily expensive exclude those with fewer resources or who are economically unstable. If high expenses are necessary, consider offering another price level option that doesn’t have the same costs. An expensive hardcover book might also be sold as a less-expensive soft-cover book, e-book, downloadable PDF, or a web page. If your primary offering is done thoughtfully, there should still be a draw for that form with those that can afford it.</li> <li class="designs"><strong>Design for low bandwidth.</strong><br>One of the biggest factors in user satisfaction with a web product is speed. Optimizing your site or application for faster page and content load times means that more people will enjoy using it. There are also many areas of the globe without broadband internet connections — when you optimize for speed, you’re making your product more accessible to those who would otherwise be excluded because of lower connectivity.</li> </ul> </li> <li class="designs"><strong>Create for clarity and consistency.</strong><br>Consistency begets usability. Inconsistency creates obstacles. Consider good wayfinding: be clear and consistent with icons, text, colors, and typography to allow the audience to easily follow the system through a changing space. The consistent use of an icon with the word helps orient children, those who don’t speak the interface language, and those who are distracted.</li> <li class="designs"><strong>Choose copy and imagery with care.</strong><br>Welcome a broad range of people in your imagery and words, because representation matters. While you’re aiming for consistency, avoid sameness. Make sure illustrations, photos, and videos don’t favor one race, gender, age, weight, or other characteristic that will exclude many others.</li> <li class="designs"><strong>Make designs to be maintained, adapted, and to last.</strong><br>Inclusive design works to meet the customer needs, and to extend the lifecycle of customer satisfaction. Create your designs with maintenance, adaptation, and evolution in mind to limit the number of hurdles the audience will face. Creating applications with the option for automatic updates gives customers the ability to benefit from improvements without having to personally track the evolution of your product or experience potential outages along the way. In print and environmental design, choose durable materials that can stand up to time and use to avoid unnecessary costs and frustrations for your audience.</li> <li class="designs"><strong>Empower your audience.</strong><br>Good design empowers those who use it — it’s about your audience, not you. Whether that’s a client who wants a lasting brand suite or a customer building their small business online, our responsibility as designers is to help our audience meet their needs without ongoing input from us. A branding system that can be utilized by non-designers at a company achieves this. A website tool that the client can manage themselves without ongoing support also achieves this.</li> </ul> <p><a href="#top">Return to top ↑</a></p> </div> <hr class="wp-block-separator" /> <p><em>Created by </em><a href="https://www.ashleighaxios.com/"><em>Ashleigh Axios</em></a><em> while she was founding the Studio at Automattic.</em></p> </div> </div> <div class="section-inner"> </div> </article> </main> <div class="footer-wrapper"> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets grid-item"> <div class="widget widget_nav_menu"><div class="widget-content"><div class="menu-footer-menu-1-container"><ul id="menu-footer-menu-1" class="menu"><li id="menu-item-17656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17656"><a href="https://automattic.design/home/">Home</a></li> <li id="menu-item-15323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15323"><a href="https://automattic.design/blog/">Blog</a></li> <li id="menu-item-19213" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19213"><a href="https://automattic.design/team/">Team</a></li> <li id="menu-item-16645" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16645"><a href="https://automattic.design/projects/">Projects</a></li> <li id="menu-item-17969" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17969"><a href="https://automattic.design/jobs/">Jobs</a></li> <li id="menu-item-18903" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18903"><a href="https://automattic.design/design-hiring-faqs/">FAQ</a></li> </ul></div></div></div><div class="widget widget_nav_menu"><div class="widget-content"><div class="menu-footer-menu-2-container"><ul id="menu-footer-menu-2" class="menu"><li id="menu-item-15128" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15128"><a href="https://automattic.com/contact/">Contact Us</a></li> <li id="menu-item-15119" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15119"><a href="https://automattic.com/diversity-and-inclusion/">Diversity</a></li> <li id="menu-item-15120" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15120"><a href="https://automattic.com/press/">Press</a></li> <li id="menu-item-15121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15121"><a href="https://automattic.com/privacy/">Privacy Policy</a></li> <li id="menu-item-18901" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18901"><a href="https://automattic.com/how-we-work/">How We Work</a></li> </ul></div></div></div> </div> </aside> </div> </div> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-company-logo"> an<a href="https://automattic.com" class="imprint no-external-icon"><img src="https://s2.wp.com/wp-content/themes/a8c/a8cdesign/assets/svg/automattic.svg" alt="Automattic logo" /></a> mambo </p> <div class="footer-social-section"> <nav aria-label="Social links" class="footer-social-wrapper"> <ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color"> <li id="menu-item-16310" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16310"><a href="https://twitter.com/automatticdsgn"><span class="screen-reader-text">Follow us on Twitter</span><svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M3.28734 3.625H8.9617L12.9285 9.39811L17.895 3.625H20.2958L13.9946 10.9497L20.7127 20.7266H15.0383L10.8399 14.6166L5.58361 20.7266H3.18269L9.77394 13.0653L3.28734 3.625ZM6.63987 5.43759L16.0951 18.9623H17.348L7.89281 5.43759H6.63987Z" fill="#021A23" /></svg></a></li> <li id="menu-item-16619" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16619"><a href="https://www.instagram.com/automattic.design/"><span class="screen-reader-text">Follow us on Instagram</span><svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z" /><path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0-2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.25a1.25 1.25 0 0 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM12 4c-2.474 0-2.878.007-4.029.058-.784.037-1.31.142-1.798.332-.434.168-.747.369-1.08.703a2.89 2.89 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.006 9.075 4 9.461 4 12c0 2.474.007 2.878.058 4.029.037.783.142 1.31.331 1.797.17.435.37.748.702 1.08.337.336.65.537 1.08.703.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.474 0 2.878-.007 4.029-.058.782-.037 1.309-.142 1.797-.331.433-.169.748-.37 1.08-.702.337-.337.538-.65.704-1.08.19-.493.296-1.02.332-1.8.052-1.104.058-1.49.058-4.029 0-2.474-.007-2.878-.058-4.029-.037-.782-.142-1.31-.332-1.798a2.911 2.911 0 0 0-.703-1.08 2.884 2.884 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.925 4.006 14.539 4 12 4zm0-2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2z" /></svg></a></li> </ul> </nav> </div> </div> <div class="footer-copyright">© Automattic Inc., working on a better web since 2005. </div> </div> </footer> </div>  <script src="//0.gravatar.com/js/hovercards/hovercards.min.js?ver=2025087d8bf6c02970a26c6b0c26b0fcfc89796aa30f84307cffd8fd28d2bcca53dd7a" id="grofiles-cards-js"></script> <script id="wpgroho-js-extra"> var WPGroHo = {"my_hash":""}; </script> <script crossorigin='anonymous' type='text/javascript' src='https://s2.wp.com/wp-content/mu-plugins/gravatar-hovercards/wpgroho.js?m=1610363240i'></script> <script> // Initialize and attach hovercards to all gravatars ( function() { function init() { if ( typeof Gravatar === 'undefined' ) { return; } if ( typeof Gravatar.init !== 'function' ) { return; } Gravatar.profile_cb = function ( hash, id ) { WPGroHo.syncProfileData( hash, id ); }; Gravatar.my_hash = WPGroHo.my_hash; Gravatar.init( 'body', '#wp-admin-bar-my-account', { i18n: { 'Edit your profile →': 'Edit your profile →', 'View profile →': 'View profile →', 'Contact': 'Contact', 'Send money': 'Send money', 'Sorry, we are unable to load this Gravatar profile.': 'Sorry, we are unable to load this Gravatar profile.', 'Profile not found.': 'Profile not found.', 'Too Many Requests.': 'Too Many Requests.', 'Internal Server Error.': 'Internal Server Error.', }, } ); } if ( document.readyState !== 'loading' ) { init(); } else { document.addEventListener( 'DOMContentLoaded', init ); } } )(); </script> <div style="display:none"> </div> <div id="actionbar" dir="ltr" style="display: none;" class="actnbr-a8c-a8cdesign actnbr-has-follow actnbr-has-actions"> <ul> <li class="actnbr-btn actnbr-hidden"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> <div class="actnbr-popover tip tip-top-left actnbr-notice" id="follow-bubble"> <div class="tip-arrow"></div> <div class="tip-inner actnbr-follow-bubble"> <ul> <li class="actnbr-sitename"> <a href="https://automattic.design"> <img loading='lazy' alt='' src='https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=50' srcset='https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=50 1x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=75 1.5x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=100 2x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=150 3x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=200 4x' class='avatar avatar-50' height='50' width='50' /> Automattic Design </a> </li> <div class="actnbr-message no-display"></div> <form method="post" action="https://subscribe.wordpress.com" accept-charset="utf-8" style="display: none;"> <div class="actnbr-follow-count">Join 6,767 other subscribers</div> <div> <input type="email" name="email" placeholder="Enter your email address" class="actnbr-email-field" aria-label="Enter your email address" /> </div> <input type="hidden" name="action" value="subscribe" /> <input type="hidden" name="blog_id" value="182890486" /> <input type="hidden" name="source" value="https://automattic.design/inclusive/" /> <input type="hidden" name="sub-type" value="actionbar-follow" /> <input type="hidden" id="_wpnonce" name="_wpnonce" value="35c205fde9" /> <div class="actnbr-button-wrap"> <button type="submit" value="Sign me up"> Sign me up </button> </div> </form> <li class="actnbr-login-nudge"> <div> Already have a WordPress.com account? <a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fr-login.wordpress.com%2Fremote-login.php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fautomattic.design%252Finclusive%252F">Log in now.</a> </div> </li> </ul> </div> </div> </li> <li class="actnbr-ellipsis actnbr-hidden"> <svg class="gridicon gridicons-ellipsis" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M7 12c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2zm12-2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm-7 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"/></g></svg> <div class="actnbr-popover tip tip-top-left actnbr-more"> <div class="tip-arrow"></div> <div class="tip-inner"> <ul> <li class="actnbr-sitename"> <a href="https://automattic.design"> <img loading='lazy' alt='' src='https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=50' srcset='https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=50 1x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=75 1.5x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=100 2x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=150 3x, https://automattic.design/wp-content/uploads/2024/09/a8c-design-site-icon-2024.png?w=200 4x' class='avatar avatar-50' height='50' width='50' /> Automattic Design </a> </li> <li class="actnbr-folded-follow"> <a class="actnbr-action actnbr-actn-follow " href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path clip-rule="evenodd" d="m4 4.5h12v6.5h1.5v-6.5-1.5h-1.5-12-1.5v1.5 10.5c0 1.1046.89543 2 2 2h7v-1.5h-7c-.27614 0-.5-.2239-.5-.5zm10.5 2h-9v1.5h9zm-5 3h-4v1.5h4zm3.5 1.5h-1v1h1zm-1-1.5h-1.5v1.5 1 1.5h1.5 1 1.5v-1.5-1-1.5h-1.5zm-2.5 2.5h-4v1.5h4zm6.5 1.25h1.5v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25z" fill-rule="evenodd"></path></svg> <span>Subscribe</span> </a> <a class="actnbr-action actnbr-actn-following no-display" href=""> <svg class="gridicon" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 4.5H4V15C4 15.2761 4.22386 15.5 4.5 15.5H11.5V17H4.5C3.39543 17 2.5 16.1046 2.5 15V4.5V3H4H16H17.5V4.5V12.5H16V4.5ZM5.5 6.5H14.5V8H5.5V6.5ZM5.5 9.5H9.5V11H5.5V9.5ZM12 11H13V12H12V11ZM10.5 9.5H12H13H14.5V11V12V13.5H13H12H10.5V12V11V9.5ZM5.5 12H9.5V13.5H5.5V12Z" fill="#008A20"></path><path class="following-icon-tick" d="M13.5 16L15.5 18L19 14.5" stroke="#008A20" stroke-width="1.5"></path></svg> <span>Subscribed</span> </a> </li> <li class="actnbr-signup"><a href="https://wordpress.com/start/">Sign up</a></li> <li class="actnbr-login"><a href="https://wordpress.com/log-in?redirect_to=https%3A%2F%2Fr-login.wordpress.com%2Fremote-login.php%3Faction%3Dlink%26back%3Dhttps%253A%252F%252Fautomattic.design%252Finclusive%252F">Log in</a></li> <li class="actnbr-shortlink"> <a href="https://wp.me/Pcnoay-3Gg"> <span class="actnbr-shortlink__text">Copy shortlink</span> <span class="actnbr-shortlink__icon"><svg class="gridicon gridicons-checkmark" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M9 19.414l-6.707-6.707 1.414-1.414L9 16.586 20.293 5.293l1.414 1.414"/></g></svg></span> </a> </li> <li class="flb-report"> <a href="https://wordpress.com/abuse/?report_url=https://automattic.design/inclusive/" target="_blank" rel="noopener noreferrer"> Report this content </a> </li> <li class="actnbr-reader"> <a href="https://wordpress.com/reader/blogs/182890486/posts/14152"> View post in Reader </a> </li> <li class="actnbr-subs"> <a href="https://subscribe.wordpress.com/">Manage subscriptions</a> </li> <li class="actnbr-fold"><a href="">Collapse this bar</a></li> </ul> </div> </div> </li> </ul> </div> <script> window.addEventListener( "load", function( event ) { var link = document.createElement( "link" ); link.href = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.css?v=20250116"; link.type = "text/css"; link.rel = "stylesheet"; document.head.appendChild( link ); var script = document.createElement( "script" ); script.src = "https://s0.wp.com/wp-content/mu-plugins/actionbar/actionbar.js?v=20250204"; script.defer = true; document.body.appendChild( script ); } ); </script> <script id="custom-content-types-data-js-before"> var CUSTOM_CONTENT_TYPE__INITIAL_STATE; typeof CUSTOM_CONTENT_TYPE__INITIAL_STATE === "object" || (CUSTOM_CONTENT_TYPE__INITIAL_STATE = JSON.parse(decodeURIComponent("%7B%22active%22%3Atrue%2C%22over_ride%22%3Afalse%7D"))); </script> <script crossorigin='anonymous' type='text/javascript' src='https://s1.wp.com/wp-content/js/mobile-useragent-info.js?m=1609849039i'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script type="text/javascript"> (function () { var wpcom_reblog = { source: 'toolbar', toggle_reblog_box_flair: function (obj_id, post_id) { // Go to site selector. This will redirect to their blog if they only have one. const postEndpoint = `https://wordpress.com/post`; // Ideally we would use the permalink here, but fortunately this will be replaced with the // post permalink in the editor. const originalURL = `${ document.location.href }?page_id=${ post_id }`; const url = postEndpoint + '?url=' + encodeURIComponent( originalURL ) + '&is_post_share=true' + '&v=5'; const redirect = function () { if ( ! window.open( url, '_blank' ) ) { location.href = url; } }; if ( /Firefox/.test( navigator.userAgent ) ) { setTimeout( redirect, 0 ); } else { redirect(); } }, }; window.wpcom_reblog = wpcom_reblog; })(); </script> <script src="//stats.wp.com/w.js?68" defer></script> <script type="text/javascript"> _tkq = window._tkq || []; _stq = window._stq || []; _tkq.push(['storeContext', {'blog_id':'182890486','blog_tz':'-7','user_lang':'en','blog_lang':'en','user_id':'0'}]); _stq.push(['view', {'blog':'182890486','v':'wpcom','tz':'-7','user_id':'0','post':'14152','subd':'a8cdesignsimple'}]); _stq.push(['extra', {'crypt':'UE40eW5QN0p8M2Y/RE1lSiYrZXhzUkM5fD1uTDNLUGt6QzVbd3FKb3Q4aWxfXXI3YWo4Qz1OQTklbU5iaFcmUVFuNjY9c2xqOUdMWmdBL19wOGp1T3xISjRRdT1tTj0xUG4vS0p4Y3xOZ2JRWVpORElfYStiTUFoMXVQa2dsTi1VLVlJfjBhUENGW3pOeS1oK19tdkhERXRLdlF1VSZbY3RLYWdLUmJDUFpVdmF1UEMlNnxESXxFTi42Qj1CTVl3UFZ+ZkxXQ3dPLEhQMDNGLE9YS3B3TmtEa3c4VjFJaHJTeXRJTmlfLUlEQX41K0UyRF9daXNhYXJDNHk4SGh4ZXFvYy9GdT8ueXBSP0l1ZnQvejYtM3gtZHVpNDdWSy5KUSw3TFZQVWlkd000d0laPUFlVDdm'}]); _stq.push([ 'clickTrackerInit', '182890486', '14152' ]); </script> <noscript><img src="https://pixel.wp.com/b.gif?v=noscript" style="height:1px;width:1px;overflow:hidden;position:absolute;bottom:1px;" alt="" /></noscript> <script defer id="bilmur" data-customproperties="{"logged_in":"0","wptheme":"a8c\/a8cdesign","wptheme_is_block":"0"}" data-provider="wordpress.com" data-service="simple" src="/wp-content/js/bilmur-3-4-combined.min.js?i=12&m=202508"></script><script> ( function() { function getMobileUserAgentInfo() { if ( typeof wpcom_mobile_user_agent_info === 'object' ) { wpcom_mobile_user_agent_info.init(); var mobileStatsQueryString = ''; if ( wpcom_mobile_user_agent_info.matchedPlatformName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_platforms' + '=' + wpcom_mobile_user_agent_info.matchedPlatformName; } if ( wpcom_mobile_user_agent_info.matchedUserAgentName !== false ) { mobileStatsQueryString += '&x_' + 'mobile_devices' + '=' + wpcom_mobile_user_agent_info.matchedUserAgentName; } if ( wpcom_mobile_user_agent_info.isIPad() ) { mobileStatsQueryString += '&x_' + 'ipad_views' + '=' + 'views'; } if ( mobileStatsQueryString != '' ) { new Image().src = document.location.protocol + '//pixel.wp.com/g.gif?v=wpcom-no-pv' + mobileStatsQueryString + '&baba=' + Math.random(); } } } document.addEventListener( 'DOMContentLoaded', getMobileUserAgentInfo ); } )(); </script> </body> </html>