Sold out
Email me when it's back ``` ```css .pill { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #1f4d3f; color: #fff; font-weight: bold; text-decoration: none; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', (event) => { event.preventDefault(); document.getElementById('notify').showModal(); }); ``` The `a` element makes the pill a link, and the script makes it act as a button. A screen reader reports the link, and Space, which presses buttons, scrolls the page instead. The same goes for `href="javascript:void(0)"` and for a link whose address is real but whose script always cancels it. ## After: a button ```htmlSold out
``` ```css .pill { display: inline-block; padding: 10px 20px; border: 0; border-radius: 999px; background: #1f4d3f; color: #fff; font: inherit; font-weight: bold; cursor: pointer; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', () => { document.getElementById('notify').showModal(); }); ``` A button is announced as a button, and the browser runs its click handler for Enter and for Space, so no key handling is needed and the page never scrolls. `type="button"` keeps it from sending a form it sits in. The CSS takes away the browser's border and grey face and sets the font, so the pill looks as it did. ## After: role="button" and Space, when the link has to stay ```htmlSold out
Email me when it's back ``` ```css .pill { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #1f4d3f; color: #fff; font-weight: bold; text-decoration: none; } ``` ```js const notify = document.querySelector('.notify'); notify.addEventListener('click', (event) => { event.preventDefault(); document.getElementById('notify').showModal(); }); // Space presses a button when it is let go, and must not scroll the page. notify.addEventListener('keydown', (event) => { if (event.key === ' ') event.preventDefault(); }); notify.addEventListener('keyup', (event) => { if (event.key === ' ') notify.click(); }); ``` `role="button"` makes a screen reader announce a button, and the two key handlers make Space press it as it presses a native button, on release, without scrolling. Enter already clicks a link. This is for markup you can add to but not change, such as a theme or a plugin that renders the link. The browser still treats the element as a link in its own menus, so "Open link in new tab" and dragging it still offer the same page. ## The patch that is not a fix ```html Email me when it's back ``` `role="button"` makes a screen reader say "button", which mends the role. But ARIA changes only what is announced: the element is still a link to the browser, and Space still scrolls the page. A screen reader user is now told it is a button, and the key every button answers to does nothing. The second fix above finishes the job by hand; a native button needs none of it. ## Which option to use Both pass. Use the button: it does the same job with less code and nothing to give up, since the browser handles both keys and the role, and there is no fake address to explain. Keep the link with `role="button"` and the Space handler only where the element can't be changed, and test its keys again whenever the theme or plugin updates. ## Implementation decisions The look and the role go together. A button can look like a link where the design needs it, but an underlined word is what links usually look like, so it suggests to sighted users that it goes somewhere. That is why the Authoring Practices suggest adjusting the visual design to match what the control does. A pill or a button shape tells everyone it acts. Shared components are where this usually starts. A `Button` component that renders an `a` when it is given `href`, and a `button` otherwise, keeps the two apart; one that always renders an `a`, or is passed `href="#"` to make it focusable, makes every action a link. A router's link component used for an action has the same problem. A control that changes something on the server, such as adding to a basket or subscribing, also belongs in a button rather than a link to an address with the action in it: a link can be prefetched, bookmarked or shared, and following it again repeats the action. Put it in a form that is sent with a submit button, or call the server from the button's click handler. What happens after the press is a separate job. The native `dialog` opened with `showModal()` moves focus into the form and back to the button when it closes; see [modals that leave keyboard focus behind them](/learn/modal-focus-management) for dialogs built another way. ## Verify the fix 1. With a screen reader, Tab to the control and confirm it is announced as a button, with its visible words. 2. Press Enter, close the form, then press Space: each opens the form once, and the page doesn't scroll. 3. Open the screen reader's list of buttons and confirm the control is in it, and not in the list of links. 4. Press every other control on the page that opens, changes or sends something, and repeat the first three steps for each. Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the shared button or link component changes. ## Limits This guide covers a link that does a button's job. The reverse, a button that only takes people to another page, is the same topic seen from the other side, and is meant for a later guide: it is announced as a button, and it can't be opened in a new tab or found in the list of links. For a div or span with a click handler and no role at all, see [div buttons that can't be reached with Tab](/learn/native-buttons). Links that filter or sort the page in place belong to the topic on links that update the page, and a button with no words to [icon-only buttons with no accessible name](/learn/icon-buttons). Test the complete journey with your target assistive technology. --- Get this guide in your coding agent: MCP https://easeweb.dev/mcp (setup at https://easeweb.dev/services/developers)