WebsightTheme
Links and buttons
Every control needs a name that says what it does. 6 automated checks Websight runs, each with a live example and a fix you can copy.
Links must have text a screen reader can announce
link-nameEvery link needs text that a screen reader can announce and a voice control user can say. Visible text is best. An icon-only link, or an image link with no alt text, has no name at all, so it is announced as just 'link', and the page's list of links gives no clue where each one goes.Buttons must have a name that says what they dobutton-nameA button needs a name that assistive technology can announce. A button with words inside it has one. A button that only holds an icon, an SVG or a background image does not, so a screen reader says 'button' and nothing else. Add the name with visually hidden text, an aria-label, or alt text on the image inside.Expandable sections need a summary with words in itsummary-nameThe summary element is the clickable heading of a details element, the browser's built-in expand and collapse control. It behaves like a button, so it needs a name. A summary that holds only an icon, or is empty and drawn with CSS, is announced as a nameless disclosure, so nobody using a screen reader knows what it opens.Do not put one control inside anothernested-interactiveA button, a tab, a switch and similar controls are announced as one thing; whatever is inside them is treated as their label, not as separate controls. Put a link or another button inside one and screen readers may never announce the inner control, while a keyboard user can focus something that does not work. Keep one control per control.ARIA buttons, links and menu items need a namearia-command-nameWhen you give an element role="button", role="link" or role="menuitem", you are promising assistive technology that it is a control. A control needs a name. A div with a role and only an icon inside has none, so a screen reader announces just 'button' or 'menu item'. Give it visible text, an aria-label, or point aria-labelledby at text nearby.The words on a control must be part of its accessible namelabel-content-name-mismatchPeople who use voice control activate a control by saying the words they can see on it. If the control carries an aria-label that says something else, the words they say do not match the name the software knows, and nothing happens. Make the accessible name start with the visible text, then add detail after it if you need to.Who these pages are for: the developer or site owner who has a scan result in front of them and wants to understand it, test it and fix it without a training course.
Keep going
Check your page for links and buttons issues
Websight runs these checks on any page in Chrome and shows a draft fix for each element it finds.
Add Websight to ChromeFree scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.