WebsightTheme
Structure and landmarks
Skip links, real lists, real headings and content that is not hidden by mistake. 6 automated checks Websight runs, plus 1 axe rule it does not run, each with a live example and a fix you can copy.
Give people a way to skip past repeated navigation
bypassMost pages start with the same header and menu. Someone using a keyboard has to tab through every one of those links on every page before reaching the content. A skip link at the top of the page, a main landmark and proper headings each give a way to jump past the repeated blocks. The scanner wants at least one; a good page has all three.Lists must only contain list itemslistA ul or ol tells a screen reader 'list, N items' and lets the person jump item by item. That only works when the children are li elements. A div, p, span or wrapper component dropped straight inside the list breaks the count and can split one list into several, so the structure a sighted reader sees is lost.List items must sit inside a listlistitemAn li is only a list item when its parent is a ul, ol or menu. Put li elements straight into a div or a section and most screen readers stop treating them as a list: no item count, no jumping between items, sometimes no bullets. It usually happens when a template renders the items but loses the wrapper.Definition lists must be built from matching terms and descriptionsdefinition-listA dl is a list of terms and their descriptions: each dt (the term) is followed by one or more dd (the description). Screen readers use that pairing to announce 'term, description'. Put anything else straight inside the dl, or start with a dd, and the pairs break. The only extras allowed directly inside a dl are a div around each group, script and template.Terms and descriptions must sit inside a definition listdlitemdt and dd only mean term and description when they are inside a dl. Put them straight into a div or a section and a screen reader hears ordinary text with the pairing lost. It usually happens when a layout wrapper replaces the dl, or when one dl is split into several blocks to make columns.Use real headings, not bold paragraphsp-as-headingA paragraph made bold or bigger looks like a heading to a sighted reader. To a screen reader it is a paragraph. People who navigate by headings, which is most screen reader users, jump from heading to heading and never land on it. Use h1 to h6 for anything that acts as a heading, and get the look with CSS.Never hide the whole page with aria-hiddenaria-hidden-bodyaria-hidden="true" tells assistive technology to ignore an element and everything inside it. On the body element, that is the whole page. Sighted people see a normal site; a screen reader user hears nothing, or only the title, and cannot reach a single link. It is nearly always left behind by a dialog or menu script that hid the page and forgot to unhide it.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 structure and landmarks 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.