Play Accessibility
Name that button.
Choose the accessible name for icon-only buttons, from trash cans to three-dot menus.
Question 1 of 6. A file list has a trash-can button on every row. This one sits on the row for "Q3 roadmap.pdf". What should its accessible name be?
Name the action, not the picture. When a page lists ten buttons that all say "Delete", including the file name tells people which one they're on.
Question 2 of 6. An × button sits in the corner of a dialog titled "Share project". What should its accessible name be?
The dialog's own title already gives the context, and the role "button" is announced automatically, so a short "Close" is clearest.
Question 3 of 6. A magnifying-glass button submits the search field next to it. What should its accessible name be?
Say what pressing it does. "Magnifying glass" describes the drawing, and "Submit" is vague when a page has more than one form.
Question 4 of 6. A three-dots button on a project card for "Rudiment UI" opens a menu of actions. What should its accessible name be?
Cards repeat, so the name should say which card it belongs to and what it opens. Add aria-haspopup and aria-expanded so the menu's state is announced too.
Question 5 of 6. A heart button on an article saves it to the visitor's favorites and stays filled in when on. What should its accessible name be?
For a toggle, keep the name the same and let aria-pressed announce whether it's on. "Click" also assumes a mouse, which keyboard and touch users don't have.
Question 6 of 6. A pencil button next to the Email field on a profile page lets you change it. What should its accessible name be?
A profile page often has an edit button on every field. "Edit email" is short and still unique when someone moves between buttons.
A good accessible name says what happens, and is specific enough to tell repeated buttons apart.