WebsightTheme
Page title, frames and zoom
Titles, frame titles, pinch zoom, orientation and text spacing. 5 automated checks Websight runs, plus 1 axe rule it does not run, each with a live example and a fix you can copy.
Every page needs a title
document-titleThe title element in the head is the first thing a screen reader says when a page loads, the text on the browser tab, the name of the bookmark, and the headline in search results. A missing or empty title leaves people with a tab labelled by the URL and a screen reader that announces untitled. Make it specific to the page and put the page's own name first.Frames must have a titleframe-titleAn iframe is a window onto another page: a map, a video, a booking form, a payment field. Screen readers announce it as a frame and read its title so the person knows whether to go in. With no title they hear frame and the address, or nothing. Add a title attribute that says what the frame holds.Frames on the same page must have different titlesframe-title-uniqueIf a page has several frames, each needs its own title. Screen readers list frames by title; three called Video are no help. Say what each one shows: Video: Monday rehearsal, Video: Christmas concert.Do not block pinch zoom on phonesmeta-viewportThe viewport meta tag tells phones how to scale the page. Two of its options, user-scalable=no and a maximum-scale below 2, stop people pinching to zoom. For anyone with low vision that locks the page at a size they cannot read. Use width=device-width, initial-scale=1 and nothing more.Do not lock the page to portrait or landscapecss-orientation-lockSome sites decide they only work in landscape and use a media query to rotate the whole page 90 degrees when the phone is held upright, or show a please rotate your device overlay. People whose phone or tablet is fixed to a wheelchair cannot rotate it. WCAG 1.3.4 says content must work in both orientations unless one is essential, like a piano app.Text spacing must not be locked with !importantavoid-inline-spacingSome people with dyslexia or low vision read far better with wider line, letter or word spacing, and they apply it with a browser extension or a bookmarklet. A style attribute with !important on those properties beats anything an extension injects. The check looks for exactly that. Move the spacing to your stylesheet and drop the !important.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 page title, frames and zoom 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.