Friday pass
\nSAR 180, standing.
\nAdd to basket
\n Remove one\n See the Friday line-up\nTicketly’s “Add to basket” control looks like a button: rounded corners, a brand colour, a pointer cursor on hover. It is a div with an onclick. Click it with a mouse and it works perfectly, which is exactly why nobody on the original team noticed. Press Tab and focus jumps straight past it. Samir’s screen reader reads it as plain text. A switch user can’t reach it at all.
The decision between the two native controls comes down to one question: does it take the user somewhere?
\n<a href="…">) navigates: to another page, another part of this page (#lineup), a file, an email address. Screen readers announce it as “link”. Users expect to open it in a new tab, copy its address, see it in history. It activates with Enter.<button>) performs an action on the current page: add to basket, open a dialog, submit a form, toggle a filter. Screen readers announce it as “button”. It activates with Enter and Space.Styling is irrelevant to the choice. A link can look like a big call-to-action and a button can look like a text link; CSS handles appearance, the element handles behaviour.
\nTo understand why the native element wins, count what a div lacks. Here is the minimum to rebuild a button by hand:
<div class=\"btn\" role=\"button\" tabindex=\"0\">Add to basket</div>const fake = document.querySelector('.btn');\nfake.addEventListener('click', addToBasket);\nfake.addEventListener('keydown', (event) => {\n if (event.key === 'Enter') addToBasket();\n if (event.key === ' ') event.preventDefault(); // stop the page scrolling\n});\nfake.addEventListener('keyup', (event) => {\n if (event.key === ' ') addToBasket(); // native buttons fire on Space release\n});That is a role, focus, Enter, Space and scroll prevention, and it still lacks a disabled state, form submission, and the way Windows contrast themes (forced colors mode) style buttons. Compare:
\n<button type=\"button\" class=\"btn\" onclick=\"addToBasket()\">Add to basket</button>One element, and every behaviour is correct in every browser and every screen reader. This is the pattern you will see throughout the course: native HTML first, because the browser has already done the hard work.
\n\nInside a <form>, a <button> defaults to type="submit". Ticketly’s checkout has an “Apply promo code” button that kept submitting the whole form. The fix is one attribute:
<button type=\"button\" onclick=\"applyPromo()\">Apply promo code</button>The disabled attribute removes a button from the tab order, so keyboard users tabbing through the form skip straight past it, and nobody is told why it is unavailable. A screen reader in browse mode still finds it, announced as “unavailable”, but with no reason attached. For a “Pay now” button that is waiting on a valid card, consider leaving it enabled and explaining the problem when it is pressed, which you will build in Accessible Forms.
Screen reader users often pull up a list of all links or buttons on a page, and voice control users say the visible text to click it. “Read more”, “Click here” and “Details” are meaningless in that list. WCAG 2.4.4 asks that a link’s purpose be clear from its text, or its text plus its surrounding sentence or list item. Aim higher than the minimum: write “Friday line-up and set times”, not “Read more”. If the design insists on short visible text, you will learn in Accessible Names and Descriptions how to extend the name without breaking voice control.
\nOne more link habit: if a link opens a new tab or downloads a file, say so in its text, for example “Venue guide (PDF, 2 MB)” or “Seating plan (opens in a new tab)”. An unexpected new tab breaks the Back button for screen reader and magnifier users, who often don’t notice that the window changed and wonder why they can’t return.
\n\nReal buttons and links fix the controls that act. Next come the controls that collect information, and the place where most inaccessible sites lose their customers: forms.
\n","toc":[{"id":"sec-1","text":"Links go, buttons do","level":2},{"id":"sec-2","text":"What the clickable div is missing","level":2},{"id":"sec-3","text":"Buttons in forms, and disabled buttons","level":2},{"id":"sec-4","text":"Text that makes sense alone","level":2}],"takeaways":["A link takes the user somewhere (a new URL or a fragment); a button does something on the current page.","Native buttons are focusable, announced as buttons, and activate with both Enter and Space, all for free.","A div with a click handler has no role, no focus and no keyboard support; rebuilding those by hand takes four separate fixes and is easy to get wrong.","Inside a form, give non-submitting buttons type=“button”, and write link and button text that makes sense out of context."],"further":[{"title":"MDN: The Button element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button"},{"title":"MDN: The Anchor element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"},{"title":"W3C: Understanding 2.4.4 Link Purpose (In Context)","url":"https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html"}],"quiz":[{"q":"Which of these should be a link rather than a button?
","options":[{"text":"“Add to basket”, which updates a counter on the page","why":"This changes state on the current page without navigating, so it is a button."},{"text":"“Show more dates”, which expands a hidden list","why":"Expanding content in place is an action, which makes it a button (a disclosure button, covered later in the course)."},{"text":"“Friday line-up”, which goes to/events/friday","why":"Correct. It takes the user to a new URL, so it should be an a element with an href. Users can then open it in a new tab or copy it."}],"answer":2},{"q":"A developer “fixes” this fake button. What is still missing?
\n<div role=\"button\" tabindex=\"0\" onclick=\"addToBasket()\">Add to basket</div>Inside Ticketly’s checkout form, the “Apply promo code” button submits the whole form and shows “Card number required”. Why?
","options":[{"text":"A button inside a form defaults to type=“submit”","why":"Correct. Addtype="button" to buttons that run JavaScript instead of submitting the form."},{"text":"The button needs an aria-controls attribute pointing at the field","why":"aria-controls only describes a relationship to assistive technology; it never changes what the button does."},{"text":"Buttons can’t be used inside forms, so it should be a link","why":"Buttons are the normal controls inside forms. A link would be the wrong role for an action."}],"answer":0},{"q":"A screen reader user pulls up a list of links on Ticketly and hears “Read more, Read more, Read more”. What is the best fix?
","options":[{"text":"Addtitle="Read more about Friday" to each link","why":"title is not reliably announced and is invisible to keyboard and touch users, so it is a weak fix."},{"text":"Remove the links and rely on the headings instead","why":"The links are still useful. The problem is that their text doesn’t identify the destination."},{"text":"Make the link text say where it goes, such as “Friday line-up and set times”","why":"Correct. Descriptive link text works in a list of links, for voice control users, and for sighted users skimming the page."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Basket: 0 tickets
\nSAR 180, standing.
\nNour Quartet, The Saltmarsh Band.
","css":".pass { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; justify-items: start; }\n.pass h2 { margin: 0; font-size: 1.2rem; }\n.pass p { margin: 0; }\n.btn { background: #5b3cc4; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }\n.text-btn { background: none; border: 0; padding: 0; font: inherit; color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n.link { color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n","js":"let count = 0;\nfunction addToBasket() {\n count += 1;\n document.querySelector('#basket-count').textContent = String(count);\n}\nfunction removeFromBasket() {\n count = Math.max(0, count - 1);\n document.querySelector('#basket-count').textContent = String(count);\n}\n"},"solution":{"html":"Basket: 0 tickets
\nSAR 180, standing.
\n \n \n See the Friday line-up\nNour Quartet, The Saltmarsh Band.
","css":".pass { border: 1px solid #c9c4dc; border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; justify-items: start; }\n.pass h2 { margin: 0; font-size: 1.2rem; }\n.pass p { margin: 0; }\n.btn { background: #5b3cc4; color: #fff; border: 0; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }\n.text-btn { background: none; border: 0; padding: 0; font: inherit; color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n.link { color: #5b3cc4; text-decoration: underline; cursor: pointer; }\n","js":"let count = 0;\nfunction addToBasket() {\n count += 1;\n document.querySelector('#basket-count').textContent = String(count);\n}\nfunction removeFromBasket() {\n count = Math.max(0, count - 1);\n document.querySelector('#basket-count').textContent = String(count);\n}\n"},"checks":[{"id":"add-is-button","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('Add to basket'); return !!el && !!el.closest('button');"},{"id":"add-works","test":"const b = $$('button').find((x) => x.textContent.trim() === 'Add to basket'); if (!b) return false; const before = Number(text('#basket-count')); await click(b); return Number(text('#basket-count')) === before + 1;"},{"id":"remove-is-button","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('Remove one'); const b = el && el.closest('button'); if (!b) return false; const before = Number(text('#basket-count')); await click(b); return Number(text('#basket-count')) === Math.max(0, before - 1);"},{"id":"lineup-is-link","test":"const find = (t) => $$('body *').filter((el) => el.children.length === 0 || el.matches('button, a')).find((el) => el.textContent.trim() === t); const el = find('See the Friday line-up'); const a = el && el.closest('a[href]'); return !!a && a.getAttribute('href').endsWith('#lineup');"},{"id":"no-fakes","test":"return $$('div[onclick], span[onclick], a[href=\"#\"], a:not([href])').length === 0;"}],"title":"Replace Ticketly's fake controls","prompt":"The Friday pass card has three controls, and none of them is the right element:
\ndiv with onclick. It runs addToBasket().<a href="#"> that runs removeFromBasket().span that changes the URL hash to #lineup.Rebuild each with the correct native element, keeping the visible text exactly as it is. The two actions must still update the basket count. Keep the class names if you like, so the styling stays.
\n","hints":["Ask of each control: does it take the user somewhere, or does it do something here?","The two basket actions are buttons. Give them type=“button”.","Navigating to #lineup is what a link with href=“#lineup” does on its own; it needs no JavaScript."],"explanation":"Add to basket and Remove one change state on the page, so they are <button type="button"> elements: focusable, announced as buttons, and activated by Enter and Space with no extra code. See the Friday line-up moves the user to another place, so it is <a href="#lineup">, which also works without JavaScript, shows the destination on hover and can be copied. Notice the solution has less code than the starter: the return false and the hash-setting script are gone, because the native elements already behave correctly.