LiquidPurple - Strategic Website Management

Glossary of Terms

We have compiled this list of terms and definitions to help you better understand the terminology used within the web development community.

Button Name

Search for glossary terms (regular expression allowed)
Button Name checks that every button and link styled as a button has accessible text that screen readers can announce. Buttons without a discernible name are invisible to assistive technology users and fail WCAG 2.1 success criterion 4.1.2.

Button Name

Every interactive button must have a text label that assistive technology can announce. This includes native <button> elements, <input type="submit">, and elements with role="button". When a button has no visible text, it needs an aria-label, aria-labelledby reference, or a title attribute. Without one of these, a screen reader user encounters a mystery control they cannot identify.

Why It Matters

  • Screen readers announce buttons by name. A nameless button is announced as just "button" — the user has no idea what it does.
  • Automated accessibility tools flag this with high confidence, so it shows up in every Lighthouse audit.
  • Failing this check usually means icon-only buttons are missing labels, which is extremely common in modern UI frameworks.
  • WCAG 4.1.2 (Name, Role, Value) explicitly requires every UI component to have an accessible name.

How to Fix It

  1. Add aria-label="Close" (or similar) to icon-only buttons that have no visible text.
  2. If the button already contains visible text, make sure it is inside the <button> element, not hidden via CSS or clipped in a way assistive tech cannot read.
  3. For image buttons (<input type="image">), add an alt attribute describing the action.
  4. Avoid using generic labels like "Click here." The label should describe the action: "Submit form," "Open menu," "Delete item."
  5. Test with a screen reader (VoiceOver, NVDA, JAWS) to confirm the announced name makes sense in context.

Common Mistakes

  • Using aria-label on a button that already has visible text — the aria-label overrides the visible text, creating a mismatch between what sighted and non-sighted users perceive.
  • Placing text inside a <span class="sr-only"> but accidentally hiding it from assistive tech too via aria-hidden="true".
  • Nesting interactive elements inside a button — screen readers may skip the inner element's text.
  • Relying solely on title — inconsistent screen reader support makes this a last resort.
Bottom Line: Every clickable button needs a name. If users can see the icon, screen reader users need to hear the label. Add aria-label to icon-only buttons and verify with your browser's accessibility inspector.
Hits - 45
Synonyms: Accessible Button Label, Button Accessible Name

What Does "Liquid Purple" mean?

noun | / LIK-wid PUR-pul /

  1. (biochemistry) Also known as visual purple or rhodopsin — a light-sensitive receptor protein found in the rods of the retina. It enables vision in dim light by transforming invisible darkness into visible form. Derived from the Greek rhódon (rose) and ópsis (sight), its name reflects its delicate pink hue and vital role in perception.

  2. (modern usage) Liquid Purple — a digital marketing agency specializing in uncovering unseen opportunities and illuminating brands hidden in the digital dark. Much like its biological namesake, Liquid Purple transforms faint signals into clear visibility — revealing what others overlook and bringing businesses into the light.

Origin: From the scientific term rhodopsin, discovered by Franz Christian Boll in 1876; adopted metaphorically by a marketing firm dedicated to visual clarity in the age of algorithms.

Client Login