# The Cart Close Button With No Name: Icon-Only Controls and WCAG 4.1.2

Source: https://cartcomply.com/blog/2026-11-09-cart-close-button-no-name-icon-only.html

Open a cart drawer, and the close button is an X. No text, no label, just a glyph. A sighted shopper knows what it does. A screen reader user hears button, and nothing else, because the button has no accessible name. The control exists, and it is unusable, because the name is missing.

WCAG 2.2 success criterion 4.1.2, Name, Role, Value, requires every user interface component to have an accessible name that describes its purpose. An icon-only button with no aria-label, no title, and no visually hidden text has no name, and it fails 4.1.2. The fix is one attribute: aria-label="Close cart", or a visually hidden span with the text Close. Either one gives the button a name, and the name is what the screen reader announces.

## The X is not a name

The mistake is assuming the glyph is the name. It is not, because a screen reader does not read glyphs. It reads the accessible name, and if there is no accessible name, it reads the role, which is button, and nothing else. A shopper who hears button, button, button, as they tab through a cart drawer has no way to know which button closes the cart, which one removes an item, and which one goes to checkout. The drawer is a trap, not because focus is trapped, but because meaning is missing.

WebAIM's Million 2026 study found that 95.9 percent of home pages had detectable WCAG 2 failures, with an average of 56.1 errors per page, and missing accessible names are consistently among the most common. The cart is worse than the home page, because the cart is where the shopper is trying to complete a task, and a button with no name is a task that cannot be completed.

## What to name, and how

Name every icon-only control in the cart. The close button is Close cart, not Close, because Close on its own is ambiguous when there are three dialogs on the page. The remove-item button is Remove, followed by the product name, because Remove on its own does not say what is being removed. The quantity stepper buttons are Increase quantity and Decrease quantity, not Plus and Minus, because the screen reader needs to know what the button does, not what it looks like.

Use aria-label for the name, or a visually hidden span inside the button. Both work, and the visually hidden span is the more robust option, because it is real text, and real text is translated, while an aria-label is not always translated by machine translation tools. If the button already has visible text, do not add an aria-label, because the accessible name should match the visible text, and a mismatch is a separate failure under 2.5.3, Label in Name.

## The test

Test the cart with a screen reader, tabbing through every control, and listen to the names. If you hear button with no name, or a name that does not describe the action, the control fails 4.1.2. If you hear Close cart, Remove blue sweater, Increase quantity, the cart works. The test takes five minutes, and it is the only test that matters, because an automated checker will flag a missing name, but it will not flag a name that is wrong.

A button with no name is a door with no sign. Name it, and the shopper can use it.

Keep reading: [Mini cart keyboard traps: the focus test that catches them](2026-11-06-mini-cart-keyboard-trap-focus-test.md), [Cart drawers and focus: what a keyboard user actually hits on your store](2026-11-04-accessible-cart-drawer-focus-trap-keyboard.md), [When the Cart Drawer Closes, Focus Has to Go Somewhere](2026-11-02-accessible-cart-drawer-focus-return.md).

## Frequently asked questions

### What does WCAG 4.1.2 require for buttons?

Every user interface component must have an accessible name that describes its purpose. An icon-only button with no aria-label, no title, and no visually hidden text has no name and fails 4.1.2.

### How do I give an icon-only close button a name?

Add aria-label="Close cart", or put a visually hidden span with the text Close inside the button. The visually hidden span is more robust, because real text is translated and aria-label is not always.

### Why is Close not a good enough name for a cart close button?

Because it is ambiguous when there are three dialogs on the page. Close cart says what is being closed. Remove should include the product name, for the same reason.

### How common are missing accessible names?

Very common. WebAIM's Million 2026 study found 95.9 percent of home pages had detectable WCAG 2 failures, averaging 56.1 errors per page, and missing accessible names are consistently among the most common.