https://enterprise-accessibility.vercel.app/_next/static/chunks/pa…ssible-name-computation-56c715c173f19b5a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[231],{7614:function(e,i,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation",function(){return s(642)}])},6525:function(e,i,s){"use strict";var n=s(5893);let t={docsRepositoryBase:"https://github.com/marcysutton/FEM-enterprise-accessibility",project:{link:"https://github.com/marcysutton/FEM-enterprise-accessibility"},logo:()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("img",{alt:"",src:"/universal-access-icon.png",height:"25",width:"25",style:{marginRight:"1em"}}),(0,n.jsx)("h1",{children:"Enterprise Accessibility"})]}),head:function(e){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("meta",{charSet:"utf-8"}),(0,n.jsx)("meta",{name:"theme-color",content:"#000"}),(0,n.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,n.jsx)("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/universal-access-icon.png"}),(0,n.jsx)("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/universal-access-icon.png"}),(0,n.jsx)("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/universal-access-icon.png"}),(0,n.jsx)("link",{rel:"mask-icon",href:"/universal-access-icon.png",color:"#000000"}),(0,n.jsx)("link",{rel:"shortcut icon",href:"/universal-access-icon.png"}),(0,n.jsx)("meta",{name:"msapplication-TileColor",content:"#000000"}),(0,n.jsx)("meta",{name:"description",content:"Website created for the FrontendMasters course on Enterprise Accessibility by Marcy Sutton Todd"}),(0,n.jsx)("meta",{name:"author",content:"Marcy Sutton Todd"}),(0,n.jsx)("meta",{property:"og:url",content:"https://enterprise-accessibility.vercel.app/topics"}),(0,n.jsx)("meta",{property:"og:type",content:"website"}),(0,n.jsx)("meta",{property:"og:locale",content:"en_US"}),(0,n.jsx)("meta",{property:"og:image:width",content:"1200"}),(0,n.jsx)("meta",{property:"og:image:height",content:"692"}),(0,n.jsx)("meta",{property:"og:title",content:"".concat(e.title," | Enterprise Accessibility")}),(0,n.jsx)("meta",{property:"og:description",content:"Website created for the FrontendMasters course on Enterprise Accessibility by Marcy Sutton Todd"}),(0,n.jsx)("meta",{property:"og:image",content:"https://enterprise-accessibility.vercel.app/ogimage1.png"}),(0,n.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,n.jsx)("meta",{name:"twitter:site",content:"@marcysutton"}),(0,n.jsx)("meta",{name:"twitter:creator",content:"@marcysutton"})]})},sidebar:{defaultMenuCollapseLevel:1,autoCollapse:!0},darkMode:!0,footer:{text:"".concat(new Date().getFullYear()," \xa9 Marcy Sutton Todd")},nextThemes:{defaultTheme:"dark"},useNextSeoProps:()=>({titleTemplate:"%s – Enterprise Accessibility"})};i.Z=t},642:function(e,i,s){"use strict";s.r(i),s.d(i,{__toc:function(){return c}});var n=s(5893),t=s(2673),a=s(6031),o=s(6525);s(9966);var r=s(2643);let c=[{depth:2,value:"Writing accessible names",id:"writing-accessible-names"},{depth:2,value:"How are accessible names chosen?",id:"how-are-accessible-names-chosen"},{depth:2,value:"What are accessible descriptions?",id:"what-are-accessible-descriptions"},{depth:2,value:"Prefer visible text",id:"prefer-visible-text"},{depth:2,value:"Chrome DevTools accessibility inspector",id:"chrome-devtools-accessibility-inspector"}];function l(e){let i=Object.assign({h1:"h1",p:"p",strong:"strong",a:"a",h2:"h2",code:"code",pre:"pre",span:"span"},(0,r.a)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.h1,{children:"ARIA and Accessible Name Computation"}),"\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"ARIA, or Accessible Rich Internet Applications"}),", is a specification for a standard set of attributes for plumbing accessibility information through HTML."]}),"\n",(0,n.jsxs)(i.p,{children:["ARIA includes one concept with a big impact on HTML markup: ",(0,n.jsx)(i.a,{href:"https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/",children:"accessible naming"}),"."]}),"\n",(0,n.jsx)(i.p,{children:"HTML form controls have names. Links and buttons have names. Section elements and tables have names, as well as other elements. (DIV elements do not.)"}),"\n",(0,n.jsx)(i.h2,{id:"writing-accessible-names",children:"Writing accessible names"}),"\n",(0,n.jsxs)(i.p,{children:["There are multiple ways to add a name to an element depending on the role, including text content, the ",(0,n.jsx)(i.co

