"}]," for SVG, ",["$","code","code-5",{"children":"value"}]," for buttons of type submit."]}],"\n"]}],"\n"]}],"\n",["$","li","li-3",{"children":[["$","strong","strong-0",{"children":"Name from content"}]," for roles that allow it (button, link, heading, tab, menuitem): the element's own text, including descendant text and image alt text."]}],"\n",["$","li","li-4",{"children":[["$","strong","strong-0",{"children":[["$","code","code-0",{"children":"title"}]," attribute"]}]," (and ",["$","code","code-0",{"children":"placeholder"}]," in some cases) as a last-resort fallback. Both are unreliable: ",["$","code","code-1",{"children":"title"}]," is not shown to touch or keyboard users, and ",["$","code","code-2",{"children":"placeholder"}]," disappears on typing, so do not depend on them."]}],"\n"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-html","children":"<button aria-label=\"Close dialog\"><svg aria-hidden=\"true\">...</svg></button>\n<h2 id=\"t\">Billing</h2>\n<section aria-labelledby=\"t\">...</section>\n<input id=\"e\"> <label for=\"e\">Email</label>\n"}]}],"\n",["$","p","p-2",{"children":["$","strong","strong-0",{"children":"Practical rules"}]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["Prefer a ",["$","strong","strong-0",{"children":"visible text label"}],"; it also helps voice-control users, who say what they see (WCAG 2.5.3 Label in Name: the accessible name should contain the visible text)."]}],"\n",["$","li","li-1",{"children":["Use ",["$","code","code-0",{"children":"aria-label"}]," for icon-only controls, ",["$","code","code-1",{"children":"aria-labelledby"}]," to reuse visible text."]}],"\n",["$","li","li-2",{"children":[["$","code","code-0",{"children":"aria-label"}]," and ",["$","code","code-1",{"children":"aria-labelledby"}]," ","$L1b"," content-derived names, so a label that differs from the visible text confuses users."]}],"\n","$L1c","\n","$L1d","\n"]}]],"keyPoints":["$L1e","$L1f","$L20","$L21","$L22"],"followUps":["$L23","$L24","$L25"]}}] 1b:["$","strong","strong-0",{"children":"replace"}] 1c:["$","li","li-3",{"children":"Names must be unique enough where several of the same kind exist (\"Delete Alice\" not just \"Delete\")."}] 1d:["$","li","li-4",{"children":"Inspect the result in the DevTools Accessibility pane under \"Computed Properties\"."}] 1e:[["$","span","p-0",{"children":"aria-labelledby wins over aria-label"}]] 1f:[["$","span","p-0",{"children":"Then native labels (label, alt, legend) and content for suitable roles"}]] 20:[["$","span","p-0",{"children":"title and placeholder are weak fallbacks"}]] 21:[["$","span","p-0",{"children":"The name should include the visible label text"}]] 22:[["$","span","p-0",{"children":"Inspect the computed name in DevTools"}]] 23:[["$","span","p-0",{"children":"What does an icon-only button need?"}]] 24:[["$","span","p-0",{"children":"Why is placeholder not a label?"}]] 25:[["$","span","p-0",{"children":"How does aria-labelledby differ from aria-describedby?"}]] 14:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","2",{"name":"theme-color","content":"#eceeea","media":"(prefers-color-scheme: light)"}],["$","meta","3",{"name":"theme-color","content":"#0f1115","media":"(prefers-color-scheme: dark)"}]] 26:I[27201,["$6"],"IconMark"] 11:null 17:[["$","title","0",{"children":"How is an element's accessible name computed? · Onsite"}],["$","meta","1",{"name":"description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","2",{"name":"application-name","content":"Onsite"}],["$","link","3",{"rel":"canonical","href":"https://onsite.akashkmt.in/q/how-is-an-element-s-accessible-name-computed"}],["$","meta","4",{"property":"og:title","content":"How is an element's accessible name computed? · Onsite"}],["$","meta","5",{"property":"og:description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","6",{"property":"og:site_name","content":"Onsite"}],["$","meta","7",{"property":"og:locale","content":"en_US"}],["$","meta","8",{"property":"og:image","content":"https://onsite.akashkmt.in/opengraph-image.png?opengraph-image.1iysd6qzu9_tl.png"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Onsite: Build your interview instinct. Solve deliberately. Review consistently. Walk in prepared."}],["$","meta","13",{"property":"og:type","content":"website"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"How is an element's accessible name computed? · Onsite"}],["$","meta","16",{"name":"twitter:description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","17",{"name":"twitter:image","content":"https://onsite.akashkmt.in/opengraph-image.png?opengraph-image.1iysd6qzu9_tl.png"}],["$","meta","18",{"name":"twitter:image:alt","content":"Onsite: Build your interview instinct. Solve deliberately. Review consistently. Walk in prepared."}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/icon.svg?icon.2vc9zcc_m9zfs.svg","sizes":"any","type":"image/svg+xml"}],["$","link","23",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.24e_wq7p194ku.png","sizes":"180x180","type":"image/png"}],["$","$L26","24",{}]] </article></body></html>

