WebsightLevel A
Level A rules
The 63 level A checks Websight runs. Level A is the baseline: missing alt text, unlabelled fields, no page language, keyboard barriers.
Images
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.
Forms
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.
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.
Links and buttons
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
Buttons must have a name that says what they do
button-name
A button needs a name that assistive technology can announce.
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.
Colour
Structure and landmarks
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.
Tables
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.
Keyboard and focus
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.
ARIA
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.
Media and motion
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.
Language
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.
Page title, frames and zoom
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.
Scan your page against every level A check
Free in Chrome, with a score and a plain-English fix per element.
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.