Reference

Accessibility rules explained

One page for each of the 64 automated checks Websight runs against WCAG 2.2 level A and AA, plus 6 axe-core rules it does not run (marked experimental or deprecated by axe, but still reported by other tools). Each page shows who the problem affects, a live broken-versus-fixed example, a two-minute test you can do by hand, and the fix as copyable code.

64checks Websight runs
6axe rules it does not run
63level A
7level AA

Browse by theme

ImagesAlt text for photos, icons, SVGs, image buttons and image maps.7 rulesFormsLabels, names and autofill hints on fields, selects, toggles and buttons.7 rulesLinks and buttonsEvery control needs a name that says what it does.6 rulesColourContrast ratios and not relying on colour alone.2 rulesStructure and landmarksSkip links, real lists, real headings and content that is not hidden by mistake.7 rulesTablesHeader cells that match data cells and captions that are real captions.4 rulesKeyboard and focusReaching, using and seeing every control without a mouse.4 rulesARIARoles, attributes and names that assistive technology can actually use.17 rulesMedia and motionCaptions, autoplaying sound, blinking, scrolling and auto-refresh.6 rulesLanguageTelling screen readers which language to speak.4 rulesPage title, frames and zoomTitles, frame titles, pinch zoom, orientation and text spacing.6 rules

All rules

