WebsightTheme
Keyboard and focus
Reaching, using and seeing every control without a mouse. 4 automated checks Websight runs, each with a live example and a fix you can copy.
Scrollable areas must be reachable with a keyboard
scrollable-region-focusableWhen a box has its own scrollbar, mouse users scroll it with the wheel. Keyboard users can only scroll something that has focus, and a plain div cannot take focus. Anything below the visible part of that box is out of reach to them. Give the box tabindex="0" and a name, or make sure something focusable inside it does the job.Frames with controls inside must not have tabindex=-1frame-focusable-contentAn iframe with tabindex="-1" is taken out of the Tab order, and so is everything inside it. If the frame holds a booking form, a map, a video player or a payment field, keyboard users cannot reach any of it. Remove the tabindex. If the frame is not meant to be used by anyone, hide it properly instead.Hidden elements must not contain anything you can Tab toaria-hidden-focusaria-hidden="true" tells screen readers to ignore an element, but it does not stop the Tab key reaching the links and buttons inside. A screen reader user presses Tab, lands on a button, and hears nothing at all. Anything hidden with aria-hidden must also be out of the Tab order: use the hidden attribute, display:none, or inert.Buttons and links must be big enough to presstarget-sizeEvery control you can click or tap needs to be at least 24 by 24 CSS pixels, or have enough empty space around it that a 24 pixel circle centred on it does not touch a neighbour. Smaller than that and people miss, or hit the control next door. Links inside a line of text are exempt, as are controls the browser draws itself.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 keyboard and focus 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.