CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="icon" href="/images/favicon.ico"/><link rel="alternate" type="application/rss+xml" title="Spotify for Developers Blog" href="/rss.xml"/><title>Accessibility Guidelines | Spotify for Developers</title><meta name="next-head-count" content="5"/><link rel="preload" href="https://developer-assets.spotifycdn.com/_next/static/css/9668fa80a2943966.css" as="style"/><link rel="stylesheet" href="https://developer-assets.spotifycdn.com/_next/static/css/9668fa80a2943966.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="https://developer-assets.spotifycdn.com/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/webpack-b6a64a5ff80d96a0.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/framework-4b7b274cafa97250.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/main-76363c4b27927290.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/pages/_app-5977e408e2327488.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/80efaec8-8d0918fc728c994a.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/155-075e14da7ba19163.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/7178-ca0697e34912bdef.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/8685-3147d7609c0acbea.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/chunks/pages/documentation/%5B...mdx%5D-125f964337abde50.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/k7S4T2NbEJa5-IWq8XogG/_buildManifest.js" defer=""></script><script src="https://developer-assets.spotifycdn.com/_next/static/k7S4T2NbEJa5-IWq8XogG/_ssgManifest.js" defer=""></script><style data-styled="" data-styled-version="5.3.9">body{overflow-y:visible;}/*!sc*/ data-styled.g1[id="sc-global-gQDQsF1"]{content:"sc-global-gQDQsF1,"}/*!sc*/ .dYwJAo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;min-height:100vh;min-height:100dvh;}/*!sc*/ data-styled.g2[id="sc-70f368a6-0"]{content:"dYwJAo,"}/*!sc*/ .ifAlMH{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;overflow-x:hidden;}/*!sc*/ data-styled.g3[id="sc-ae97880a-0"]{content:"ifAlMH,"}/*!sc*/ .AXGli{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}/*!sc*/ data-styled.g4[id="sc-7ead898e-0"]{content:"AXGli,"}/*!sc*/ .hWSKsH{box-sizing:border-box;-webkit-tap-highlight-color:transparent;padding-inline:0;margin-block:0;overflow-wrap:break-word;list-style-type:none;}/*!sc*/ .hrsDVQ{box-sizing:border-box;-webkit-tap-highlight-color:transparent;padding-inline:32px 0;margin-block:0;overflow-wrap:break-word;}/*!sc*/ data-styled.g5[id="TypeList__TypeListElement-sc-1jhixr6-0"]{content:"hWSKsH,hrsDVQ,"}/*!sc*/ .ceft{fill:currentcolor;width:var(--encore-graphic-size-decorative-smaller,16px);height:var(--encore-graphic-size-decorative-smaller,16px);}/*!sc*/ .ceft *{vector-effect:non-scaling-stroke;}/*!sc*/ [dir='rtl'] .ceft.ceft{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);}/*!sc*/ .dcaYNJ{fill:currentcolor;width:var(--encore-graphic-size-decorative-smaller,16px);height:var(--encore-graphic-size-decorative-smaller,16px);}/*!sc*/ .dcaYNJ *{vector-effect:non-scaling-stroke;}/*!sc*/ .eGOOvu{fill:var(--decorative-base,#000000);width:var(--encore-graphic-size-decorative-smaller-2,12px);height:var(--encore-graphic-size-decorative-smaller-2,12px);}/*!sc*/ .eGOOvu *{vector-effect:non-scaling-stroke;}/*!sc*/ .cqHNwh{fill:currentcolor;width:var(--encore-graphic-size-informative-base,24px);height:var(--encore-graphic-size-informative-base,24px);}/*!sc*/ .cqHNwh *{vector-effect:non-scaling-stroke;}/*!sc*/ data-styled.g10[id="Svg-sc-ytk21e-0"]{content:"ceft,dcaYNJ,eGOOvu,cqHNwh,"}/*!sc*/ .eHnYHF{position:absolute;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;inset-inline-start:0;display:inline-block;background-color:var(--background-base,#ffffff);padding-block:var(--encore-spacing-base,16px) 24px;padding-inline:var(--encore-spacing-base,16px);-webkit-text-decoration:none;text-decoration:none;z-index:9999;}/*!sc*/ .eHnYHF:focus{outline:none;}/*!sc*/ .eHnYHF:not(:focus){border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}/*!sc*/ data-styled.g14[id="Link-sc-1rnxmqt-0"]{content:"eHnYHF,"}/*!sc*/ .cXqsMl{box-sizing:border-box;-webkit-tap-highlight-color:transparent;color:var(--text-base,#000000);border-color:var(--essential-base,#000000);-webkit-transition:color 200ms ease-in;transition:color 200ms ease-in;overflow-wrap:break-word;}/*!sc*/ .cXqsMl::after{display:block;position:absolute;pointer-events:none;-webkit-transition:border-color 200ms ease-in;transition:border-color 200ms ease-in;box-sizing:border-box;bottom:-6px;border-bottom:3px solid transparent;width:100%;content:'';position:relative;border-color:inherit;}/*!sc*/ data-styled.g15[id="LinkText-sc-3xixkl-0"]{content:"cXqsMl,"}/*!sc*/ .huwcwr{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:1.125rem;font-weight:700;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));color:inherit;}/*!sc*/ .eyOwjh{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:1rem;font-weight:400;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));color:var(--text-subdued,#656565);}/*!sc*/ .jFxTq{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:0.875rem;font-weight:700;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));color:inherit;}/*!sc*/ .kqItdM{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:1rem;font-weight:400;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));color:inherit;}/*!sc*/ .cMheqG{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:2rem;font-weight:700;font-family:var(--encore-title-font-stack,var(--fallback-fonts,sans-serif));color:inherit;}/*!sc*/ @media (min-width:768px){.cMheqG{font-size:3rem;}}/*!sc*/ .ckCbjl{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:1rem;font-weight:400;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));padding-block-end:12px;color:inherit;}/*!sc*/ .bXWpix{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin-block:0;font-size:0.875rem;font-weight:400;font-family:var(--encore-body-font-stack,var(--fallback-fonts,sans-serif));color:inherit;}/*!sc*/ data-styled.g22[id="Type__TypeElement-sc-goli3j-0"]{content:"huwcwr,eyOwjh,jFxTq,kqItdM,cMheqG,ckCbjl,bXWpix,"}/*!sc*/ .kqbyZR{display:list-item;padding-block-end:1em;}/*!sc*/ data-styled.g27[id="TypeListItem__TypeListItemElement-sc-q1l2mf-0"]{content:"kqbyZR,"}/*!sc*/ .buKKye{box-sizing:border-box;-webkit-tap-highlight-color:transparent;color:inherit;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;color:var(--text-subdued,#656565);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .buKKye[href],.buKKye:hover:not([disabled]){-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .buKKye[href]:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--text-bright-accent,#107434);}/*!sc*/ .buKKye[href]:focus{outline:none;box-shadow:0 3px 0 0;-webkit-transition:box-shadow 200ms ease-in;transition:box-shadow 200ms ease-in;}/*!sc*/ .buKKye[href]:focus.Link-sc-k8gsk-0[href]:focus{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .buKKye[href]:active{color:var(--text-bright-accent,#107434);}/*!sc*/ .buKKye[disabled],.buKKye[href][disabled],.buKKye[aria-disabled='true']{color:var(--text-subdued,#656565);opacity:0.3;cursor:not-allowed;}/*!sc*/ .buKKye,.buKKye[href]{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .buKKye[href]:focus{-webkit-text-decoration:none;text-decoration:none;color:var(--text-base,#000000);}/*!sc*/ .buKKye[href]:active{-webkit-text-decoration:underline;text-decoration:underline;color:var(--text-base,#000000);}/*!sc*/ .buKKye[href]:hover,.buKKye[href]:hover:focus{-webkit-text-decoration:underline;text-decoration:underline;color:var(--text-subdued,#656565);}/*!sc*/ .buKKye[disabled],.buKKye[href][disabled],.buKKye[aria-disabled='true']{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .flYERd{box-sizing:border-box;-webkit-tap-highlight-color:transparent;color:var(--text-positive,#107434);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .flYERd[href],.flYERd:hover:not([disabled]){-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .flYERd[href]:hover{-webkit-text-decoration:underline;text-decoration:underline;color:var(--text-positive,#107434);}/*!sc*/ .flYERd[href]:focus{outline:none;box-shadow:0 3px 0 0;-webkit-transition:box-shadow 200ms ease-in;transition:box-shadow 200ms ease-in;}/*!sc*/ .flYERd[href]:focus.Link-sc-k8gsk-0[href]:focus{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .flYERd[href]:active{color:var(--text-bright-accent,#107434);}/*!sc*/ .flYERd[disabled],.flYERd[href][disabled],.flYERd[aria-disabled='true']{color:var(--text-subdued,#656565);opacity:0.3;cursor:not-allowed;}/*!sc*/ data-styled.g30[id="Link-sc-k8gsk-0"]{content:"buKKye,flYERd,"}/*!sc*/ .kkzaBr{box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;border:0;border-radius:var(--encore-button-corner-radius,9999px);cursor:pointer;display:inline-block;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:none;touch-action:manipulation;-webkit-transition-duration:33ms;transition-duration:33ms;-webkit-transition-property:background-color,border-color,color,box-shadow,filter,-webkit-transform;-webkit-transition-property:background-color,border-color,color,box-shadow,filter,transform;transition-property:background-color,border-color,color,box-shadow,filter,transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0);color:var(--text-base,#000000);min-inline-size:0;min-block-size:var(--encore-control-size-base,48px);padding-block:var(--encore-spacing-tighter,12px);padding-inline:var(--encore-spacing-tighter,12px);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;}/*!sc*/ .kkzaBr:focus{outline:none;}/*!sc*/ @supports (overflow-wrap:anywhere){.kkzaBr{overflow-wrap:anywhere;}}/*!sc*/ @supports not (overflow-wrap:anywhere){.kkzaBr{word-break:break-word;}}/*!sc*/ .kkzaBr:hover{-webkit-transform:scale(1.04);-ms-transform:scale(1.04);transform:scale(1.04);}/*!sc*/ .kkzaBr:active{opacity:0.7;outline:none;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);color:var(--text-base,#000000);}/*!sc*/ .kkzaBr:focus{outline:none;}/*!sc*/ .kkzaBr::after{content:'';display:block;position:absolute;pointer-events:none;-webkit-transition:border-color 200ms ease-in;transition:border-color 200ms ease-in;box-sizing:border-box;bottom:5px;border-bottom:3px solid transparent;width:100%;}/*!sc*/ .kkzaBr:focus::after{border-color:inherit;}/*!sc*/ .kkzaBr::after{inline-size:24px;}/*!sc*/ .kkzaBr[disabled],.kkzaBr[aria-disabled='true'],fieldset[disabled] .kkzaBr{cursor:not-allowed;opacity:0.3;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);color:var(--text-base,#000000);}/*!sc*/ .kkzaBr[disabled]::before,.kkzaBr[aria-disabled='true']::before,fieldset[disabled] .kkzaBr::before{background-color:transparent;}/*!sc*/ .kkzaBr[disabled]::after,.kkzaBr[aria-disabled='true']::after,fieldset[disabled] .kkzaBr::after{border-color:transparent;}/*!sc*/ data-styled.g33[id="Button-sc-1dqy6lx-0"]{content:"kkzaBr,"}/*!sc*/ .jyHIqB{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ data-styled.g34[id="IconWrapper__Wrapper-sc-16usrgb-0"]{content:"jyHIqB,"}/*!sc*/ .iIXgup{padding-block:var(--encore-spacing-tighter-5,2px);-webkit-flex:1;-ms-flex:1;flex:1;}/*!sc*/ data-styled.g37[id="Message-sc-15vkh7g-0"]{content:"iIXgup,"}/*!sc*/ .gZFOmH{box-sizing:border-box;-webkit-tap-highlight-color:transparent;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--background-tinted-base,rgba(0,0,0,0.08));color:var(--text-base,#000000);padding-block:var(--encore-spacing-tighter,12px);padding-inline:var(--encore-spacing-base,16px);gap:var(--encore-spacing-base,16px);-webkit-transition:background 100ms;transition:background 100ms;}/*!sc*/ data-styled.g38[id="Wrapper-sc-62m9tu-0"]{content:"gZFOmH,"}/*!sc*/ .hQQTps{max-inline-size:100%;-webkit-block-size:auto;-ms-flex-block-size:auto;block-size:auto;}/*!sc*/ data-styled.g52[id="Image-sc-1u215sg-3"]{content:"hQQTps,"}/*!sc*/ .kdFSxQ{border:0;-webkit-clip:rect(0,0,0,0);clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}/*!sc*/ data-styled.g69[id="VisuallyHidden__VisuallyHiddenElement-sc-17bibe8-0"]{content:"kdFSxQ,"}/*!sc*/ *{box-sizing:border-box;}/*!sc*/ *::before,*::after{box-sizing:border-box;}/*!sc*/ body{margin:0;}/*!sc*/ body,input,textarea,button{font-family:var(--encore-body-font-stack);}/*!sc*/ html,body{height:100%;}/*!sc*/ data-styled.g144[id="sc-global-cnFbJs1"]{content:"sc-global-cnFbJs1,"}/*!sc*/ .iTMyfH{box-sizing:border-box;-webkit-tap-highlight-color:transparent;list-style-type:none;}/*!sc*/ data-styled.g149[id="ListItem__ListItemElement-sc-14osqn3-0"]{content:"iTMyfH,"}/*!sc*/ @media screen and (max-width:991px){.dPqbzU{background-color:var(--background-base,#ffffff);position:fixed;left:0;top:64px;bottom:0;padding:0;width:100vw;overflow-y:auto;z-index:1030;}.dPqbzU.panel-enter{left:100vw;}.dPqbzU.panel-enter-active{left:0;-webkit-transition-property:left;transition-property:left;}.dPqbzU.panel-exit{display:block;opacity:1;}.dPqbzU.panel-exit-active{display:block;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;}}/*!sc*/ @media not (prefers-reduced-motion){.dPqbzU{-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:cubic-bezier(0.3,0,0,1);transition-timing-function:cubic-bezier(0.3,0,0,1);}}/*!sc*/ data-styled.g248[id="sc-9fff6009-0"]{content:"dPqbzU,"}/*!sc*/ @media screen and (min-width:992px){.ljywHx{position:absolute;left:50%;top:calc(100% - 3px);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top;white-space:nowrap;z-index:1030;background-color:var(--background-base,#ffffff);border-radius:8px;box-shadow:0px 6px 18px rgba(0,0,0,0.2);padding:32px 40px 32px 64px;}.ljywHx.panel-enter{opacity:0;-webkit-transform:translateX(-50%) rotateX(-10deg);-ms-transform:translateX(-50%) rotateX(-10deg);transform:translateX(-50%) rotateX(-10deg);}.ljywHx.panel-enter-active{opacity:1;-webkit-transform:translateX(-50%) rotateX(0deg);-ms-transform:translateX(-50%) rotateX(0deg);transform:translateX(-50%) rotateX(0deg);-webkit-transition-property:-webkit-transform,opacity;-webkit-transition-property:transform,opacity;transition-property:transform,opacity;}.ljywHx.panel-exit{display:block;opacity:1;-webkit-transform:translateX(-50%) rotateX(0deg);-ms-transform:translateX(-50%) rotateX(0deg);transform:translateX(-50%) rotateX(0deg);}.ljywHx.panel-exit-active{display:block;opacity:0;-webkit-transform:translateX(-50%) rotateX(-10deg);-ms-transform:translateX(-50%) rotateX(-10deg);transform:translateX(-50%) rotateX(-10deg);-webkit-transition-property:-webkit-transform,opacity;-webkit-transition-property:transform,opacity;transition-property:transform,opacity;}}/*!sc*/ data-styled.g249[id="sc-147783a9-0"]{content:"ljywHx,"}/*!sc*/ .jYFMfm{width:32px;height:32px;}/*!sc*/ .jYFMfm path{-webkit-transition:all 500ms;transition:all 500ms;-webkit-transition-timing-function:cubic-bezier(0.3,0,0,1);transition-timing-function:cubic-bezier(0.3,0,0,1);}/*!sc*/ @media (prefers-reduced-motion){.jYFMfm path{-webkit-transition:none;transition:none;}}/*!sc*/ .jYFMfm path:nth-child(1){-webkit-transform-origin:3.5px 8px;-ms-transform-origin:3.5px 8px;transform-origin:3.5px 8px;-webkit-transform:rotate( 0deg );-ms-transform:rotate( 0deg );transform:rotate( 0deg );}/*!sc*/ .jYFMfm path:nth-child(2){opacity:1;}/*!sc*/ .jYFMfm path:nth-child(3){-webkit-transform-origin:3.5px 16px;-ms-transform-origin:3.5px 16px;transform-origin:3.5px 16px;-webkit-transform:rotate( 0deg );-ms-transform:rotate( 0deg );transform:rotate( 0deg );}/*!sc*/ data-styled.g250[id="sc-bbfbffd5-0"]{content:"jYFMfm,"}/*!sc*/ .kMlpAI{--background-base:#e91429 !important;--background-highlight:#d81326 !important;--background-press:#a60e1d !important;--background-elevated-base:#d81326 !important;--background-elevated-highlight:#d81326 !important;--background-elevated-press:#a60e1d !important;--background-tinted-base:#e91429 !important;--background-tinted-highlight:#e91429 !important;--background-tinted-press:#e91429 !important;--text-base:#ffffff !important;--text-subdued:#ffffff !important;--text-bright-accent:#ffffff !important;--text-negative:#ffffff !important;--text-warning:#ffffff !important;--text-positive:#ffffff !important;--text-announcement:#ffffff !important;--essential-base:#ffffff !important;--essential-subdued:#ffffff !important;--essential-bright-accent:#ffffff !important;--essential-negative:#ffffff !important;--essential-warning:#ffffff !important;--essential-positive:#ffffff !important;--essential-announcement:#ffffff !important;--decorative-base:#ffffff !important;--decorative-subdued:#ee3a4c !important;display:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:1.5rem;height:1.5rem;font-size:0.75rem;margin-left:12px;color:var(--text-base,#000000);background-color:var(--background-base,#ffffff);border-radius:100%;}/*!sc*/ data-styled.g251[id="sc-854fa934-0"]{content:"kMlpAI,"}/*!sc*/ .kUBZjS{position:absolute;pointer-events:none;top:0.5rem;right:0.5rem;}/*!sc*/ data-styled.g252[id="sc-c6c8ec75-0"]{content:"kUBZjS,"}/*!sc*/ @media screen and (min-width:992px){.cgDIHL.cgDIHL{display:none;}}/*!sc*/ data-styled.g253[id="sc-960b9084-0"]{content:"cgDIHL,"}/*!sc*/ @media screen and (max-width:991px){.hINOnu.hINOnu{display:none;}}/*!sc*/ data-styled.g254[id="sc-61e0ff0f-0"]{content:"hINOnu,"}/*!sc*/ .cKvXqF{border-radius:0;outline:transparent solid 3px;outline-offset:-3px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;background:none;border:none;color:var(--text-base,#000000);cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:12px 24px;width:100%;}/*!sc*/ .cKvXqF:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.cKvXqF{outline:transparent solid 1.5px;outline-offset:-2px;}.cKvXqF:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ data-styled.g255[id="sc-226e2e15-0"]{content:"cKvXqF,"}/*!sc*/ .fZekVo{border-radius:12px;outline:transparent solid 3px;outline-offset:6px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;color:var(--text-base,#000000);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .fZekVo:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.fZekVo{outline:transparent solid 1.5px;outline-offset:4px;}.fZekVo:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ .fZekVo > span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;}/*!sc*/ .fZekVo:hover,.fZekVo:focus{color:var(--text-positive,#107434);}/*!sc*/ @media screen and (max-width:991px){.fZekVo{border-radius:0;outline:transparent solid 3px;outline-offset:-3px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;padding:12px 24px;}.fZekVo:focus-visible{outline-color:var(--essential-base,#000000);}@supports not selector(:focus-visible){.fZekVo{outline:transparent solid 1.5px;outline-offset:-2px;}.fZekVo:focus{outline-color:var(--essential-base,#000000);}}}/*!sc*/ data-styled.g256[id="sc-57f92064-0"]{content:"fZekVo,"}/*!sc*/ @media screen and (min-width:992px){.bfMHgv.bfMHgv{display:none;}}/*!sc*/ data-styled.g257[id="sc-57f92064-1"]{content:"bfMHgv,"}/*!sc*/ @media screen and (min-width:992px){.daFODJ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:12px;}}/*!sc*/ data-styled.g258[id="sc-e3bdb244-0"]{content:"daFODJ,"}/*!sc*/ .fngAVZ{position:relative;}/*!sc*/ @media screen and (min-width:992px){.fngAVZ{-webkit-perspective:999px;-moz-perspective:999px;-ms-perspective:999px;perspective:999px;}}/*!sc*/ data-styled.g259[id="sc-daaf2fce-0"]{content:"fngAVZ,"}/*!sc*/ .ggRfAl{background:none;border:0;color:var(--text-base,#000000);cursor:pointer;-webkit-text-decoration:none;text-decoration:none;font-size:1.33rem;}/*!sc*/ @media screen and (max-width:991px){.ggRfAl{border-radius:0;outline:transparent solid 3px;outline-offset:-3px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;background-color:var(--background-highlight,#f5f5f5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:2px 0;padding:12px 24px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%;}.ggRfAl:focus-visible{outline-color:var(--essential-base,#000000);}@supports not selector(:focus-visible){.ggRfAl{outline:transparent solid 1.5px;outline-offset:-2px;}.ggRfAl:focus{outline-color:var(--essential-base,#000000);}}}/*!sc*/ @media screen and (min-width:992px){.ggRfAl{border-radius:28px;outline:transparent solid 3px;outline-offset:6px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;display:inline-block;padding:8px 16px;-webkit-transition:0.2s color linear,0.2s outline-color ease-in;transition:0.2s color linear,0.2s outline-color ease-in;white-space:nowrap;}.ggRfAl:focus-visible{outline-color:var(--essential-base,#000000);}@supports not selector(:focus-visible){.ggRfAl{outline:transparent solid 1.5px;outline-offset:4px;}.ggRfAl:focus{outline-color:var(--essential-base,#000000);}}.ggRfAl:hover{color:var(--text-bright-accent,#107434);}.ggRfAl[data-active]{color:var(--text-bright-accent,#107434);font-weight:700;}.ggRfAl[data-active]::after{content:'';display:block;border-top:2px solid var(--text-bright-accent,#107434);width:1em;position:absolute;bottom:0px;left:calc(50% - 0.5em);}}/*!sc*/ data-styled.g260[id="sc-a671ab29-0"]{content:"ggRfAl,"}/*!sc*/ @media screen and (min-width:992px){.iIHRIb.iIHRIb{display:none;}}/*!sc*/ data-styled.g261[id="sc-a671ab29-1"]{content:"iIHRIb,"}/*!sc*/ .dKipnq{border-radius:0;outline:transparent solid 3px;outline-offset:-3px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;background-color:var(--background-highlight,#f5f5f5);border:none;color:var(--text-base,#000000);cursor:pointer;margin-bottom:12px;padding:12px 24px;width:100%;}/*!sc*/ .dKipnq:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.dKipnq{outline:transparent solid 1.5px;outline-offset:-2px;}.dKipnq:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ data-styled.g262[id="sc-1a8d3606-0"]{content:"dKipnq,"}/*!sc*/ @media screen and (min-width:992px){.jzFsff.jzFsff{display:none;}}/*!sc*/ data-styled.g263[id="sc-a8ce54c5-0"]{content:"jzFsff,"}/*!sc*/ @media screen and (min-width:992px){.kRyiQK{--background-base:#FFFFFF !important;--background-highlight:#40007312 !important;--background-press:#FFFFFF !important;--background-elevated-base:#400073 !important;--background-elevated-highlight:#FFFFFF !important;--background-elevated-press:#FFFFFF !important;--background-tinted-base:#40007314 !important;--background-tinted-highlight:#DACFE6 !important;--background-tinted-press:#FFFFFF !important;--decorative-base:#400073 !important;--decorative-subdued:#bdb1cb !important;--essential-base:#000000 !important;--essential-subdued:#D7DBFF !important;--essential-bright-accent:#CDF56466 !important;--essential-negative:#000000 !important;--essential-warning:#000000 !important;--essential-positive:#000000 !important;--essential-announcement:#000000 !important;--text-base:#181818 !important;--text-subdued:#282828 !important;--text-bright-accent:#400073 !important;--text-negative:#000000 !important;--text-warning:#000000 !important;--text-positive:#8C20DF !important;--text-announcement:#000000 !important;display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));-webkit-column-gap:32px;column-gap:32px;row-gap:16px;}}/*!sc*/ data-styled.g264[id="sc-ca6f2bb9-0"]{content:"kRyiQK,"}/*!sc*/ .yjgPF{display:block;margin:12px 0;text-transform:uppercase;}/*!sc*/ @media screen and (max-width:991px){.yjgPF{margin:12px 24px;}}/*!sc*/ @media screen and (min-width:992px){.yjgPF{margin-left:4px;}.sc-147783a9-0 .sc-45697e4e-0:first-of-type{margin:0 0 20px;}.sc-147783a9-0 .sc-45697e4e-0:not(:first-of-type){border-top:1px solid var(--decorative-subdued,#dedede);margin:20px 0;padding-top:16px;}}/*!sc*/ data-styled.g265[id="sc-45697e4e-0"]{content:"yjgPF,"}/*!sc*/ .fyfvvy{display:inline-block;border-radius:17px;outline:transparent solid 3px;outline-offset:6px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;}/*!sc*/ .fyfvvy:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.fyfvvy{outline:transparent solid 1.5px;outline-offset:4px;}.fyfvvy:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ .fyfvvy svg{fill:var(--text-base,#000000);max-width:100%;vertical-align:middle;}/*!sc*/ .iUCAkX{display:inline-block;border-radius:17px;outline:transparent solid 3px;outline-offset:6px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;width:192px;}/*!sc*/ .iUCAkX:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.iUCAkX{outline:transparent solid 1.5px;outline-offset:4px;}.iUCAkX:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ .iUCAkX svg{fill:var(--text-base,#000000);max-width:100%;vertical-align:middle;}/*!sc*/ data-styled.g266[id="sc-539db49-0"]{content:"fyfvvy,iUCAkX,"}/*!sc*/ .fdpdGa{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;}/*!sc*/ data-styled.g267[id="sc-7eae9c62-0"]{content:"fdpdGa,"}/*!sc*/ .byLwnG{background-color:var(--background-base,#ffffff);color:var(--text-subdued,#656565);padding:56px 6vw 56px;justify-self:end;}/*!sc*/ @media (max-width:991px){.byLwnG{padding:24px 6vw 48px;}}/*!sc*/ data-styled.g268[id="sc-79176060-0"]{content:"byLwnG,"}/*!sc*/ .dPgCwV{display:grid;grid-template-columns:repeat(6,auto);-webkit-column-gap:12px;column-gap:12px;row-gap:24px;max-width:1200px;}/*!sc*/ @media (max-width:991px){.dPgCwV{grid-template-columns:repeat(2,auto);}}/*!sc*/ data-styled.g269[id="sc-79176060-1"]{content:"dPgCwV,"}/*!sc*/ .gpumOS{grid-column:span 2;}/*!sc*/ data-styled.g270[id="sc-79176060-2"]{content:"gpumOS,"}/*!sc*/ .fBSVgz > h3{margin:8px 0 16px;text-transform:uppercase;}/*!sc*/ @media (max-width:991px){.fBSVgz:first-of-type{grid-row:span 2;}}/*!sc*/ data-styled.g271[id="sc-79176060-3"]{content:"fBSVgz,"}/*!sc*/ .ckOHVi{color:var(--text-base,#000000);}/*!sc*/ data-styled.g272[id="sc-79176060-4"]{content:"ckOHVi,"}/*!sc*/ .dgothR{margin-top:56px;text-align:right;}/*!sc*/ .dgothR > *:not(:first-child){margin-left:20px;}/*!sc*/ data-styled.g273[id="sc-79176060-5"]{content:"dgothR,"}/*!sc*/ html{-webkit-scroll-padding-top:calc(72px + 8px);-moz-scroll-padding-top:calc(72px + 8px);-ms-scroll-padding-top:calc(72px + 8px);scroll-padding-top:calc(72px + 8px);}/*!sc*/ @media screen and (max-width:991px){html{-webkit-scroll-padding-top:calc(64px + 8px);-moz-scroll-padding-top:calc(64px + 8px);-ms-scroll-padding-top:calc(64px + 8px);scroll-padding-top:calc(64px + 8px);}}/*!sc*/ data-styled.g280[id="sc-global-eXqpKN1"]{content:"sc-global-eXqpKN1,"}/*!sc*/ .eaUSlL{--background-base:#1E073C !important;--background-highlight:#290A50 !important;--background-press:#07020E !important;--background-elevated-base:#400073 !important;--background-elevated-highlight:#8C20DF !important;--background-elevated-press:#3C0068 !important;--background-tinted-base:#0F041D !important;--background-tinted-highlight:#551E99 !important;--background-tinted-press:#A269CF !important;--text-base:#FFFFFF !important;--text-subdued:#D8A3FF !important;--text-bright-accent:#CBF55C !important;--text-negative:#FFFFFF !important;--text-warning:#FFFFFF !important;--text-positive:#FFFFFF !important;--text-announcement:#FFFFFF !important;--decorative-base:#FFFFFF !important;--decorative-subdued:#5C13B5 !important;--essential-base:#CBF55C !important;--essential-subdued:#738A36 !important;--essential-bright-accent:#FFFFFF !important;--essential-negative:#FFFFFF !important;--essential-warning:#FFFFFF !important;--essential-positive:#FFFFFF !important;--essential-announcement:#FFFFFF !important;color:var(--text-base,#000000);position:-webkit-sticky;position:sticky;top:0;z-index:1030;background-color:var(--background-elevated-base,#ffffff);border-bottom:1px solid rgba(255,255,255,0.1);-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-left:24px;padding-right:24px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:none;-ms-flex:none;flex:none;height:72px;}/*!sc*/ @media screen and (max-width:991px){.eaUSlL{height:64px;padding-left:16px;padding-right:4px;}}/*!sc*/ data-styled.g281[id="sc-5dd3d1dd-0"]{content:"eaUSlL,"}/*!sc*/ .jFBprj{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;}/*!sc*/ data-styled.g282[id="sc-5dd3d1dd-1"]{content:"jFBprj,"}/*!sc*/ .gEpGzO{-webkit-box-flex:3;-webkit-flex-grow:3;-ms-flex-positive:3;flex-grow:3;-webkit-flex-basis:240px;-ms-flex-preferred-size:240px;flex-basis:240px;text-align:right;}/*!sc*/ data-styled.g284[id="sc-5dd3d1dd-3"]{content:"gEpGzO,"}/*!sc*/ #onetrust-banner-sdk{overscroll-behavior:none;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}/*!sc*/ data-styled.g285[id="sc-global-euAyPy1"]{content:"sc-global-euAyPy1,"}/*!sc*/ .kVWHyn{padding:0;}/*!sc*/ data-styled.g287[id="sc-33f1116f-0"]{content:"kVWHyn,"}/*!sc*/ .fIEjgQ{display:inline-block;background-color:var(--decorative-base,#000000);width:8px;height:8px;border-radius:50%;margin:auto 2px;}/*!sc*/ data-styled.g288[id="sc-4b98e795-0"]{content:"fIEjgQ,"}/*!sc*/ .inXpDH{border-radius:0;outline:transparent solid 3px;outline-offset:-3px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;color:var(--text-base,#000000);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;margin:0.25em 0;padding:0.25em 4px 0.25em;}/*!sc*/ .inXpDH:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.inXpDH{outline:transparent solid 1.5px;outline-offset:-2px;}.inXpDH:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ .inXpDH:hover{color:var(--text-bright-accent,#107434);}/*!sc*/ @media screen and (max-width:991px){.inXpDH{padding:8px 24px;}}/*!sc*/ @media screen and (min-width:992px){.inXpDH[aria-current]{background-color:var(--background-tinted-base,rgba(0,0,0,0.08));color:var(--text-bright-accent,#107434);font-weight:700;}}/*!sc*/ data-styled.g289[id="sc-ca19fa36-0"]{content:"inXpDH,"}/*!sc*/ .eQIFgG{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin:0 8px 0 4px;}/*!sc*/ @media screen and (max-width:991px){.eQIFgG.eQIFgG{display:none;}}/*!sc*/ data-styled.g290[id="sc-ca19fa36-1"]{content:"eQIFgG,"}/*!sc*/ @media screen and (min-width:992px){.gDQowf{margin:0 0 0 20px;padding:0 0 0 12px;border-left:1px solid var(--decorative-subdued,#dedede);}.gDQowf a{color:var(--text-subdued,#656565);font-size:0.875rem;line-height:20px;}.gDQowf a > span{display:none;}.gDQowf a[aria-current]{border-left:3px solid var(--decorative-base,#000000);margin-left:-14px;padding-left:16px;}}/*!sc*/ data-styled.g291[id="sc-3b882ab6-0"]{content:"gDQowf,"}/*!sc*/ .jaqnEm{border-radius:16px;outline:transparent solid 3px;outline-offset:6px;-webkit-transition:outline-color 200ms ease-in;transition:outline-color 200ms ease-in;background:none;cursor:pointer;border:0;margin:4px 0;padding:4px 0;color:inherit;text-align:left;}/*!sc*/ .jaqnEm:focus-visible{outline-color:var(--essential-base,#000000);}/*!sc*/ @supports not selector(:focus-visible){.jaqnEm{outline:transparent solid 1.5px;outline-offset:4px;}.jaqnEm:focus{outline-color:var(--essential-base,#000000);}}/*!sc*/ .jaqnEm > *{vertical-align:middle;}/*!sc*/ .jaqnEm > span,.jaqnEm > a{margin-left:8px;}/*!sc*/ .jaqnEm > svg{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}/*!sc*/ .jaqnEm[aria-expanded='true'] > svg{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}/*!sc*/ data-styled.g292[id="sc-71f1783f-0"]{content:"jaqnEm,"}/*!sc*/ @media screen and (min-width:992px){.ifTmbP.ifTmbP{display:none;}}/*!sc*/ data-styled.g293[id="sc-5567915-0"]{content:"ifTmbP,"}/*!sc*/ .jPjXCP{padding-inline:4px;}/*!sc*/ @media screen and (max-width:991px){.jPjXCP.jPjXCP{display:none;}}/*!sc*/ data-styled.g294[id="sc-5567915-1"]{content:"jPjXCP,"}/*!sc*/ @media screen and (min-width:992px){.bCWGgN.bCWGgN{display:none;}}/*!sc*/ data-styled.g295[id="sc-5567915-2"]{content:"bCWGgN,"}/*!sc*/ .jjRUzu{margin-left:4px;vertical-align:middle;}/*!sc*/ @media screen and (max-width:991px){.jjRUzu.jjRUzu{display:none;}}/*!sc*/ data-styled.g296[id="sc-5567915-3"]{content:"jjRUzu,"}/*!sc*/ .hQAoDN{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ data-styled.g297[id="sc-8e747c9e-0"]{content:"hQAoDN,"}/*!sc*/ .esveKX{--top-offset:72px;--background-base:#FFFFFF !important;--background-highlight:#40007312 !important;--background-press:#FFFFFF !important;--background-elevated-base:#400073 !important;--background-elevated-highlight:#FFFFFF !important;--background-elevated-press:#FFFFFF !important;--background-tinted-base:#40007314 !important;--background-tinted-highlight:#DACFE6 !important;--background-tinted-press:#FFFFFF !important;--decorative-base:#400073 !important;--decorative-subdued:#bdb1cb !important;--essential-base:#000000 !important;--essential-subdued:#D7DBFF !important;--essential-bright-accent:#CDF56466 !important;--essential-negative:#000000 !important;--essential-warning:#000000 !important;--essential-positive:#000000 !important;--essential-announcement:#000000 !important;--text-base:#181818 !important;--text-subdued:#282828 !important;--text-bright-accent:#400073 !important;--text-negative:#000000 !important;--text-warning:#000000 !important;--text-positive:#8C20DF !important;--text-announcement:#000000 !important;background-color:var(--background-highlight,#f5f5f5);padding:20px 0 20px 20px;width:300px;height:calc(100vh - var(--top-offset));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:-webkit-sticky;position:sticky;top:var(--top-offset);overflow-y:auto;}/*!sc*/ @supports (height:100dvh){.esveKX{height:calc(100dvh - var(--top-offset));}}/*!sc*/ @media screen and (max-width:991px){.esveKX.esveKX{display:none;}}/*!sc*/ data-styled.g298[id="sc-8e747c9e-1"]{content:"esveKX,"}/*!sc*/ .cyDyUk{margin-left:4px;padding-bottom:12px;}/*!sc*/ data-styled.g299[id="sc-8e747c9e-2"]{content:"cyDyUk,"}/*!sc*/ .cnPCiV{padding:0 16px 16px;}/*!sc*/ @media screen and (min-width:992px){.cnPCiV{max-width:1800px;padding:0 32px 32px;}}/*!sc*/ data-styled.g300[id="sc-2b38a360-0"]{content:"cnPCiV,"}/*!sc*/ .ifxrgl{padding:16px 0;}/*!sc*/ data-styled.g309[id="sc-9e80177b-1"]{content:"ifxrgl,"}/*!sc*/ .kEYUZZ{max-width:100%;max-height:100vh;}/*!sc*/ @media screen and (min-height:300px){.kEYUZZ{max-height:calc(100vh / 2);}}/*!sc*/ @media screen and (min-height:1000px){.kEYUZZ{max-height:calc(100vh / 3);}}/*!sc*/ data-styled.g311[id="sc-9e80177b-3"]{content:"kEYUZZ,"}/*!sc*/ .lavrjL{padding-top:32px;padding-bottom:32px;}/*!sc*/ data-styled.g314[id="sc-758a8666-2"]{content:"lavrjL,"}/*!sc*/ .gsLPka{--background-base:#FFFFFF !important;--background-highlight:#40007312 !important;--background-press:#FFFFFF !important;--background-elevated-base:#400073 !important;--background-elevated-highlight:#FFFFFF !important;--background-elevated-press:#FFFFFF !important;--background-tinted-base:#40007314 !important;--background-tinted-highlight:#DACFE6 !important;--background-tinted-press:#FFFFFF !important;--decorative-base:#400073 !important;--decorative-subdued:#bdb1cb !important;--essential-base:#000000 !important;--essential-subdued:#D7DBFF !important;--essential-bright-accent:#CDF56466 !important;--essential-negative:#000000 !important;--essential-warning:#000000 !important;--essential-positive:#000000 !important;--essential-announcement:#000000 !important;--text-base:#181818 !important;--text-subdued:#282828 !important;--text-bright-accent:#400073 !important;--text-negative:#000000 !important;--text-warning:#000000 !important;--text-positive:#8C20DF !important;--text-announcement:#000000 !important;}/*!sc*/ data-styled.g315[id="sc-758a8666-3"]{content:"gsLPka,"}/*!sc*/ </style></head><body><div id="__next"><div class="sc-70f368a6-0 dYwJAo encore-creator-light-theme encore-layout-themes"><a class="Link-sc-1rnxmqt-0 eHnYHF encore-inverted-dark-set" href="#main" data-encore-id="skipLink"><div class="LinkText-sc-3xixkl-0 cXqsMl">Skip to content</div></a><header class="sc-5dd3d1dd-0 eaUSlL"><div class="sc-5dd3d1dd-1 jFBprj"><a class="sc-539db49-0 fyfvvy" href="/"><svg aria-label="Spotify for Developers" xmlns="http://www.w3.org/2000/svg" width="240" height="34"><use href="/images/spotify-for-developers-logo.svg#s4d-logo"></use></svg></a></div><nav aria-label="primary" class="sc-61e0ff0f-0 sc-5dd3d1dd-2 hINOnu hZFTKR"><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-e3bdb244-0 daFODJ" data-encore-id="typeList"><li class="sc-daaf2fce-0 fngAVZ"><button aria-expanded="false" data-active="true" class="sc-a671ab29-0 ggRfAl">Documentation<svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-a671ab29-1 iIHRIb" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><div hidden="" class="sc-9fff6009-0 dPqbzU sc-147783a9-0 ljywHx"><button aria-label="Go back to main navigation" class="sc-1a8d3606-0 dKipnq sc-a8ce54c5-0 jzFsff"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Documentation</span></button><span class="Type__TypeElement-sc-goli3j-0 eyOwjh sc-45697e4e-0 yjgPF" data-encore-id="type">Products</span><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-ca6f2bb9-0 kRyiQK" data-encore-id="typeList"><li><a class="sc-57f92064-0 fZekVo" href="/documentation/web-api"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R18l9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R18l9dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R18l9dm6:)"><rect width="16" height="16" rx="3.2" fill="#6900BA"></rect></g><g clip-path="url(#:R18l9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#CDF564"></circle></g></svg>Web API</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/web-playback-sdk"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1959dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1959dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1959dm6:)"><rect width="16" height="16" rx="3.2" fill="#4100F5"></rect></g><g clip-path="url(#:R1959dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#F573A0"></circle></g></svg>Web Playback SDK</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/ads-api"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R19l9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R19l9dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R19l9dm6:)"><rect width="16" height="16" rx="3.2" fill="#9691FF"></rect></g><g clip-path="url(#:R19l9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#9BF0E1"></circle></g></svg>Ads API</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/ios"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1a59dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1a59dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1a59dm6:)"><rect width="16" height="16" rx="3.2" fill="#509BF5"></rect></g><g clip-path="url(#:R1a59dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FAE62D"></circle></g></svg>iOS</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/android"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1al9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1al9dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1al9dm6:)"><rect width="16" height="16" rx="3.2" fill="#FFCDD2"></rect></g><g clip-path="url(#:R1al9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#0A59B8"></circle></g></svg>Android</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/embeds"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1b59dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1b59dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1b59dm6:)"><rect width="16" height="16" rx="3.2" fill="#705378"></rect></g><g clip-path="url(#:R1b59dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FF6437"></circle></g></svg>Embeds</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/commercial-hardware"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1bl9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1bl9dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1bl9dm6:)"><rect width="16" height="16" rx="3.2" fill="#27856A"></rect></g><g clip-path="url(#:R1bl9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#C8E0FC"></circle></g></svg>Commercial Hardware</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/open-access"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R1c59dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R1c59dm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:R1c59dm6:)"><rect width="16" height="16" rx="3.2" fill="#213261"></rect></g><g clip-path="url(#:R1c59dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#D8A3FF"></circle></g></svg>Open Access</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul><span class="Type__TypeElement-sc-goli3j-0 eyOwjh sc-45697e4e-0 yjgPF" data-encore-id="type">Guidelines</span><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-ca6f2bb9-0 kRyiQK" data-encore-id="typeList"><li><a class="sc-57f92064-0 fZekVo" href="/documentation/design"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rap9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rap9dm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:Rap9dm6:)"><circle cx="8" cy="8" r="8" fill="#503750"></circle></g><g clip-path="url(#:Rap9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#F573A0"></circle></g></svg>Design</span></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/accessibility"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rb99dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rb99dm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:Rb99dm6:)"><circle cx="8" cy="8" r="8" fill="#1D006C"></circle></g><g clip-path="url(#:Rb99dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFAF45"></circle></g></svg>Accessibility</span></a></li><li><a class="sc-57f92064-0 fZekVo" href="/terms"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rbp9dm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rbp9dm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:Rbp9dm6:)"><circle cx="8" cy="8" r="8" fill="#9C78FF"></circle></g><g clip-path="url(#:Rbp9dm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFC864"></circle></g></svg>Legal</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul></div></li><li class="sc-daaf2fce-0 fngAVZ"><a class="sc-a671ab29-0 ggRfAl" href="/community">Community<svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-a671ab29-1 iIHRIb" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul></nav><div class="sc-61e0ff0f-0 sc-5dd3d1dd-3 hINOnu gEpGzO"></div><div class="sc-960b9084-0 cgDIHL"><nav aria-label="primary"><button type="button" aria-expanded="false" class="Button-sc-1dqy6lx-0 kkzaBr" aria-label="Open menu" data-encore-id="buttonTertiary"><span aria-hidden="true" class="IconWrapper__Wrapper-sc-16usrgb-0 jyHIqB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor" viewBox="0 0 24 24" class="sc-bbfbffd5-0 jYFMfm"><path d="M20.25 6H3.75c-1.5 0-1.5-2 0-2h16.5c1.5 0 1.5 2 0 2Z"></path><path d="M20.25 13H3.75c-1.5 0-1.5-2 0-2h16.5c1.5 0 1.5 2 0 2Z"></path><path d="M20.25 20H3.75c-1.5 0-1.5-2 0-2h16.5c1.5 0 1.5 2 0 2Z"></path></svg></span></button><div role="region" aria-label="0 alert(s) to review" class="sc-854fa934-0 sc-c6c8ec75-0 kMlpAI kUBZjS">0</div><div hidden="" class="sc-9fff6009-0 dPqbzU sc-147783a9-0 ljywHx"><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-e3bdb244-0 daFODJ" data-encore-id="typeList"><li class="sc-daaf2fce-0 fngAVZ"><button aria-expanded="false" data-active="true" class="sc-a671ab29-0 ggRfAl">Documentation<svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-a671ab29-1 iIHRIb" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><div hidden="" class="sc-9fff6009-0 dPqbzU sc-147783a9-0 ljywHx"><button aria-label="Go back to main navigation" class="sc-1a8d3606-0 dKipnq sc-a8ce54c5-0 jzFsff"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Documentation</span></button><span class="Type__TypeElement-sc-goli3j-0 eyOwjh sc-45697e4e-0 yjgPF" data-encore-id="type">Products</span><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-ca6f2bb9-0 kRyiQK" data-encore-id="typeList"><li><a class="sc-57f92064-0 fZekVo" href="/documentation/web-api"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Ra5aclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Ra5aclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Ra5aclm6:)"><rect width="16" height="16" rx="3.2" fill="#6900BA"></rect></g><g clip-path="url(#:Ra5aclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#CDF564"></circle></g></svg>Web API</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/web-playback-sdk"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Ra9aclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Ra9aclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Ra9aclm6:)"><rect width="16" height="16" rx="3.2" fill="#4100F5"></rect></g><g clip-path="url(#:Ra9aclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#F573A0"></circle></g></svg>Web Playback SDK</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/ads-api"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Radaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Radaclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Radaclm6:)"><rect width="16" height="16" rx="3.2" fill="#9691FF"></rect></g><g clip-path="url(#:Radaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#9BF0E1"></circle></g></svg>Ads API</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/ios"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rahaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rahaclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Rahaclm6:)"><rect width="16" height="16" rx="3.2" fill="#509BF5"></rect></g><g clip-path="url(#:Rahaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FAE62D"></circle></g></svg>iOS</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/android"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Ralaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Ralaclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Ralaclm6:)"><rect width="16" height="16" rx="3.2" fill="#FFCDD2"></rect></g><g clip-path="url(#:Ralaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#0A59B8"></circle></g></svg>Android</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/embeds"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rapaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rapaclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Rapaclm6:)"><rect width="16" height="16" rx="3.2" fill="#705378"></rect></g><g clip-path="url(#:Rapaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FF6437"></circle></g></svg>Embeds</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/commercial-hardware"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rataclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rataclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Rataclm6:)"><rect width="16" height="16" rx="3.2" fill="#27856A"></rect></g><g clip-path="url(#:Rataclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#C8E0FC"></circle></g></svg>Commercial Hardware</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/open-access"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rb1aclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rb1aclm6H1:"><rect width="16" height="16" rx="3.2"></rect></clipPath></defs><g clip-path="url(#:Rb1aclm6:)"><rect width="16" height="16" rx="3.2" fill="#213261"></rect></g><g clip-path="url(#:Rb1aclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#D8A3FF"></circle></g></svg>Open Access</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul><span class="Type__TypeElement-sc-goli3j-0 eyOwjh sc-45697e4e-0 yjgPF" data-encore-id="type">Guidelines</span><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-ca6f2bb9-0 kRyiQK" data-encore-id="typeList"><li><a class="sc-57f92064-0 fZekVo" href="/documentation/design"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R2maclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R2maclm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:R2maclm6:)"><circle cx="8" cy="8" r="8" fill="#503750"></circle></g><g clip-path="url(#:R2maclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#F573A0"></circle></g></svg>Design</span></a></li><li><a class="sc-57f92064-0 fZekVo" href="/documentation/accessibility"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R2qaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R2qaclm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:R2qaclm6:)"><circle cx="8" cy="8" r="8" fill="#1D006C"></circle></g><g clip-path="url(#:R2qaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFAF45"></circle></g></svg>Accessibility</span></a></li><li><a class="sc-57f92064-0 fZekVo" href="/terms"><span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R2uaclm6:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R2uaclm6H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:R2uaclm6:)"><circle cx="8" cy="8" r="8" fill="#9C78FF"></circle></g><g clip-path="url(#:R2uaclm6H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFC864"></circle></g></svg>Legal</span><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-57f92064-1 bfMHgv" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul></div></li><li class="sc-daaf2fce-0 fngAVZ"><a class="sc-a671ab29-0 ggRfAl" href="/community">Community<svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 ceft sc-a671ab29-1 iIHRIb" viewBox="0 0 16 16"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></a></li></ul></div></nav></div></header><div class="sc-7ead898e-0 AXGli"><nav aria-labelledby="side-nav-header" class="sc-8e747c9e-1 esveKX"><div class="sc-8e747c9e-2 cyDyUk"><p id="side-nav-header" data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 jFxTq"><span class="sc-8e747c9e-0 hQAoDN"><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":Rlaq66:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":Rlaq66H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:Rlaq66:)"><circle cx="8" cy="8" r="8" fill="#1D006C"></circle></g><g clip-path="url(#:Rlaq66H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFAF45"></circle></g></svg>Accessibility Guidelines</span></p></div><div><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-33f1116f-0 kVWHyn" data-encore-id="typeList"><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Introduction</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Introduction menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#introduction"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Introduction</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Introduction</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#what-is-accessibility"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>What is Accessibility?</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#accessibility-in-the-software-development-lifecycle"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Accessibility in the SDLC</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#how-to-use-this-guide"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>How to Use This Guide</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Quick Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Quick Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#quick-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Quick Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Quick Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#alt-text-in-images"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Alt-text in Images</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#animations"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Animations</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#buttons"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Buttons</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#color-contrast"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Color Contrast</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#headers"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Headers</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#modality"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Modality</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#multimodality"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Multimodality</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#order-of-actions"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Order of Actions</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#share-buttons"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Share Buttons</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Medium Term Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Medium Term Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#medium-term-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Medium Term Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Medium Term Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#navigation"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Navigation</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#order-and-grouping"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Order and Grouping</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#semantics"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Semantics</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Intensive Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Intensive Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#intensive-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Intensive Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Intensive Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#master-assistive-technologies"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Master Assistive Technologies</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#master-states-in-accessibility"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Master States in Accessibility</a></li></ul></li></ul></div></nav><div class="sc-960b9084-0 cgDIHL"><div hidden="" class="sc-9fff6009-0 dPqbzU"><button aria-label="Go back to Documentation" class="sc-1a8d3606-0 dKipnq"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><svg data-encore-id="icon" role="img" aria-hidden="true" class="Svg-sc-ytk21e-0 dcaYNJ"><defs><clipPath id=":R9iq66:"><path d="M 0 0 L 16 0 L 16 16 L 8 16 L 0 8 Z"></path></clipPath><clipPath id=":R9iq66H1:"><circle cx="8" cy="8" r="8"></circle></clipPath></defs><g clip-path="url(#:R9iq66:)"><circle cx="8" cy="8" r="8" fill="#1D006C"></circle></g><g clip-path="url(#:R9iq66H1:)"><circle cx="0" cy="16" r="9.6" fill="#FFAF45"></circle></g></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Accessibility Guidelines</span></button><div><ul role="list" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH sc-33f1116f-0 kVWHyn" data-encore-id="typeList"><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Introduction</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Introduction menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#introduction"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Introduction</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Introduction</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#what-is-accessibility"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>What is Accessibility?</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#accessibility-in-the-software-development-lifecycle"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Accessibility in the SDLC</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#how-to-use-this-guide"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>How to Use This Guide</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Quick Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Quick Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#quick-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Quick Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Quick Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#alt-text-in-images"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Alt-text in Images</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#animations"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Animations</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#buttons"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Buttons</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#color-contrast"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Color Contrast</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#headers"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Headers</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#modality"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Modality</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#multimodality"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Multimodality</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#order-of-actions"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Order of Actions</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#share-buttons"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Share Buttons</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Medium Term Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Medium Term Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#medium-term-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Medium Term Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Medium Term Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#navigation"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Navigation</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#order-and-grouping"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Order and Grouping</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#semantics"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Semantics</a></li></ul></li><li><button class="sc-226e2e15-0 cKvXqF sc-5567915-0 ifTmbP"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Intensive Wins</span><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M4.97.47a.75.75 0 0 0 0 1.06L11.44 8l-6.47 6.47a.75.75 0 1 0 1.06 1.06L13.56 8 6.03.47a.75.75 0 0 0-1.06 0z'/></svg></button><button aria-expanded="false" class="sc-71f1783f-0 jaqnEm sc-5567915-1 jPjXCP" aria-label="Intensive Wins menu"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 eGOOvu"><path d='M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z'/></svg></button><a class="Link-sc-k8gsk-0 buKKye sc-5567915-3 jjRUzu" data-encore-id="textLink" href="/documentation/accessibility#intensive-wins"><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 kqItdM">Intensive Wins</span></a><ul hidden="" class="sc-9fff6009-0 dPqbzU sc-3b882ab6-0 gDQowf"><button aria-label="Go back to " class="sc-1a8d3606-0 dKipnq sc-5567915-2 bCWGgN"><svg data-encore-id="icon" role="img" aria-hidden="true" viewBox="0 0 16 16" class="Svg-sc-ytk21e-0 ceft"><path d='M11.03.47a.75.75 0 0 1 0 1.06L4.56 8l6.47 6.47a.75.75 0 1 1-1.06 1.06L2.44 8 9.97.47a.75.75 0 0 1 1.06 0z'/></svg><span data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 huwcwr">Intensive Wins</span></button><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#master-assistive-technologies"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Master Assistive Technologies</a></li><li data-encore-id="listItem" class="ListItem__ListItemElement-sc-14osqn3-0 iTMyfH"><a class="sc-ca19fa36-0 inXpDH" href="/documentation/accessibility#master-states-in-accessibility"><span class="sc-4b98e795-0 sc-ca19fa36-1 fIEjgQ eQIFgG"></span>Master States in Accessibility</a></li></ul></li></ul></div></div></div><main id="main" class="sc-ae97880a-0 ifAlMH"><div class="sc-7eae9c62-0 fdpdGa"><div class="sc-2b38a360-0 sc-758a8666-3 cnPCiV gsLPka"><h1 class="Type__TypeElement-sc-goli3j-0 cMheqG sc-758a8666-2 lavrjL" data-encore-id="type">Accessibility Guidelines  </h1><div class="sc-9e80177b-1 ifxrgl"><h2 class="encore-text encore-text-title-medium" data-encore-id="text" id="introduction">Introduction</h2></div> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="what-is-accessibility">What is Accessibility?</h3></div> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Accessibility (hereafter abbreviated to A11y — as in, 'a', then 11 characters, and then 'y') is the body of work involved in (i) making your application available to all and (ii) in providing equitable experiences to users, context and abilities notwithstanding.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Our mission at Spotify is to allow billions of fans the opportunity to enjoy and be inspired by artists' work. Because our applications are for everyone, <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://newsroom.spotify.com/2021-12-03/spotify-joins-the-valuable-500-with-a-commitment-to-disability-inclusion/">product a11y is now a core focus for Spotify</a>. As developers extending the Spotify experience to our communities elsewhere, we have the responsibility to our users to create a safe and equitable space for them, regardless of the manner in which they use our applications and interface with their devices.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><img src="/images/a11y/wcag-map.png" alt="WCAG Map - In the center it says WCAG 2.1 and is surrounded by Perceivable, Operable, Robust and Understandable. Perceivable has a cartoon blind user and is defined as Information and user interface components must be presentable to users in ways they can perceive. Operable has a picture of two hands using a tablet computer and is defined as User interface components and navigation must be operable. Robust has an image of a laptop, headphones and braille display connected by arrows and is defined as Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Understandable has a cartoon woman using a laptop with a light bulb above her head as if she had a good idea and is defined as Information and the operation of user interface must be understandable." class="Image-sc-1u215sg-3 hQQTps sc-9e80177b-3 kEYUZZ" data-encore-id="image"/></p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><em>Abbreviated version of <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://intopia.digital/wp-content/uploads/2019/10/2019-WCAG2.1-Map-Intopia-plus-reading-order.pdf">The WCAG map by Intopia</a>.</em><br/><br/></p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>“Who might this experience exclude?”</strong> is a question we answer every time we make implementation choices in our applications. In everyday life, stores that can only be accessed by a staircase have actively made the decision to exclude wheelchair users, parents with strollers, shoppers with wheel bags. Every design decision is a stance on inclusion, or lack thereof.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Susan Goltsman, co-author of <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.worldcat.org/title/27241984">Play for All Guidelines</a> and <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.worldcat.org/title/61247468">The Inclusive City</a>, has popularly described inclusion as allowing a variety of ways for people to experience one thing (like your application), rather than availing only one experience for everybody.<br/></p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">If your end goal for the “who might this experience exclude?” question is to get to the answer “no one” - then this is the right guide for you to use to deliver a high quality application that is at par with Spotify’s core value of inclusion for all.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Testing accessibility manually is indispensable as automated tests will only catch a small percentage of issues and will not validate the experience as a whole.</p> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">As an application developer, remember to make it possible and seamless for yourself to toggle between enabling and disabling a11y controls for your application as you develop it, much like a light switch gives users autonomy over the decision to have their bulbs on or off. <br/> Configuring your devices so it is quick and easy to test with assistive technologies, removes friction and saves time. You will find yourself testing more and more often.</p></span></div></div> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="accessibility-in-the-software-development-lifecycle">Accessibility in the Software Development Lifecycle</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">A11y done right results in high quality applications. Prioritizing a11y early on in your development process reduces regression and ensures your application includes everyone from the onset.</p> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">This guide assumes you have some understanding of a11y at a foundational level. At any point, should you need further reference material, the World Wide Web Consortium (W3C)’s Web A11y Institute has published the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/WAI/fundamentals/">Fundamentals of A11y resource</a> covering a range of topics and in-depth contexts also relevant to this guide.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">The image below is <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://medium.com/hootsuite-engineering/building-an-accessible-product-eae6b3f3c2d6">Jason Dippel’s take on baking accessibility into the early stages of your software development lifecycle(SDLC)</a>. We agree with the recommendation that accessibility should be baked into the SDLC as follows: _ between the Wireframe and Product Backlog stage as part of the User Experience Design process, _ as part of Sprints that then inform the Sprints Backlog and between the Product Backlog and Deployed product as part of the User Experience Research process, <br/> effectively saving you time and money down the road.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><img src="/images/a11y/bake-in-accessibility.png" alt="Jason Dippel's illustration of Bake-In accessibility. Image shows the Software Development Life Cycle (SDLC) against a yellow background. Different stages of the SDLC are represented as blue quadrilaterals (squares and rectangles) and connected with black dotted lines. From Left to Right, the stages of the SDLC in the diagram are Wireframe, Product Backlog, Sprint Backlog, Shippable Product and Deployed Product. Accessibility is represented as a navy blue circle, and juxtaposed against the dotted black lines between different stages where Jason recommends baking in accessibility into the SDLC." class="Image-sc-1u215sg-3 hQQTps sc-9e80177b-3 kEYUZZ" data-encore-id="image"/></p> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="how-to-use-this-guide">How to Use this Guide</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">This guide will focus on levelling up your skills so that you can identify a11y gaps in the applications you have already developed and work to fix them, or use the tools in this guide as you begin to develop a new application.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">The guide is divided into three sections, all designed as task lists to guide you on your quest to create a high quality and accessible application. The sections are organized in order of ease of implementation, but all recommendations are equally important and should be prioritized in your application development. They are:</p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#quick-wins">quick wins</a>,</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#medium-term-wins">medium-term wins</a>, and</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#intensive-wins">intensive wins</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h2 class="encore-text encore-text-title-medium" data-encore-id="text" id="quick-wins">Quick Wins</h2></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Accessibility quick wins are modifications that take a short amount of time to implement in your application as a first step to making it more accessible for all.</p> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="alt-text-in-images">Alt-text in Images</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">All visual and non-text elements (images, GIFs, graphs, charts) in your application should be accompanied by alternative text (alt-text for short), which is text that describes your non-text elements in detail, providing necessary context for assistive technology users.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Add the alt-text attribute to all your image elements, for example, <img src="https://developer.spotify.com/cats.gif" alt="Two kittens playing with a ball of yarn"/></li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Alternatively, write detailed captions under your non-text elements</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">For purely decorative images on a page, consider adding an empty <code><alt=""></code> attribute so screen readers can skip them altogether</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://webaim.org/techniques/alttext/">WebAim’s guide to alternative text</a></li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/WAI/tutorials/images/">W3C’s guide to text-alternatives in images</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="animations">Animations</h3></div> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">As an application developer, it is important to honor system settings. In-app settings are ok too, but should be superseded by system preferences that a user has already specified.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Animations on the web and mobile have been known to trigger seizures, induce nausea or trigger headaches and more. It is also not uncommon for users to turn animations off to meet their preferences, for example, optimize their device performance or save battery. As such, it is important to incorporate animations in a way that is inclusive of all without causing harm.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Adopt the three flashes or less <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold">recommendation from WCAG</a>, which stipulates that your animation should not have any more than a maximum of three flashes in a one second period.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Give users <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/TR/WCAG21/#pause-stop-hide">full control of the animations</a> in your application, so that they can pause the animations, stop the animations or hide them from a page altogether should they prefer to.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Where user interaction on a page i.e. scrolling up and down triggers animation, add provisions to disable or reduce this motion-induced animation.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://trace.umd.edu/peat/">University of Maryland’s Photosensitive Epilepsy Analysis Tool</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="buttons">Buttons</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Buttons are an important way to deliver calls-to-action to your application’s users.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Icon-only buttons should include button labels to provide context around button actions.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Disabled buttons are often used to communicate that an action needs to be completed first before moving to the next step. However, disabled buttons are inaccessible to screen readers and often, it is unclear to an assistive tech user what the final outcome of completing a couple of steps is. Adding labels that describe why a button is disabled and what needs to happen to enable it is a good first step.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">With button sizing, make sure to provide a large area for user interaction, for example, <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://developer.apple.com/design/human-interface-guidelines/foundations/layout/">in iOS the minimum touch target size is 44x44 points</a>, and in Android it is 48x48 points.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Consider using in-built button elements by default (on the web as well as on mobile) as they have predefined styles and a11y features like touch target size, tab focus, focus highlight and interaction shortcuts (not everyone uses a pointing device to interact with components) written into them.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="http://web-accessibility.carnegiemuseums.org/content/buttons/">Accessibility guidelines on links, images and other clickable elements</a></li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Find detailed recommendations about share buttons and best practices around them in the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#share-buttons">Share Buttons</a> section of this a11y guide.</li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="color-contrast">Color Contrast</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Color contrast is a measure of how different colors are from each other - colors that are opposites have the highest contrast and those that are next to each other on the color wheel have the least contrast.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">WCAG recommends that</p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">the color contrast between background and foreground elements should have a 4.5:1 contrast ratio,</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">icons for user interfaces that are essential should have a 3:1 contrast ratio.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">You can use <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://webaim.org/articles/contrast/">this color contrast resource by WebAIM</a> to guide you on what ratio to aim for.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">You can use <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://webaim.org/resources/contrastchecker/">WebAIM’s color contrast checker tool</a> to confirm that the colors you are using are appropriately contrasted.</li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="headers">Headers</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Page headers are primarily how screen readers and other assistive technologies navigate pages on the web. Correctly identifying page headers makes it possible for assistive technology users to get a quick overview of what’s on the page and jump to the sections they are interested in.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Use HTML markup to identify page headers. For example, <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header">here are guidelines on using the <code><header></code> element on the web</a></li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Organize your headers hierarchically, being careful not to skip levels i.e. H2 should come after H1, do not skip to H3 or H4 after H1.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">On native mobile apps, you can also configure anything that represents a header as a heading to let the users quickly explore what the screen has to offer and speed up navigation, by jumping from one to another with a simple gesture.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Web Accessibility Initiative (WAI) Guide to Headings</a></li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://accessibility.princeton.edu/how/content/headings">Digitally Accessible Headings by Princeton University</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="modality">Modality</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Modals are pieces of information that pop up, and are commonly used to nudge a user to complete a specific action, or to provide more information.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Because modals are informative but also disrupt the flow of information on a page, it is important to give the user full control over opening and closing modals throughout your application. An accessible modal is one that</p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">provides the right information to screen readers</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">manages keyboard focus properly You can use HTML and ARIA to serve semantic information and work with JavaScript to change behavior and CSS to dictate appearance.</li> </ol> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">A common mistake with modals in applications is that the focus doesn't move to the modal or if it does, focus remains on the content underneath the modal. Be sure to test your application modals and fix this behavior where it occurs.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.magentaa11y.com/checklist-native/alert-dialog/">How to test an alert / modal dialog</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="multimodality">Multimodality</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Important information should be conveyed in multiple modes, that is - color, haptics, sound, through messages and iconography - so everyone can perceive it.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">For example, consider a text box in a form that is highlighted in red when the user enters invalid information: colorblind users may not perceive it and screen reader users may also miss it if it is not actively configured by developers. Adding some messaging next to it with specific information on why the information entered is invalid and how the user can fix it, will make it much easier for everyone to identify. Redundancy helps in this case. The more modes your information is presented in, the easier it will be to understand.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=141#use-of-color">WCAG 2.1 (Level A) 1.4.1 Success Criteria: Use of Color</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="order-of-actions">Order of Actions</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">If your application presents the user with a choice of actions at any point, be sure to present the least destructive option first from the range of choices, for example, when asking the user to confirm their selected action to delete a playlist, the <strong>OK</strong> option should be highlighted first instead of the <strong>CANCEL</strong> option; or if you have <strong>CANCEL</strong> and <strong>CONFIRM</strong> as options for the user to pick from, highlight <strong>CANCEL</strong> first because remedial actions are easier (when one cancels, they can redo a task.</p> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">For time management reasons, should a user select <strong>CANCEL</strong>, consider returning them to the most-recent state i.e. to the populated version of a form rather than discarding all their input.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://webaim.org/articles/contrast/">WebAIM’s guide to contrast and color accessibility</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="share-buttons">Share Buttons</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Providing ways for users to share your application across different social media is one of the most common ways to spread the word about your application and draw users’ attention to it. A minimalist / common approach is to use hyperlinked social media icons to achieve this.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Accessible icons are images which can be accessed equitably and whose function can be understood clearly by all application users. To make your icons accessible:</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Add alternative text to your icons that describes their purpose i.e. what to expect on click. For further reading on alt-text best practices, see the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#alt-text-in-images">images and alt text</a> section.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Choose icon colors that have high contrast to your background and see the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#color-contrast">color contrast</a> section for more detailed best practices.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Provide clarity by including accompanying on-screen text, usually a one-word descriptive label, next to your icons.</li> </ol> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">It is an accessible practice to include either alt-text or associated on-screen text with an icon.</p></span></div></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="http://web-accessibility.carnegiemuseums.org/content/buttons/">Accessibility guidelines on links, images and other clickable elements</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h2 class="encore-text encore-text-title-medium" data-encore-id="text" id="medium-term-wins">Medium-term Wins</h2></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Medium-term wins are modifications that take a bit more time to implement in your application than <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#quick-wins">accessibility quick wins</a>. These are key, and we strongly recommend that you prioritize incorporating them into your application.</p> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="navigation">Navigation</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Structural presentation of a menu and its items i.e. in a list gives a good basis for assistive technologies to pick out menu items and serve corresponding functionality to assistive technology users. Coding menus semantically makes them adaptive to different scenarios i.e. different-size screens, varying zoom/ magnification levels and access via different assistive technologies.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Place your menu in one consistent area across all pages in your application</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Label your menus so they can be understood and differentiated easily</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Highlight the currently selected / active item in your menu using HTML or ARIA i.e.</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">See the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#order-and-grouping">Order and Grouping section</a> for best practices around grouping and ordering menu items</li> </ol> <div class="sc-9e80177b-1 ifxrgl"><div data-encore-id="banner" class="Wrapper-sc-62m9tu-0 gZFOmH encore-text-body-small"><svg data-encore-id="icon" role="img" aria-label="Info:" aria-hidden="false" class="Svg-sc-ytk21e-0 cqHNwh Icon-sc-1mveit9-0 kClhqN" viewBox="0 0 24 24"><title >Info:</title><path d='M11 6v2h2V6h-2zm0 4v8h2v-8h-2z'/><path d='M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18zM1 12c0 6.075 4.925 11 11 11s11-4.925 11-11S18.075 1 12 1 1 5.925 1 12z'/></svg><span class="Message-sc-15vkh7g-0 iIXgup"><p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">One of the best ways to check how accessible your navigation is, is to take on the <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://nomouse.org">keyboard / no-mouse challenge</a> for web applications or the screen-reader challenge for mobile applications i.e. use your application with a screen-reader only</p></span></div></div> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="order-and-grouping">Order and Grouping</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Grouping related items in your application makes it easier for screen readers to keep track of progress and overarching context as a user navigates the application. Any items that are grouped visually should also be represented similarly semantically.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Ordered and unordered lists</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Use unordered lists for menu items where content can be accessed and consumed in random order, and</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Use ordered lists for menu items where systemic navigation matters</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Adhere to rules of lists</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Only have list tags (<code><li></code>) as children of your ordered and unordered lists. Avoid adding other types of elements to them.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://developer.android.com/guide/topics/ui/accessibility/principles#content-groups">Principles of improving app accessibility in Android - groups of related content</a></li> </ol> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="semantics">Semantics</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Semantic elements are those that provide context about the nature of content held within them and include elements like <code><header></code>, <code><cite></code>, <code><section></code>, <code><p></code>, <code><footer></code>, <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">and more</a> while non-semantic elements like <code><div></code> and <code><span></code>do not provide context about what to expect in them.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">The four properties that constitute a semantic element are</p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">name (an element’s label),</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">role (describes an element’s function like input or button),</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">value (complements the role i.e. input=text) and</li> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">state (communicates how elements are configured i.e. enabled, collapsed, etc).</li> </ul> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">Swap out all your non-semantic elements like <code><div></code> and <code><span></code> for semantic elements</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://medium.com/google-developer-experts/state-descriptions-on-android-b2029283871f">State Descriptions on Android</a></li> </ul> <div class="sc-9e80177b-1 ifxrgl"><h2 class="encore-text encore-text-title-medium" data-encore-id="text" id="intensive-wins">Intensive Wins</h2></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Intensive wins are modifications that take a bit more time to implement in your application than accessibility <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#quick-wins">quick wins</a> and <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#medium-term-wins">medium-term wins</a>. These are key, and we strongly recommend that you prioritize incorporating them into your application.</p> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="master-assistive-technologies">Master Assistive Technologies</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">Pick an assistive technology and get good at it, for example, talkback technology like voice-over or NVDA which is Open Source software (OSS) with lots of free examples.</p> <div class="sc-9e80177b-1 ifxrgl"><h3 class="encore-text encore-text-title-small" data-encore-id="text" id="master-states-in-accessibility">Master States in Accessibility</h3></div> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">As mentioned in <a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="/documentation/accessibility#semantics">the Semantics section</a>, <code>states</code> are a semantic property assigned to elements that specify how content in an element is configured i.e. may be checked, enabled, expanded, hidden, current etc.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl">States and properties are categorized in four: (i) drag and drop attributes, (ii) live-region attributes, (iii) widget attributes and (iv) relationship attributes.</p> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>A11y Actions:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem">When defining elements, although optional, it is best practice to announce state for the sake of assistive technology users.</li> </ol> <p data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 ckCbjl"><strong>Resources:</strong></p> <ol role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hrsDVQ"> <li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a data-encore-id="textLink" class="Link-sc-k8gsk-0 flYERd" href="https://www.w3.org/TR/wai-aria/#states_and_properties">WCAG on states and properties</a></li> </ol></div></div></main></div><footer class="sc-79176060-0 byLwnG encore-inverted-dark-set"><h2 data-encore-id="visuallyHidden" class="VisuallyHidden__VisuallyHiddenElement-sc-17bibe8-0 kdFSxQ">Footer</h2><nav aria-label="footer" class="sc-79176060-1 dPgCwV"><span class="sc-79176060-2 gpumOS"><a data-small="true" class="sc-539db49-0 iUCAkX" href="/"><svg aria-label="Spotify for Developers" xmlns="http://www.w3.org/2000/svg" width="240" height="34"><use href="/images/spotify-for-developers-logo.svg#s4d-logo"></use></svg></a></span><div class="Type__TypeElement-sc-goli3j-0 bXWpix sc-79176060-3 fBSVgz" data-encore-id="type"><h3 data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 jFxTq">Documentation</h3><ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH"><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/web-api">Web API</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/web-playback-sdk">Web Playback SDK</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/ads-api">Ads API</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/ios">iOS</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/android">Android</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/embeds">Embeds</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/commercial-hardware">Commercial Hardware</a></li></ul></div><div class="Type__TypeElement-sc-goli3j-0 bXWpix sc-79176060-3 fBSVgz" data-encore-id="type"><h3 data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 jFxTq">Guidelines</h3><ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH"><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/design">Design</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/documentation/accessibility">Accessibility</a></li></ul></div><div class="Type__TypeElement-sc-goli3j-0 bXWpix sc-79176060-3 fBSVgz" data-encore-id="type"><h3 data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 jFxTq">Community</h3><ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH"><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/community">News</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="https://community.spotify.com/t5/Spotify-for-Developers/bd-p/Spotify_Developer">Forum</a></li></ul></div><div class="Type__TypeElement-sc-goli3j-0 bXWpix sc-79176060-3 fBSVgz" data-encore-id="type"><h3 data-encore-id="type" class="Type__TypeElement-sc-goli3j-0 jFxTq">Legal</h3><ul role="list" data-encore-id="typeList" class="TypeList__TypeListElement-sc-1jhixr6-0 hWSKsH"><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/terms">Developer Terms</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/policy">Developer Policy</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/compliance-tips">Compliance Tips</a></li><li class="encore-text encore-text-body-medium TypeListItem__TypeListItemElement-sc-q1l2mf-0 kqbyZR" data-encore-id="typeListItem"><a class="Link-sc-k8gsk-0 buKKye sc-79176060-4 ckOHVi" data-encore-id="textLink" href="/third-party-licenses">Third Party Licenses</a></li></ul></div></nav><p class="Type__TypeElement-sc-goli3j-0 bXWpix sc-79176060-5 dgothR" data-encore-id="type"><a href="https://www.spotify.com/legal/end-user-agreement/" data-encore-id="textLink" class="Link-sc-k8gsk-0 buKKye">Legal</a><a href="https://www.spotify.com/legal/cookies-policy/" data-encore-id="textLink" class="Link-sc-k8gsk-0 buKKye">Cookies</a><span>© 2024 Spotify AB</span></p></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"source":{"compiledSource":"\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n em: \"em\",\n h2: \"h2\",\n h3: \"h3\",\n img: \"img\",\n li: \"li\",\n ol: \"ol\",\n p: \"p\",\n strong: \"strong\",\n ul: \"ul\",\n ..._provideComponents(),\n ...props.components\n }, {Banner} = _components;\n if (!Banner) _missingMdxReference(\"Banner\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h2, {\n id: \"introduction\",\n children: \"Introduction\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"what-is-accessibility\",\n children: \"What is Accessibility?\"\n }), \"\\n\", _jsx(Banner, {\n children: _jsx(_components.p, {\n children: \"Accessibility (hereafter abbreviated to A11y — as in, 'a', then 11 characters, and then 'y') is the body of work involved in (i) making your application available to all and (ii) in providing equitable experiences to users, context and abilities notwithstanding.\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Our mission at Spotify is to allow billions of fans the opportunity to enjoy and be inspired by artists' work. Because our applications are for everyone, \", _jsx(_components.a, {\n href: \"https://newsroom.spotify.com/2021-12-03/spotify-joins-the-valuable-500-with-a-commitment-to-disability-inclusion/\",\n children: \"product a11y is now a core focus for Spotify\"\n }), \". As developers extending the Spotify experience to our communities elsewhere, we have the responsibility to our users to create a safe and equitable space for them, regardless of the manner in which they use our applications and interface with their devices.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.img, {\n src: \"/images/a11y/wcag-map.png\",\n alt: \"WCAG Map - In the center it says WCAG 2.1 and is surrounded by Perceivable, Operable, Robust and Understandable. Perceivable has a cartoon blind user and is defined as Information and user interface components must be presentable to users in ways they can perceive. Operable has a picture of two hands using a tablet computer and is defined as User interface components and navigation must be operable. Robust has an image of a laptop, headphones and braille display connected by arrows and is defined as Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Understandable has a cartoon woman using a laptop with a light bulb above her head as if she had a good idea and is defined as Information and the operation of user interface must be understandable.\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.em, {\n children: [\"Abbreviated version of \", _jsx(_components.a, {\n href: \"https://intopia.digital/wp-content/uploads/2019/10/2019-WCAG2.1-Map-Intopia-plus-reading-order.pdf\",\n children: \"The WCAG map by Intopia\"\n }), \".\"]\n }), _jsx(\"br\", {}), _jsx(\"br\", {})]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"“Who might this experience exclude?”\"\n }), \" is a question we answer every time we make implementation choices in our applications. In everyday life, stores that can only be accessed by a staircase have actively made the decision to exclude wheelchair users, parents with strollers, shoppers with wheel bags. Every design decision is a stance on inclusion, or lack thereof.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Susan Goltsman, co-author of \", _jsx(_components.a, {\n href: \"https://www.worldcat.org/title/27241984\",\n children: \"Play for All Guidelines\"\n }), \" and \", _jsx(_components.a, {\n href: \"https://www.worldcat.org/title/61247468\",\n children: \"The Inclusive City\"\n }), \", has popularly described inclusion as allowing a variety of ways for people to experience one thing (like your application), rather than availing only one experience for everybody.\", _jsx(\"br\", {})]\n }), \"\\n\", _jsx(_components.p, {\n children: \"If your end goal for the “who might this experience exclude?” question is to get to the answer “no one” - then this is the right guide for you to use to deliver a high quality application that is at par with Spotify’s core value of inclusion for all.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Testing accessibility manually is indispensable as automated tests will only catch a small percentage of issues and will not validate the experience as a whole.\"\n }), \"\\n\", _jsx(Banner, {\n children: _jsxs(_components.p, {\n children: [\"As an application developer, remember to make it possible and seamless for yourself to toggle between enabling and disabling a11y controls for your application as you develop it, much like a light switch gives users autonomy over the decision to have their bulbs on or off. \", _jsx(\"br\", {}), \" Configuring your devices so it is quick and easy to test with assistive technologies, removes friction and saves time. You will find yourself testing more and more often.\"]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"accessibility-in-the-software-development-lifecycle\",\n children: \"Accessibility in the Software Development Lifecycle\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"A11y done right results in high quality applications. Prioritizing a11y early on in your development process reduces regression and ensures your application includes everyone from the onset.\"\n }), \"\\n\", _jsx(Banner, {\n children: _jsxs(_components.p, {\n children: [\"This guide assumes you have some understanding of a11y at a foundational level. At any point, should you need further reference material, the World Wide Web Consortium (W3C)’s Web A11y Institute has published the \", _jsx(_components.a, {\n href: \"https://www.w3.org/WAI/fundamentals/\",\n children: \"Fundamentals of A11y resource\"\n }), \" covering a range of topics and in-depth contexts also relevant to this guide.\"]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The image below is \", _jsx(_components.a, {\n href: \"https://medium.com/hootsuite-engineering/building-an-accessible-product-eae6b3f3c2d6\",\n children: \"Jason Dippel’s take on baking accessibility into the early stages of your software development lifecycle(SDLC)\"\n }), \". We agree with the recommendation that accessibility should be baked into the SDLC as follows: _ between the Wireframe and Product Backlog stage as part of the User Experience Design process, _ as part of Sprints that then inform the Sprints Backlog and between the Product Backlog and Deployed product as part of the User Experience Research process, \", _jsx(\"br\", {}), \" effectively saving you time and money down the road.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.img, {\n src: \"/images/a11y/bake-in-accessibility.png\",\n alt: \"Jason Dippel's illustration of Bake-In accessibility. Image shows the Software Development Life Cycle (SDLC) against a yellow background. Different stages of the SDLC are represented as blue quadrilaterals (squares and rectangles) and connected with black dotted lines. From Left to Right, the stages of the SDLC in the diagram are Wireframe, Product Backlog, Sprint Backlog, Shippable Product and Deployed Product. Accessibility is represented as a navy blue circle, and juxtaposed against the dotted black lines between different stages where Jason recommends baking in accessibility into the SDLC.\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"how-to-use-this-guide\",\n children: \"How to Use this Guide\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This guide will focus on levelling up your skills so that you can identify a11y gaps in the applications you have already developed and work to fix them, or use the tools in this guide as you begin to develop a new application.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The guide is divided into three sections, all designed as task lists to guide you on your quest to create a high quality and accessible application. The sections are organized in order of ease of implementation, but all recommendations are equally important and should be prioritized in your application development. They are:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"#quick-wins\",\n children: \"quick wins\"\n }), \",\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"#medium-term-wins\",\n children: \"medium-term wins\"\n }), \", and\"]\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"#intensive-wins\",\n children: \"intensive wins\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"quick-wins\",\n children: \"Quick Wins\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Accessibility quick wins are modifications that take a short amount of time to implement in your application as a first step to making it more accessible for all.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"alt-text-in-images\",\n children: \"Alt-text in Images\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"All visual and non-text elements (images, GIFs, graphs, charts) in your application should be accompanied by alternative text (alt-text for short), which is text that describes your non-text elements in detail, providing necessary context for assistive technology users.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Add the alt-text attribute to all your image elements, for example, \", _jsx(\"img\", {\n src: \"https://developer.spotify.com/cats.gif\",\n alt: \"Two kittens playing with a ball of yarn\"\n })]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Alternatively, write detailed captions under your non-text elements\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"For purely decorative images on a page, consider adding an empty \", _jsx(_components.code, {\n children: \"\u003calt=\\\"\\\"\u003e\"\n }), \" attribute so screen readers can skip them altogether\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://webaim.org/techniques/alttext/\",\n children: \"WebAim’s guide to alternative text\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://www.w3.org/WAI/tutorials/images/\",\n children: \"W3C’s guide to text-alternatives in images\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"animations\",\n children: \"Animations\"\n }), \"\\n\", _jsx(Banner, {\n children: _jsx(_components.p, {\n children: \"As an application developer, it is important to honor system settings. In-app settings are ok too, but should be superseded by system preferences that a user has already specified.\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Animations on the web and mobile have been known to trigger seizures, induce nausea or trigger headaches and more. It is also not uncommon for users to turn animations off to meet their preferences, for example, optimize their device performance or save battery. As such, it is important to incorporate animations in a way that is inclusive of all without causing harm.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Adopt the three flashes or less \", _jsx(_components.a, {\n href: \"https://www.w3.org/TR/WCAG21/#three-flashes-or-below-threshold\",\n children: \"recommendation from WCAG\"\n }), \", which stipulates that your animation should not have any more than a maximum of three flashes in a one second period.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Give users \", _jsx(_components.a, {\n href: \"https://www.w3.org/TR/WCAG21/#pause-stop-hide\",\n children: \"full control of the animations\"\n }), \" in your application, so that they can pause the animations, stop the animations or hide them from a page altogether should they prefer to.\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Where user interaction on a page i.e. scrolling up and down triggers animation, add provisions to disable or reduce this motion-induced animation.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://trace.umd.edu/peat/\",\n children: \"University of Maryland’s Photosensitive Epilepsy Analysis Tool\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"buttons\",\n children: \"Buttons\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Buttons are an important way to deliver calls-to-action to your application’s users.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Icon-only buttons should include button labels to provide context around button actions.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Disabled buttons are often used to communicate that an action needs to be completed first before moving to the next step. However, disabled buttons are inaccessible to screen readers and often, it is unclear to an assistive tech user what the final outcome of completing a couple of steps is. Adding labels that describe why a button is disabled and what needs to happen to enable it is a good first step.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"With button sizing, make sure to provide a large area for user interaction, for example, \", _jsx(_components.a, {\n href: \"https://developer.apple.com/design/human-interface-guidelines/foundations/layout/\",\n children: \"in iOS the minimum touch target size is 44x44 points\"\n }), \", and in Android it is 48x48 points.\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Consider using in-built button elements by default (on the web as well as on mobile) as they have predefined styles and a11y features like touch target size, tab focus, focus highlight and interaction shortcuts (not everyone uses a pointing device to interact with components) written into them.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"http://web-accessibility.carnegiemuseums.org/content/buttons/\",\n children: \"Accessibility guidelines on links, images and other clickable elements\"\n })\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Find detailed recommendations about share buttons and best practices around them in the \", _jsx(_components.a, {\n href: \"#share-buttons\",\n children: \"Share Buttons\"\n }), \" section of this a11y guide.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"color-contrast\",\n children: \"Color Contrast\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Color contrast is a measure of how different colors are from each other - colors that are opposites have the highest contrast and those that are next to each other on the color wheel have the least contrast.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"WCAG recommends that\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"the color contrast between background and foreground elements should have a 4.5:1 contrast ratio,\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"icons for user interfaces that are essential should have a 3:1 contrast ratio.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"You can use \", _jsx(_components.a, {\n href: \"https://webaim.org/articles/contrast/\",\n children: \"this color contrast resource by WebAIM\"\n }), \" to guide you on what ratio to aim for.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"You can use \", _jsx(_components.a, {\n href: \"https://webaim.org/resources/contrastchecker/\",\n children: \"WebAIM’s color contrast checker tool\"\n }), \" to confirm that the colors you are using are appropriately contrasted.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"headers\",\n children: \"Headers\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Page headers are primarily how screen readers and other assistive technologies navigate pages on the web. Correctly identifying page headers makes it possible for assistive technology users to get a quick overview of what’s on the page and jump to the sections they are interested in.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Use HTML markup to identify page headers. For example, \", _jsxs(_components.a, {\n href: \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header\",\n children: [\"here are guidelines on using the \", _jsx(_components.code, {\n children: \"\u003cheader\u003e\"\n }), \" element on the web\"]\n })]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Organize your headers hierarchically, being careful not to skip levels i.e. H2 should come after H1, do not skip to H3 or H4 after H1.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"On native mobile apps, you can also configure anything that represents a header as a heading to let the users quickly explore what the screen has to offer and speed up navigation, by jumping from one to another with a simple gesture.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://www.w3.org/WAI/tutorials/page-structure/headings/\",\n children: \"Web Accessibility Initiative (WAI) Guide to Headings\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://accessibility.princeton.edu/how/content/headings\",\n children: \"Digitally Accessible Headings by Princeton University\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"modality\",\n children: \"Modality\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Modals are pieces of information that pop up, and are commonly used to nudge a user to complete a specific action, or to provide more information.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Because modals are informative but also disrupt the flow of information on a page, it is important to give the user full control over opening and closing modals throughout your application. An accessible modal is\\none that\"\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"provides the right information to screen readers\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"manages keyboard focus properly\\nYou can use HTML and ARIA to serve semantic information and work with JavaScript to change behavior and CSS to dictate appearance.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(Banner, {\n children: _jsx(_components.p, {\n children: \"A common mistake with modals in applications is that the focus doesn't move to the modal or if it does, focus remains on the content underneath the modal. Be sure to test your application modals and fix this behavior where it occurs.\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://www.magentaa11y.com/checklist-native/alert-dialog/\",\n children: \"How to test an alert / modal dialog\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"multimodality\",\n children: \"Multimodality\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Important information should be conveyed in multiple modes, that is - color, haptics, sound, through messages and iconography - so everyone can perceive it.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"For example, consider a text box in a form that is highlighted in red when the user enters invalid information: colorblind users may not perceive it and screen reader users may also miss it if it is not actively configured by developers. Adding some messaging next to it with specific information on why the information entered is invalid and how the user can fix it, will make it much easier for everyone to identify. Redundancy helps in this case. The more modes your information is presented in, the easier it will be to understand.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=141#use-of-color\",\n children: \"WCAG 2.1 (Level A) 1.4.1 Success Criteria: Use of Color\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"order-of-actions\",\n children: \"Order of Actions\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If your application presents the user with a choice of actions at any point, be sure to present the least destructive option first from the range of choices, for example,\\nwhen asking the user to confirm their selected action to delete a playlist, the \", _jsx(_components.strong, {\n children: \"OK\"\n }), \" option should be highlighted first instead of the \", _jsx(_components.strong, {\n children: \"CANCEL\"\n }), \" option; or\\nif you have \", _jsx(_components.strong, {\n children: \"CANCEL\"\n }), \" and \", _jsx(_components.strong, {\n children: \"CONFIRM\"\n }), \" as options for the user to pick from, highlight \", _jsx(_components.strong, {\n children: \"CANCEL\"\n }), \" first because remedial actions are easier (when one cancels, they can redo a task.\"]\n }), \"\\n\", _jsx(Banner, {\n children: _jsxs(_components.p, {\n children: [\"For time management reasons, should a user select \", _jsx(_components.strong, {\n children: \"CANCEL\"\n }), \", consider returning them to the most-recent state i.e. to the populated version of a form rather than discarding all their input.\"]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://webaim.org/articles/contrast/\",\n children: \"WebAIM’s guide to contrast and color accessibility\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"share-buttons\",\n children: \"Share Buttons\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Providing ways for users to share your application across different social media is one of the most common ways to spread the word about your application and draw users’ attention to it. A minimalist / common approach is to use hyperlinked social media icons to achieve this.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Accessible icons are images which can be accessed equitably and whose function can be understood clearly by all application users. To make your icons accessible:\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Add alternative text to your icons that describes their purpose i.e. what to expect on click. For further reading on alt-text best practices, see the \", _jsx(_components.a, {\n href: \"#alt-text-in-images\",\n children: \"images and alt text\"\n }), \" section.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Choose icon colors that have high contrast to your background and see the \", _jsx(_components.a, {\n href: \"#color-contrast\",\n children: \"color contrast\"\n }), \" section for more detailed best practices.\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Provide clarity by including accompanying on-screen text, usually a one-word descriptive label, next to your icons.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(Banner, {\n children: _jsx(_components.p, {\n children: \"It is an accessible practice to include either alt-text or associated on-screen text with an icon.\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"http://web-accessibility.carnegiemuseums.org/content/buttons/\",\n children: \"Accessibility guidelines on links, images and other clickable elements\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"medium-term-wins\",\n children: \"Medium-term Wins\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Medium-term wins are modifications that take a bit more time to implement in your application than \", _jsx(_components.a, {\n href: \"#quick-wins\",\n children: \"accessibility quick wins\"\n }), \". These are key, and we strongly recommend that you prioritize incorporating them into your application.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"navigation\",\n children: \"Navigation\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Structural presentation of a menu and its items i.e. in a list gives a good basis for assistive technologies to pick out menu items and serve corresponding functionality to assistive technology users. Coding menus semantically makes them adaptive to different scenarios i.e. different-size screens, varying zoom/ magnification levels and access via different assistive technologies.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Place your menu in one consistent area across all pages in your application\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Label your menus so they can be understood and differentiated easily\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Highlight the currently selected / active item in your menu using HTML or ARIA i.e.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"See the \", _jsx(_components.a, {\n href: \"#order-and-grouping\",\n children: \"Order and Grouping section\"\n }), \" for best practices around grouping and ordering menu items\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(Banner, {\n children: _jsxs(_components.p, {\n children: [\"One of the best ways to check how accessible your navigation is, is to take on the \", _jsx(_components.a, {\n href: \"https://nomouse.org\",\n children: \"keyboard / no-mouse challenge\"\n }), \" for web applications or the screen-reader challenge for mobile applications i.e. use your application with a screen-reader only\"]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"order-and-grouping\",\n children: \"Order and Grouping\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Grouping related items in your application makes it easier for screen readers to keep track of progress and overarching context as a user navigates the application. Any items that are grouped visually should also be represented similarly semantically.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Ordered and unordered lists\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Use unordered lists for menu items where content can be accessed and consumed in random order, and\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Use ordered lists for menu items where systemic navigation matters\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Adhere to rules of lists\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Only have list tags (\", _jsx(_components.code, {\n children: \"\u003cli\u003e\"\n }), \") as children of your ordered and unordered lists. Avoid adding other types of elements to them.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://developer.android.com/guide/topics/ui/accessibility/principles#content-groups\",\n children: \"Principles of improving app accessibility in Android - groups of related content\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"semantics\",\n children: \"Semantics\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Semantic elements are those that provide context about the nature of content held within them and include elements like \", _jsx(_components.code, {\n children: \"\u003cheader\u003e\"\n }), \", \", _jsx(_components.code, {\n children: \"\u003ccite\u003e\"\n }), \", \", _jsx(_components.code, {\n children: \"\u003csection\u003e\"\n }), \", \", _jsx(_components.code, {\n children: \"\u003cp\u003e\"\n }), \", \", _jsx(_components.code, {\n children: \"\u003cfooter\u003e\"\n }), \", \", _jsx(_components.a, {\n href: \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element\",\n children: \"and more\"\n }), \" while non-semantic elements like \", _jsx(_components.code, {\n children: \"\u003cdiv\u003e\"\n }), \" and \", _jsx(_components.code, {\n children: \"\u003cspan\u003e\"\n }), \"do not provide context about what to expect in them.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"The four properties that constitute a semantic element are\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"name (an element’s label),\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"role (describes an element’s function like input or button),\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"value (complements the role i.e. input=text) and\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"state (communicates how elements are configured i.e. enabled, collapsed, etc).\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Swap out all your non-semantic elements like \", _jsx(_components.code, {\n children: \"\u003cdiv\u003e\"\n }), \" and \", _jsx(_components.code, {\n children: \"\u003cspan\u003e\"\n }), \" for semantic elements\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://medium.com/google-developer-experts/state-descriptions-on-android-b2029283871f\",\n children: \"State Descriptions on Android\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"intensive-wins\",\n children: \"Intensive Wins\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Intensive wins are modifications that take a bit more time to implement in your application than accessibility \", _jsx(_components.a, {\n href: \"#quick-wins\",\n children: \"quick wins\"\n }), \" and \", _jsx(_components.a, {\n href: \"#medium-term-wins\",\n children: \"medium-term wins\"\n }), \". These are key, and we strongly recommend that you prioritize incorporating them into your application.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"master-assistive-technologies\",\n children: \"Master Assistive Technologies\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Pick an assistive technology and get good at it, for example, talkback technology like voice-over or NVDA which is Open Source software (OSS) with lots of free examples.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"master-states-in-accessibility\",\n children: \"Master States in Accessibility\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"As mentioned in \", _jsx(_components.a, {\n href: \"#semantics\",\n children: \"the Semantics section\"\n }), \", \", _jsx(_components.code, {\n children: \"states\"\n }), \" are a semantic property assigned to elements that specify how content in an element is configured i.e. may be checked, enabled, expanded, hidden, current etc.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"States and properties are categorized in four: (i) drag and drop attributes, (ii) live-region attributes, (iii) widget attributes and (iv) relationship attributes.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"A11y Actions:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"When defining elements, although optional, it is best practice to announce state for the sake of assistive technology users.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Resources:\"\n })\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://www.w3.org/TR/wai-aria/#states_and_properties\",\n children: \"WCAG on states and properties\"\n })\n }), \"\\n\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{"title":"Accessibility Guidelines"},"scope":{}},"pageTitle":"Accessibility Guidelines","hideFromSearch":false,"policyReferences":{"StandalonePreview":{"title":"Spotify Audio preview clips can not be a standalone service","description":"Audio Preview Clips may not be offered as a standalone service or product.","url":"/policy/#ii-respect-content-and-creators:~:text=You must not offer metadata,as a standalone service or product."},"ContentAlteration":{"title":"Keep audio content in its original form","description":"The Spotify Platform can not be used to develop applications that alter Spotify Content.","url":"/policy/#iii-some-prohibited-applications:~:text=Do not permit any device or system to segue,."},"Synchronization":{"title":"Do not synchronize Spotify content","description":"You may not synchronize any sound recordings with any visual media, including any advertising, film, television program, slideshow, video, or similar content","url":"/policy/#iii-some-prohibited-applications:~:text=Do not synchronize any sound recordings with any visual media,."},"Downloading":{"title":"Spotify content may not be downloaded","description":"You may not facilitate downloads of Spotify content or enable “stream ripping”","url":"/terms/#section-iv-restrictions:~:text=facilitating,make permanent copies of Spotify Content."},"VisualAlteration":{"title":"Keep visual content in its original form","description":"Spotify visual content must be kept in its original form, e.g. you can not crop album artwork, overlay images on album artwork, place a brand/logo on album artwork","url":"/documentation/design#using-our-content"},"CommercialStreaming":{"title":"Streaming applications may not be commercial","description":"The Spotify Platform can not be used to develop commercial streaming integrations.","url":"/policy/#iv-streaming-and-commercial-use:~:text=Commercial use restrictions,Streaming SDA itself."},"Attribution":{"title":"Ensure content attribution","description":"Please keep in mind that metadata, cover art and artist images must be accompanied by a link back to the applicable artist, album, track, or playlist on the Spotify Service. You must also attribute content from Spotify with the logo.","url":"/policy/#ii-respect-content-and-creators:~:text=If you display any Spotify Content,on the Spotify Service."},"Broadcasting":{"title":"Spotify content may not be broadcasted","description":"The Spotify Platform can not be used for non-interactive broadcasting.","url":"/policy/#iii-some-prohibited-applications:~:text=Do not create any product or service which includes any non,several simultaneous listeners."},"MultipleIntegrations":{"title":"Spotify data may not be transferred","description":"Please keep in mind that you can not enable transfers of data to another service, except for the purpose of enabling a user to transfer their personal data or the metadata of the user's playlists to another service.","url":"/policy/#iii-some-prohibited-applications:~:text=Do not build an SDA that enables the transfer of data,."},"MachineLearning":{"title":"Spotify content may not be used to train machine learning or AI model","description":"Please note that you can not use the Spotify Platform or any Spotify Content to train a machine learning or AI model or otherwise ingesting Spotify Content into a machine learning or AI model.","url":"/terms#section-iv-restrictions:~:text=Misuse%20of%20the,or%20AI%20model%3B"}},"padded":false,"category":"accessibility","referenceLinks":null,"mobileNavInitOpen":false},"__N_SSG":true},"page":"/documentation/[...mdx]","query":{"mdx":["accessibility"]},"buildId":"k7S4T2NbEJa5-IWq8XogG","assetPrefix":"https://developer-assets.spotifycdn.com","isFallback":false,"gsp":true,"appGip":true,"scriptLoader":[]}</script></body></html>