1de,{children:"<label>"})," form element, ",(0,n.jsx)(i.code,{children:"aria-label"})," and ",(0,n.jsx)(i.code,{children:"aria-labelledby"})," attributes, and even ",(0,n.jsx)(i.code,{children:"title"})," and ",(0,n.jsx)(i.code,{children:"placeholder"}),"."]}),"\n",(0,n.jsx)(i.p,{children:"But there can only be one name. In the case of multiple attributes and child content, which thing wins?"}),"\n",(0,n.jsx)(i.h2,{id:"how-are-accessible-names-chosen",children:"How are accessible names chosen?"}),"\n",(0,n.jsxs)(i.p,{children:["A document called ",(0,n.jsx)(i.a,{href:"https://www.w3.org/TR/accname-1.2/",children:"Accessible Name and Description Computation"})," standardizes this process so we don’t encounter absolute chaos across platforms."]}),"\n",(0,n.jsx)(i.pre,{"data-language":"html","data-theme":"default",children:(0,n.jsxs)(i.code,{"data-language":"html","data-theme":"default",children:[(0,n.jsxs)(i.span,{className:"line",children:[(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:"label"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,n.jsx)(i.span,{className:"line",children:(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:"    Zip Code"})}),"\n",(0,n.jsxs)(i.span,{className:"line",children:[(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:"    <"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:"input"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-function)"},children:"aria-label"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"zip-code"'}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-function)"},children:"placeholder"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"00000"'}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-function)"},children:"title"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Zip code"'}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-function)"},children:"type"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"number"'}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:" />"})]}),"\n",(0,n.jsxs)(i.span,{className:"line",children:[(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:"</"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-token-string-expression)"},children:"label"}),(0,n.jsx)(i.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})}),"\n",(0,n.jsxs)(i.p,{children:["The Accesible Naming spec outlines how the order should go for non-hidden elements that allow naming: ",(0,n.jsx)(i.code,{children:"aria-labelledby"}),", then ",(0,n.jsx)(i.code,{children:"aria-label"}),", then the ",(0,n.jsx)(i.code,{children:"title"}),"/",(0,n.jsx)(i.code,{children:"placeholder"})," attributes or a form ",(0,n.jsx)(i.code,{children:"<label>"})," element, then certain child controls, then text content (if I read it correctly)."]}),"\n",(0,n.jsx)(i.h2,{id:"what-are-accessible-descriptions",children:"What are accessible descriptions?"}),"\n",(0,n.jsxs)(i.p,{children:["Descriptions with ",(0,n.jsx)(i.code,{children:"aria-describedby"})," and ",(0,n.jsx)(i.code,{children:"title"}),", like names, are announced in screen readers. But they come after a slight delay and are configurable. So you can’t always count on users hearing descriptions."]}),"\n",(0,n.jsxs)(i.p,{children:["Accessible names and descriptions are also mentioned in the ",(0,n.jsx)(i.a,{href:"https://www.w3.org/TR/wai-aria-1.2/#namecalculation",children:"main ARIA specification"}),". This is geeky and informative accessibility stuff that any developer should know!"]}),"\n",(0,n.jsx)(i.h2,{id:"prefer-visible-text",children:"Prefer visible text"}),"\n",(0,n.jsxs)(i.p,{children:["It’s easy to slap an ",(0,n.jsx)(i.co

1de,{children:"aria-label"})," onto something and call it good. Instead, you should prioritize visible text whenever possible so users can match up their visual experience with what they hear (or touch) from Assistive Technology."]}),"\n",(0,n.jsxs)(i.p,{children:["Often, ",(0,n.jsx)(i.code,{children:"aria-label"})," attributes get out of date when content changes and they don’t accurately represent what’s visible on screen. There is a WCAG success criterion related to this issue: ",(0,n.jsx)(i.a,{href:"https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html",children:"Label in Name"}),"."]}),"\n",(0,n.jsx)(i.h2,{id:"chrome-devtools-accessibility-inspector",children:"Chrome DevTools accessibility inspector"}),"\n",(0,n.jsx)(i.p,{children:"My favorite tool to visualize accessible names and descriptions is Chrome DevTools. There is an Accessibility Inspector near the Styles pane of the Elements tab. It shows ”which one wins” in a multiple-attribute-and-text-content scenario, which is super helpful."}),"\n",(0,n.jsx)("figure",{className:"my-6",children:(0,n.jsx)("img",{src:"/devtools-accessible-name.png",alt:"Chrome DevTools Accessibility Inspector on an icon button on StackBlitz"})}),"\n",(0,n.jsx)(i.p,{children:"Or it will show that your form input doesn’t have an accessible name like you thought it did, because the id attribute on it isn’t matching up with a label. I wish we’d had this tool when I started as a web developer!"})]})}let d={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:i}=Object.assign({},(0,r.a)(),e.components);return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(l,{...e})}):l(e)},pageOpts:{filePath:"pages/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation.mdx",route:"/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation",pageMap:[{kind:"Meta",data:{"*":{type:"page"},topics:{title:"All Topics"}}},{kind:"Folder",name:"topics",route:"/topics",children:[{kind:"Meta",data:{index:"Home",introduction:"Introduction",mvps:"Minimum Viable Products","accessible-uis":"Accessible UIs","accessible-naming-screen-readers":"Accessible Naming & Screen Reader Concerns","a11y-in-js-apps":"Accessibility in JS Apps","test-automation":"Test Automation for Accessibility","org-skill-building":"Organizational Skill-Building"}},{kind:"Folder",name:"a11y-in-js-apps",route:"/topics/a11y-in-js-apps",children:[{kind:"Meta",data:{"client-side-routing":"Client-Side Routing","managing-focus":"Managing Focus in Interactive Components","semantics-and-ARIA":"Semantics & ARIA",frameworks:"What to Look for in a Framework","hybrid-apps":"Hybrid App 101","exercise-4":"Exercise 4"}},{kind:"MdxPage",name:"client-side-routing",route:"/topics/a11y-in-js-apps/client-side-routing"},{kind:"MdxPage",name:"exercise-4",route:"/topics/a11y-in-js-apps/exercise-4"},{kind:"MdxPage",name:"frameworks",route:"/topics/a11y-in-js-apps/frameworks"},{kind:"MdxPage",name:"hybrid-apps",route:"/topics/a11y-in-js-apps/hybrid-apps"},{kind:"MdxPage",name:"managing-focus",route:"/topics/a11y-in-js-apps/managing-focus"},{kind:"MdxPage",name:"semantics-and-ARIA",route:"/topics/a11y-in-js-apps/semantics-and-ARIA"}]},{kind:"Folder",name:"accessible-naming-screen-readers",route:"/topics/accessible-naming-screen-readers",children:[{kind:"MdxPage",name:"ARIA-accessible-name-computation",route:"/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation"},{kind:"Meta",data:{"ARIA-accessible-name-computation":"ARIA & Accessible Name Computation","the-accessibility-tree":"The Accessibility Tree","testing-a-solution":"Testing an ARIA Solution","visual-nonvisual-experience":"Visual and Non-Visual Experience","screen-reader-commands-interaction-modes":"Screen Reader Commands & Interaction Modes","exercise-3":"Exercise 3"}},{kind:"MdxPage",name:"exercise-3",route:"/topics/accessible-naming-screen-readers/exercise-3"},{kind:"MdxPage",name:"screen-reader-commands-interaction-modes",route:"/topics/accessible-naming-screen-readers/screen-reader-commands-interaction-modes"},{kind:"MdxPage",name:"testing-a-solution",route:"/topics/accessible-naming-screen-readers/testing-a-solution"},{kind:"MdxPage",name:"the-accessibility-tree",route:"/topics/accessible-naming-screen-readers/the-accessibility-tree"},{kind:"MdxPage",name:"visual-nonvisual-experience",route:"/topics/accessible-naming-screen-readers/visual-nonvisual-experience"}]},{kind:"Folder",name:"accessible-uis",route:"/topics/accessible-uis",children:[{kind:"Meta",data:{introduction:"The Foundations Apply","your-spidey-senses":"What Should Make Your Spidey Senses Go Off","dont-be-a-div-button-creator":"Don’t Be a DIV Button Creator","visibility-methods":"Visibility Methods","how-to-test-components":"How to Test UI Components","exercise-2":"Exercise 2"}},{kind:"MdxPage",name:"dont-be-a-div-button-creator",route:"/topics/accessible-uis/dont-be-a-div-button-creator"},{kind:"MdxPage",name:"exercise-2",route:"/topics/accessible-uis/exercise-2"},{kind:"MdxPage",name:"how-to-test-components",route:"/topics/accessible-uis/how-to-test-components"},{kind:"MdxPage",name:"introduction",route:"/topics/accessible-uis/introduction"},{kind:"MdxPage",name:"visibility-methods",route:"/topics/accessible-uis/visibility-methods"},{kind:"MdxPage",name:"your-spidey-senses",route:"/topics/accessible-uis/your-spidey-senses"}]},{kind:"MdxPage",name:"index",route:"/topics"},{kind:"Folder",name:"introduction",route:"/topics/introduction",children:[{kind:"Meta",data:{overview:"Overview","who-is-a11y-for":"Who is Accessibility For?","reasons-to-know":"Reasons to Know This Material","windows-users":"Windows User Setup",examples:"Examples of Access/Inaccess"}},{kind:"MdxPage",name:"examples",route:"/topics/introduction/examples"},{kind:"MdxPage",name:"overview",route:"/topics/introduction/overview"},{kind:"MdxPage",name:"reasons-to-know",route:"/topics/introduction/reasons-to-know"},{kind:"MdxPage",name:"who-is-a11y-for",route:"/topics/introduction/who-is-a11y-for"},{kind:"MdxPage",name:"windows-users",route:"/topics/introduction/windows-users"}]},{kind:"Folder",name:"mvps",route:"/topics/mvps",children:[{kind:"Meta",data:{"how-do-mvps":"How do MVPs apply to A

1ccessibility","shift-left":"Shift Left","a11y-personas":"Accessibility Personas","exercise-1":"Exercise 1"}},{kind:"MdxPage",name:"a11y-personas",route:"/topics/mvps/a11y-personas"},{kind:"MdxPage",name:"exercise-1",route:"/topics/mvps/exercise-1"},{kind:"MdxPage",name:"how-do-mvps",route:"/topics/mvps/how-do-mvps"},{kind:"MdxPage",name:"shift-left",route:"/topics/mvps/shift-left"}]},{kind:"Folder",name:"org-skill-building",route:"/topics/org-skill-building",children:[{kind:"Meta",data:{"tips-for-building-knowledge":"Tips for Building Institutional Knowledge","working-with-larger-codebases":"Working with Larger Codebases","inclusive-workplaces":"Inclusive Hiring & Workplaces","centering-disability":"Centering People with Disabilities","definition-of-done":"The Definition of Done","exercise-6":"Exercise 6"}},{kind:"MdxPage",name:"centering-disability",route:"/topics/org-skill-building/centering-disability"},{kind:"MdxPage",name:"definition-of-done",route:"/topics/org-skill-building/definition-of-done"},{kind:"MdxPage",name:"exercise-6",route:"/topics/org-skill-building/exercise-6"},{kind:"MdxPage",name:"inclusive-workplaces",route:"/topics/org-skill-building/inclusive-workplaces"},{kind:"MdxPage",name:"tips-for-building-knowledge",route:"/topics/org-skill-building/tips-for-building-knowledge"},{kind:"MdxPage",name:"working-with-larger-codebases",route:"/topics/org-skill-building/working-with-larger-codebases"}]},{kind:"Folder",name:"test-automation",route:"/topics/test-automation",children:[{kind:"Meta",data:{"how-guidelines-fit":"How Guidelines Fit into Automation","approaches-for-testing":"Approaches for Testing","accessibility-and-ci":"Continuous Integration (CI)","using-a-test-API":"Using an A11y Testing API","exercise-5":"Exercise 5"}},{kind:"MdxPage",name:"accessibility-and-ci",route:"/topics/test-automation/accessibility-and-ci"},{kind:"MdxPage",name:"approaches-for-testing",route:"/topics/test-automation/approaches-for-testing"},{kind:"MdxPage",name:"exercise-5",route:"/topics/test-automation/exercise-5"},{kind:"MdxPage",name:"how-guidelines-fit",route:"/topics/test-automation/how-guidelines-fit"},{kind:"MdxPage",name:"using-a-test-API",route:"/topics/test-automation/using-a-test-API"}]}]}],flexsearch:{codeblocks:!0},title:"ARIA and Accessible Name Computation",headings:c},pageNextRoute:"/topics/accessible-naming-screen-readers/ARIA-accessible-name-computation",nextraLayout:a.ZP,themeConfig:o.Z};i.default=(0,t.j)(d)}},function(e){e.O(0,[854,774,888,179],function(){return e(e.s=7614)}),_N_E=e.O()}]);