1:"$Sreact.fragment" 2:"/_next/static/immutable/chunks/0jy2z3fery2ch.js" 3:"/_next/static/immutable/chunks/3ihqqoh7llwub.js" 4:I[40253,["$2","$3"],"Sidebar"] 5:I[40253,["$2","$3"],"TopBar"] 6:"/_next/static/immutable/chunks/00z4pmesk2f4f.js" 7:I[39756,["$6"],"default"] 8:I[37457,["$6"],"default"] 9:I[22016,["$2","$3"],""] f:I[97367,["$6"],"OutletBoundary"] 10:"$Sreact.suspense" 12:"ViewportBoundary" 13:I[97367,["$6"],"$12"] 15:"MetadataBoundary" 16:I[97367,["$6"],"$15"] 18:I[68027,["$2","$3"],"default",1] :HL["/_next/static/immutable/chunks/24le_c55ffc0s.css","style"] :HL["/_next/static/immutable/media/03fc1b4a8d284b5e-s.p.45487z7p3r8wm.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/media/99e609270109b47d-s.p.1dgcou5jor5q_.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/media/effe91970fc4db64-s.p.28xcb7557rbh2.woff2","font",{"crossOrigin":"","type":"font/woff2"}] b:X d:[["children",{"s":"__PAGE__","h":512,"d":{"r":["$","$1","c",{"children":["$Le",[["$","script","script-0",{"src":"/_next/static/immutable/chunks/40jgv9jmacqw3.js","async":true,"nonce":"$undefined"}]],["$","$Lf",null,{"children":["$","$10",null,{"name":"Next.MetadataOutlet","children":"$@11"}]}]]}],"p":false,"v":null}}]] c:[["children",{"s":{"n":"slug","t":"d","k":"how-is-an-element-s-accessible-name-computed","s":[]},"h":66048,"d":{"r":["$","$1","c",{"children":[null,["$","$L7",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$b"},"c":"$Qd"}]] a:[["children",{"s":"q","h":131584,"d":{"r":["$","$1","c",{"children":[null,["$","$L7",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],"p":false,"v":"$b"},"c":"$Qc"}]] 0:{"P":null,"c":["","q","how-is-an-element-s-accessible-name-computed"],"q":"","i":false,"t":{"t":{"s":"","h":131600,"d":{"r":["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/24le_c55ffc0s.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/0jy2z3fery2ch.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/3ihqqoh7llwub.js","async":true,"nonce":"$undefined"}]],["$","html",null,{"lang":"en","className":"OhBwPW_variable zfTmVG_variable","suppressHydrationWarning":true,"children":[["$","head",null,{"children":["$","script",null,{"dangerouslySetInnerHTML":{"__html":"(function(){var d=document.documentElement,m=matchMedia(\"(prefers-color-scheme: dark)\");function g(k){try{return localStorage.getItem(k)}catch(e){return null}}var p=g(\"rounds-theme\");function a(v){if(v===\"light\"||v===\"dark\")p=v;d.dataset.theme=p===\"light\"||p===\"dark\"?p:(m.matches?\"dark\":\"light\")}a();window.__applyTheme=a;m.addEventListener(\"change\",function(){a()});if(g(\"rounds-nav\")===\"collapsed\")d.dataset.nav=\"collapsed\";[\"split\",\"results\"].forEach(function(k){var v=g(\"rounds-\"+k);if(v)d.style.setProperty(\"--\"+k,v)})})()"}}]}],["$","body",null,{"children":[["$","a",null,{"href":"#main","className":"sr-only rounded-md bg-card px-3 py-2 text-[13px] focus:not-sr-only focus:fixed focus:left-2 focus:top-2 focus:z-50","children":"Skip to content"}],["$","div",null,{"className":"md:flex","children":[["$","$L4",null,{}],["$","$L5",null,{}],["$","main",null,{"id":"main","className":"min-h-[calc(100dvh-56px)] min-w-0 flex-1 border-line bg-canvas md:min-h-dvh md:border-l","children":["$","$L7",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","div",null,{"className":"mx-auto max-w-[560px] px-4 py-20 text-center","children":[["$","h1",null,{"className":"text-[22px] font-semibold tracking-[-0.01em]","children":"Page not found"}],["$","p",null,{"className":"mt-2 text-fg-2","children":"The link may point to a question that was renamed or removed."}],["$","div",null,{"className":"mt-6 flex justify-center gap-2","children":[["$","$L9",null,{"href":"/questions","className":"control-motion inline-flex h-9 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-[13px] font-medium transition-colors duration-150 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 primary-control bg-accent text-accent-fg hover:bg-accent-hover ","children":"Browse questions"}],["$","$L9",null,{"href":"/","className":"control-motion inline-flex h-9 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-[13px] font-medium transition-colors duration-150 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 border border-line bg-card text-fg hover:bg-sunken ","children":"Home"}]]}]]}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]]}]]}]]}]]}],"p":false,"v":null},"c":"$Qa"},"h":{"r":["$","$1","h",{"children":[null,["$","$L13",null,{"children":"$L14"}],["$","$L16",null,{"children":[["$","div",null,{"hidden":true,"children":["$","$10",null,{"name":"Next.Metadata","children":"$L17"}]}],null]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}],"p":false,"v":null}},"m":"$undefined","G":["$18",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/24le_c55ffc0s.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"S":true,"r":"$undefined","s":"$undefined","a":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"kmZbxCnzE70S5KbjhA-R5"} 19:"/_next/static/immutable/chunks/40jgv9jmacqw3.js" 1a:I[53030,["$2","$3","$19"],"AnswerQuestion"] b:C e:["$","$L1a",null,{"q":{"id":"FE-286","slug":"how-is-an-element-s-accessible-name-computed","track":"frontend","topic":"Accessibility","title":"How is an element's accessible name computed?","difficulty":"Medium","priority":"P3","type":"Concept","notes":"aria-labelledby, aria-label, label or content, alt, title fallback","kind":"answer","langs":[]},"trackName":"Frontend","nav":{"prev":{"slug":"how-do-you-test-a-react-app-for-accessibility","title":"How do you test a React app for accessibility?"},"next":{"slug":"how-would-you-make-an-autocomplete-combobox-accessible","title":"How would you make an autocomplete combobox accessible?"},"pos":11,"total":12},"md":{"statement":null,"hints":[],"answer":[["$","p","p-0",{"children":["The accessible name is the text a screen reader announces for an element (\"Search, button\"). Browsers compute it with the ",["$","strong","strong-0",{"children":"Accessible Name and Description Computation"}]," algorithm, which checks sources in a fixed priority order and stops at the first one that gives a non-empty result."]}],"\n",["$","p","p-1",{"children":["$","strong","strong-0",{"children":"Simplified order"}]}],"\n",["$","ol","ol-0",{"children":["\n",["$","li","li-0",{"children":[["$","strong","strong-0",{"children":["$","code","code-0",{"children":"aria-labelledby"}]}],": names from the referenced elements (by id), even if hidden. Highest priority."]}],"\n",["$","li","li-1",{"children":[["$","strong","strong-0",{"children":["$","code","code-0",{"children":"aria-label"}]}],": the attribute string."]}],"\n",["$","li","li-2",{"children":[["$","strong","strong-0",{"children":"Native label mechanism"}]," for the element type:","\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":[["$","code","code-0",{"children":""}]," or a wrapping ",["$","code","code-1",{"children":""}]," for form controls."]}],"\n",["$","li","li-1",{"children":[["$","code","code-0",{"children":"alt"}]," for ",["$","code","code-1",{"children":""}]," and ",["$","code","code-2",{"children":""}],"."]}],"\n",["$","li","li-2",{"children":[["$","code","code-0",{"children":""}]," for a ",["$","code","code-1",{"children":"

"}],", ",["$","code","code-2",{"children":""}]," for a table, ",["$","code","code-3",{"children":"

"}],", ",["$","code","code-4",{"children":""}]," for SVG, ",["$","code","code-5",{"children":"value"}]," for buttons of type submit."]}],"\n"]}],"\n"]}],"\n",["$","li","li-3",{"children":[["$","strong","strong-0",{"children":"Name from content"}]," for roles that allow it (button, link, heading, tab, menuitem): the element's own text, including descendant text and image alt text."]}],"\n",["$","li","li-4",{"children":[["$","strong","strong-0",{"children":[["$","code","code-0",{"children":"title"}]," attribute"]}]," (and ",["$","code","code-0",{"children":"placeholder"}]," in some cases) as a last-resort fallback. Both are unreliable: ",["$","code","code-1",{"children":"title"}]," is not shown to touch or keyboard users, and ",["$","code","code-2",{"children":"placeholder"}]," disappears on typing, so do not depend on them."]}],"\n"]}],"\n",["$","pre","pre-0",{"children":["$","code","code-0",{"className":"language-html","children":"<button aria-label=\"Close dialog\"><svg aria-hidden=\"true\">...</svg></button>\n<h2 id=\"t\">Billing</h2>\n<section aria-labelledby=\"t\">...</section>\n<input id=\"e\"> <label for=\"e\">Email</label>\n"}]}],"\n",["$","p","p-2",{"children":["$","strong","strong-0",{"children":"Practical rules"}]}],"\n",["$","ul","ul-0",{"children":["\n",["$","li","li-0",{"children":["Prefer a ",["$","strong","strong-0",{"children":"visible text label"}],"; it also helps voice-control users, who say what they see (WCAG 2.5.3 Label in Name: the accessible name should contain the visible text)."]}],"\n",["$","li","li-1",{"children":["Use ",["$","code","code-0",{"children":"aria-label"}]," for icon-only controls, ",["$","code","code-1",{"children":"aria-labelledby"}]," to reuse visible text."]}],"\n",["$","li","li-2",{"children":[["$","code","code-0",{"children":"aria-label"}]," and ",["$","code","code-1",{"children":"aria-labelledby"}]," ","$L1b"," content-derived names, so a label that differs from the visible text confuses users."]}],"\n","$L1c","\n","$L1d","\n"]}]],"keyPoints":["$L1e","$L1f","$L20","$L21","$L22"],"followUps":["$L23","$L24","$L25"]}}] 1b:["$","strong","strong-0",{"children":"replace"}] 1c:["$","li","li-3",{"children":"Names must be unique enough where several of the same kind exist (\"Delete Alice\" not just \"Delete\")."}] 1d:["$","li","li-4",{"children":"Inspect the result in the DevTools Accessibility pane under \"Computed Properties\"."}] 1e:[["$","span","p-0",{"children":"aria-labelledby wins over aria-label"}]] 1f:[["$","span","p-0",{"children":"Then native labels (label, alt, legend) and content for suitable roles"}]] 20:[["$","span","p-0",{"children":"title and placeholder are weak fallbacks"}]] 21:[["$","span","p-0",{"children":"The name should include the visible label text"}]] 22:[["$","span","p-0",{"children":"Inspect the computed name in DevTools"}]] 23:[["$","span","p-0",{"children":"What does an icon-only button need?"}]] 24:[["$","span","p-0",{"children":"Why is placeholder not a label?"}]] 25:[["$","span","p-0",{"children":"How does aria-labelledby differ from aria-describedby?"}]] 14:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","2",{"name":"theme-color","content":"#eceeea","media":"(prefers-color-scheme: light)"}],["$","meta","3",{"name":"theme-color","content":"#0f1115","media":"(prefers-color-scheme: dark)"}]] 26:I[27201,["$6"],"IconMark"] 11:null 17:[["$","title","0",{"children":"How is an element's accessible name computed? · Onsite"}],["$","meta","1",{"name":"description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","2",{"name":"application-name","content":"Onsite"}],["$","link","3",{"rel":"canonical","href":"https://onsite.akashkmt.in/q/how-is-an-element-s-accessible-name-computed"}],["$","meta","4",{"property":"og:title","content":"How is an element's accessible name computed? · Onsite"}],["$","meta","5",{"property":"og:description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","6",{"property":"og:site_name","content":"Onsite"}],["$","meta","7",{"property":"og:locale","content":"en_US"}],["$","meta","8",{"property":"og:image","content":"https://onsite.akashkmt.in/opengraph-image.png?opengraph-image.1iysd6qzu9_tl.png"}],["$","meta","9",{"property":"og:image:type","content":"image/png"}],["$","meta","10",{"property":"og:image:width","content":"1200"}],["$","meta","11",{"property":"og:image:height","content":"630"}],["$","meta","12",{"property":"og:image:alt","content":"Onsite: Build your interview instinct. Solve deliberately. Review consistently. Walk in prepared."}],["$","meta","13",{"property":"og:type","content":"website"}],["$","meta","14",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","15",{"name":"twitter:title","content":"How is an element's accessible name computed? · Onsite"}],["$","meta","16",{"name":"twitter:description","content":"aria-labelledby, aria-label, label or content, alt, title fallback. Medium concept question, Frontend track."}],["$","meta","17",{"name":"twitter:image","content":"https://onsite.akashkmt.in/opengraph-image.png?opengraph-image.1iysd6qzu9_tl.png"}],["$","meta","18",{"name":"twitter:image:alt","content":"Onsite: Build your interview instinct. Solve deliberately. Review consistently. Walk in prepared."}],["$","meta","19",{"name":"twitter:image:type","content":"image/png"}],["$","meta","20",{"name":"twitter:image:width","content":"1200"}],["$","meta","21",{"name":"twitter:image:height","content":"630"}],["$","link","22",{"rel":"icon","href":"/icon.svg?icon.2vc9zcc_m9zfs.svg","sizes":"any","type":"image/svg+xml"}],["$","link","23",{"rel":"apple-touch-icon","href":"/apple-icon.png?apple-icon.24e_wq7p194ku.png","sizes":"180x180","type":"image/png"}],["$","$L26","24",{}]] </article></body></html>