Ticketly’s event page has three buttons that all say “Book now”, a close button that shows “×”, a search button containing only an SVG magnifying glass, and a newsletter button whose name a developer set to “newsletter-cta” for analytics. In a screen reader’s list of buttons, the page reads: “Book now, Book now, Book now, times, button, newsletter-cta”. Every one of those is a naming problem, and you fix all of them by understanding one algorithm.
\nThe W3C’s Accessible Name and Description Computation spec defines exactly how a browser picks a name. Simplified, it tries these sources in order and takes the first one that produces text:
\naria-labelledby: the text of the referenced elements, joined with spaces, in the order of the ids.aria-label: the attribute’s string.<label> for form fields, alt for images, <legend> for a fieldset, <caption> for a table, <title> for an SVG.alt of images inside, minus anything with aria-hidden="true".title (and placeholder for inputs) as a last resort.Two consequences matter every day. First, ARIA naming overrides visible text: once you add aria-label, the button’s own content is ignored. Second, names don’t merge: if aria-labelledby exists, the element’s aria-label is skipped. The one twist: if aria-labelledby lists the element’s own id, that self-reference resolves to its aria-label when it has one, not to its content. You can check any result in the browser: Chrome’s Accessibility pane and Firefox’s Accessibility Inspector both show the computed name.
A button with only an icon has no text content, so it has no name, unless you give it one. Three options, in order of preference:
\n<!-- 1. Visible text next to the icon: best for everyone -->\n<button type=\"button\" class=\"search\">\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\">…</svg>\n Search\n</button>\n\n<!-- 2. Visually hidden text: the design stays icon-only -->\n<button type=\"button\" class=\"close\">\n <span aria-hidden=\"true\">×</span>\n <span class=\"visually-hidden\">Close banner</span>\n</button>\n\n<!-- 3. aria-label: fine, but invisible to translation tools that skip attributes -->\n<button type=\"button\" class=\"close\" aria-label=\"Close banner\">\n <span aria-hidden=\"true\">×</span>\n</button>Notice the aria-hidden="true" on the “×”. Without it, option 2’s name would be “× Close banner”, read by some screen readers as “times Close banner”.
Three “Book now” buttons are fine visually, because each sits in its card. In a list of buttons they are indistinguishable. You want names like “Book now, Friday pass” without changing the visible design. aria-labelledby can reference the button itself plus the card heading:
<article>\n <h3 id=\"fri-title\">Friday pass</h3>\n <button type=\"button\" id=\"fri-book\" aria-labelledby=\"fri-book fri-title\">Book now</button>\n</article>The name becomes “Book now Friday pass”. The visible words come first, which matters for 2.5.3 Label in Name (A): the accessible name must contain the visible label, and best practice is to start with it. Dina, who uses voice control, says “click Book now”; her software finds the three matches and numbers them for her to choose. If the name had been “Reserve Friday” she would have no way to click it by saying what she sees. That is exactly what was wrong with the “newsletter-cta” button: the visible word “Subscribe” isn’t in the name at all. Delete the aria-label and the content provides the right name again.
A description is secondary information, announced after the name and role, usually after a short pause. aria-describedby works like aria-labelledby but feeds the description instead:
<label for=\"promo\">Promo code</label>\n<input id=\"promo\" aria-describedby=\"promo-hint\">\n<p id=\"promo-hint\">Codes are 8 letters, for example HARBOUR8.</p>NVDA reads “Promo code, edit text, Codes are 8 letters, for example HARBOUR8.” Use descriptions for hints, formats and error messages, as you did in the forms lesson. Keep the name short and the description optional: users can skip it, but they can’t skip a name.
\n\nEvery control on Ticketly now has a name a person could say out loud. The last lesson of this section looks at the words themselves: plain language, and the language attributes that make Ticketly’s Arabic content sound right.
\n","toc":[{"id":"sec-1","text":"How the browser computes a name","level":2},{"id":"sec-2","text":"Icon-only buttons","level":2},{"id":"sec-3","text":"Repeated buttons and Label in Name","level":2},{"id":"sec-4","text":"Descriptions","level":2}],"takeaways":["Browsers compute a control’s name in a fixed order: aria-labelledby, then aria-label, then native labelling (label, alt, legend, caption), then the element’s content, then title.","aria-labelledby and aria-label override everything else, including visible text, so use them carefully.","A visible label must appear in the accessible name (2.5.3 Label in Name), ideally at the start, so voice control users can say what they see.","aria-describedby adds secondary information, read after the name and role; it is for hints and errors, not for the name itself."],"further":[{"title":"W3C: Accessible Name and Description Computation 1.2","url":"https://www.w3.org/TR/accname-1.2/"},{"title":"W3C APG: Providing Accessible Names and Descriptions","url":"https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"},{"title":"W3C: Understanding 2.5.3 Label in Name","url":"https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html"}],"quiz":[{"q":"What is the accessible name of this button?
\n<h3 id=\"fri\">Friday pass</h3>\n<button id=\"b1\" aria-label=\"Buy\" aria-labelledby=\"b1 fri\">Book now</button>A voice control user says “click Get tickets”. Nothing happens. Why?
\n<a href=\"/tickets\" aria-label=\"Purchase festival passes\">Get tickets</a>Which element’s accessible name comes from its content?
","options":[{"text":"<button>Search</button>","why":"Correct. Buttons, links, headings, tabs and a few other roles take their name from their content, including the alt text of images inside them."},{"text":"<input type="text"> with the word Search written next to it in a span","why":"Text inputs never take a name from nearby text. They need a label, aria-labelledby or aria-label."},{"text":"<div aria-label="Search area">…</div>","why":"A plain div has a generic role, and ARIA prohibits naming generic elements. Screen readers usually ignore this label."},{"text":"<nav> containing a search link","why":"Landmarks don’t take a name from their content; otherwise the whole menu would be read as the name. Name a nav with aria-label or aria-labelledby."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\n\nA screen reader lists Ticketly’s buttons as “times, button, Book now, Book now, Book now, newsletter-cta”. Fix the names without changing what sighted users see:
\n.close “×” button needs a name containing “Close” (or “Dismiss”); the “×” itself shouldn’t be read..search button needs the name “Search”..book button needs a unique name that starts with “Book now” and includes its pass (Friday, Saturday or Weekend)..subscribe button’s name must contain its visible word “Subscribe”.The close button’s name now comes from visually hidden text (or an aria-label), and the × is hidden so it isn’t read as “times”. The search button gets its name from aria-label because it has no text content, and its decorative SVG is hidden. Each Book now button uses aria-labelledby to reference itself and its card’s heading, producing “Book now Friday pass”: unique in a list of buttons, and still starting with the visible words, so voice control users can say “click Book now” (2.5.3 Label in Name). The Subscribe button was the easiest: removing a wrong aria-label let the visible text become the name again.
\n","checkLabels":{"close-named":"The close button is named Close (or Dismiss) and the × isn’t read","search-named":"The search button is named Search","book-unique":"The three Book now buttons have unique names that include their pass","label-in-name":"Every name contains its visible text, and Book now names start with it","subscribe":"The Subscribe button’s name contains “Subscribe”"}},"words":708,"readMinutes":3}