A ARIA attributes must be allowed for the element's role aria-allowed-attr Every ARIA role comes with a short list of attributes it understands. A aria-braillelabel must have a matching text label aria-braille-equivalent aria-braillelabel and aria-brailleroledescription let you give a braille display a shorter or contracted version of a control's name or role. A ARIA attributes must follow the conditions of the element's role aria-conditional-attr A few ARIA attributes are allowed on a role only under conditions. A Deprecated ARIA roles must not be used aria-deprecated-role ARIA retires roles from time to time. A aria-label must not be used on div, span or p without a role aria-prohibited-attr aria-label and aria-labelledby only work on elements that can have a name: controls, landmarks, images, headings, tables and similar. A Required ARIA attributes must be provided for the role aria-required-attr Some ARIA roles only make sense with a state or value attached. A ARIA roles that need particular children must contain them aria-required-children Some roles are containers that only mean something with the right children inside: listbox and option, tablist and tab, menu and menuitem, tree and treeitem, table and row. A ARIA roles that need a particular parent must sit inside it aria-required-parent Some roles only make sense inside a particular parent. not run A aria-roledescription must only be used on elements with a role aria-roledescription aria-roledescription lets you swap the word a screen reader uses for a role: say slide instead of group, or page instead of tab panel. A ARIA roles must be valid aria-roles The role attribute only accepts names from the ARIA list: dialog, button, tab, listbox and so on. A Tabs must have an accessible name aria-tab-name Every element with role="tab" needs a name: the words a screen reader speaks when the tab gets focus and the words a voice control user says to pick it. A Tooltips must have an accessible name aria-tooltip-name An element with role="tooltip" needs a name, which is normally just the text inside it. A ARIA attributes must have valid values aria-valid-attr-value Each ARIA attribute accepts a particular kind of value: true or false, a number, a word from a short list, or the id of another element. A ARIA attributes must have valid names aria-valid-attr Browsers only act on attribute names that exist in the ARIA specification. A ids used by ARIA and labels must be unique duplicate-id-aria aria-labelledby, aria-describedby, aria-controls and the label for attribute all work by id. A Meters must have an accessible name aria-meter-name role="meter" is for a measurement within a known range: password strength, disk space used, battery level. A Progress bars must have an accessible name aria-progressbar-name role="progressbar" tells a screen reader that something is in progress and how far along it is. AA Text must have enough contrast with its background color-contrast Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen. A Links in body text must not rely on colour alone link-in-text-block When a link sits inside a paragraph, colour is often the only thing that marks it out. A Form fields must have labels label Every input and textarea needs a label that is programmatically tied to it, not just sitting nearby. A A form field should have one label, not several form-field-multiple-labels When two or more label elements have a for attribute pointing at the same field, screen readers have to pick. A Select menus must have an accessible name select-name A select element is a drop-down list of choices. A Input buttons must have discernible text input-button-name An input element with type="submit", type="button" or type="reset" draws a button whose text comes from its value attribute. AA The autocomplete attribute must use a valid value autocomplete-valid The autocomplete attribute tells the browser what kind of information a field collects: a given name, a postcode, an email address. A ARIA input fields must have an accessible name aria-input-field-name When a div or span is given a form role such as textbox, combobox, listbox, slider or spinbutton, assistive technology treats it as a field. A ARIA toggle fields must have an accessible name aria-toggle-field-name Elements with role="switch", role="checkbox", role="radio", role="menuitemcheckbox" or role="menuitemradio" are toggles: they are on or off, checked or not. A Images must have alternative text image-alt Every img element needs an alt attribute. A Image buttons must have alternative text input-image-alt An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow. A Elements with role="img" must have alternative text role-img-alt Adding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture. A SVG graphics with an image role must have alternative text svg-img-alt Inline SVG is drawn with code rather than loaded as a file, so there is no alt attribute to fill in. A Embedded objects must have alternative text object-alt The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page. A Image map areas must have alternative text area-alt An image map lets one picture have several clickable regions, each defined by an area element with an href. A Server-side image maps must not be used server-side-image-map A server-side image map is an img with the ismap attribute inside a link. A Scrollable areas must be reachable with a keyboard scrollable-region-focusable When a box has its own scrollbar, mouse users scroll it with the wheel. A Frames with controls inside must not have tabindex=-1 frame-focusable-content An iframe with tabindex="-1" is taken out of the Tab order, and so is everything inside it. A Hidden elements must not contain anything you can Tab to aria-hidden-focus aria-hidden="true" tells screen readers to ignore an element, but it does not stop the Tab key reaching the links and buttons inside. AA Buttons and links must be big enough to press target-size Every 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. A The page must say what language it is in html-has-lang The lang attribute on the html element tells browsers and screen readers which language the page is written in. A The page language code must be valid html-lang-valid A lang attribute only works if its value is a real language tag: a two or three letter code like en, cy or fr, optionally followed by a hyphen and a region, like en-GB. A lang and xml:lang must name the same language html-xml-lang-mismatch Some pages, usually ones generated as XHTML or from older templates, carry both a lang attribute and an xml:lang attribute on the html element. AA Language codes on page sections must be valid valid-lang When part of a page is in a different language from the rest, put a lang attribute on that element. A Links must have text a screen reader can announce link-name Every link needs text that a screen reader can announce and a voice control user can say. A Expandable sections need a summary with words in it summary-name The summary element is the clickable heading of a details element, the browser's built-in expand and collapse control. A Do not put one control inside another nested-interactive A 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. A ARIA buttons, links and menu items need a name aria-command-name When you give an element role="button", role="link" or role="menuitem", you are promising assistive technology that it is a control. A The words on a control must be part of its accessible name label-content-name-mismatch People who use voice control activate a control by saying the words they can see on it. not run A Audio needs captions or a transcript audio-caption An audio element plays sound and nothing else, so anyone who cannot hear gets nothing. A Videos must have captions video-caption A video element with speech or meaningful sound needs captions: text that appears on screen in time with the audio. A Sound must not start playing on its own no-autoplay-audio If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page. A Do not use the blink element blink The blink element makes text flash on and off and gives nobody a way to stop it. A Do not use the marquee element marquee The marquee element scrolls text across the page and never stops. A Pages must not refresh or redirect on a timer meta-refresh A meta refresh with a delay reloads the page, or sends the visitor somewhere else, after a set number of seconds. A Every page needs a title document-title The 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 Frames must have a title frame-title An iframe is a window onto another page: a map, a video, a booking form, a payment field. A Frames on the same page must have different titles frame-title-unique If a page has several frames, each needs its own title. AA Do not block pinch zoom on phones meta-viewport The viewport meta tag tells phones how to scale the page. not run AA Do not lock the page to portrait or landscape css-orientation-lock Some 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. AA Text spacing must not be locked with !important avoid-inline-spacing Some 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 Give people a way to skip past repeated navigation bypass Most pages start with the same header and menu. A Lists must only contain list items list A ul or ol tells a screen reader 'list, N items' and lets the person jump item by item. A List items must sit inside a list listitem An li is only a list item when its parent is a ul, ol or menu. A Definition lists must be built from matching terms and descriptions definition-list A dl is a list of terms and their descriptions: each dt (the term) is followed by one or more dd (the description). A Terms and descriptions must sit inside a definition list dlitem dt and dd only mean term and description when they are inside a dl. not run A Use real headings, not bold paragraphs p-as-heading A paragraph made bold or bigger looks like a heading to a sighted reader. A Never hide the whole page with aria-hidden aria-hidden-body aria-hidden="true" tells assistive technology to ignore an element and everything inside it. not run A Every data cell in a table needs a header td-has-header In a data table, every cell that holds a value needs a header cell that says what the value is. A The headers attribute must point at header cells in the same table td-headers-attr The headers attribute on a cell lists the ids of the header cells that describe it. A Every table header must describe some data th-has-data-cells A th tells screen readers that a cell is the heading for the row or column it sits in. not run A Table captions must use the caption element table-fake-caption A table's title belongs in a caption element, directly after the opening table tag.

By level

Level A rules

63 checks for the baseline criteria every site should meet.

Level AA rules

7 checks for the level most laws and contracts point at.

These pages cover the automated checks only. WCAG 2.2 has 56 A and AA success criteria and most of them need a person to judge. See the WCAG 2.2 pages and the manual checklist for the rest.

Run all 64 checks on your own page

Websight scans the page you are on, scores it out of 100 and explains every issue in plain English with a draft fix per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.