What does probeo check for accessibility?

What probeo checks

Images and frames

• Alt textImages without alt text leave screen readers reading file names. When an image is decorative or informative, how to write alt text, and how to describe charts.
• Frame titlesAn iframe without a title is announced as just a frame, so screen reader users can't tell a video from a map. How to name each frame distinctly.
• Server-side image mapsAn image with the ismap attribute sends click coordinates to the server, so its links can't be reached by keyboard. Use a client-side map or plain links.

Language

• Page languageWithout a valid lang attribute on <html>, screen readers guess the page's language and can read it with the wrong pronunciation. How to declare it.
• lang and xml:langWhen <html> carries lang and xml:lang with different languages, software can't tell which the page is in. Make them match, or drop xml:lang.
• Language changesA lang attribute inside the page tells screen readers to switch language for a passage. An invalid code switches to nothing, and the passage is misread.

Document structure

• Definition listsA <dl> pairs terms with their descriptions. Other elements directly inside it, or a <dt> or <dd> outside it, break the pairing that screen readers announce.
• Document titleA page without a <title> is announced by its URL, or not at all, and shows that way in tabs and history. How to give each page a title that says what it is.
• Duplicate IDsTwo elements with the same id break anything that points at one of them. A control labeled by that id can get the wrong name or description.
• ListsScreen readers announce a list and how many items it has. Other elements directly inside a <ul> or <ol>, or an <li> outside one, break that count.

Headings and landmarks

• Empty headingsA heading with no text still appears in a screen reader's list of headings, as a blank entry. Where empty headings come from, and how to remove them.
• Heading orderA heading that skips a level, such as an h2 followed by an h4, leaves a gap in the outline screen reader users navigate by. How to fix skipped heading levels.
• Duplicate landmarksTwo main, banner or contentinfo landmarks make a screen reader's landmark list ambiguous. Where duplicates come from, and how to keep one of each.
• Main landmarkWithout a main landmark, screen reader users can't jump past the header and navigation to the page's content. How to mark the main content with <main>.
• Top-level landmarksA banner, main, contentinfo or complementary landmark nested inside another landmark confuses the page's structure for screen reader users. How to un-nest them.
• Unique landmarksTwo navigation landmarks with no labels, or the same label, sound identical in a screen reader's landmark list. How to give each landmark a distinct name.
• Level-one headingA page without an h1 gives screen reader users no quick way to the start of its main content or a statement of what the page is. How to add one.

Forms

• Autocomplete valuesA misspelled or invented autocomplete value means browsers can't fill the field and assistive tools can't tell what it asks for. The valid tokens.
• Labels and attributesUnlabeled inputs, inputs with several labels, and required fields that don't say so: three form accessibility failures, and how to resolve each one.

Names

• Accessible namesButtons and links without an accessible name are invisible to screen readers. How the accessible name is computed, and how to fix elements that have none.

ARIA

• Role not allowedA role that doesn't suit its element, such as role="button" on a heading, gives assistive technology two conflicting answers about what the element is.
• Braille labelsaria-braillelabel and aria-brailleroledescription only change what a braille display shows. Without a spoken equivalent, speech users get nothing.
• Conditional ARIA attributesSome ARIA attributes apply to a role only in certain conditions: a separator that can't be focused takes no value attributes. How to tell which you have.
• Deprecated ARIA rolesA deprecated ARIA role such as role="directory" may not be announced as anything useful. Which role replaces it, and how to check.
• Hidden bodyaria-hidden="true" on the <body> hides the whole page from screen readers. The page looks normal and says nothing.
• Hidden but focusableAn element with aria-hidden="true" that is focusable, or contains something focusable, sends keyboard users to a control a screen reader won't announce.
• Widget namesText fields, toggles, progress bars, tooltips, tree items and dialogs need a name, or a screen reader announces them with nothing to say what they're for.
• Prohibited ARIA attributesSome roles prohibit naming attributes such as aria-label. On those elements the name is ignored or announced inconsistently. Where the name belongs instead.
• Missing child rolesA list with no list items, a tab list with no tabs, or a menu with no menu items is announced as a container with nothing a screen reader can move through.
• Missing parent roleA tab outside a tab list, or a list item outside a list, is announced without the context that says how many there are and where the user is.
• Role descriptionaria-roledescription renames an element's role for screen readers. On an element with no role, there's nothing to rename, and the description is lost.
• role="text" with controlsrole="text" flattens an element's content into plain text for screen readers. A link or button inside it can still take focus but can lose its name and role.
• Attribute issuesMissing required ARIA attributes and invalid values break assistive technology. How the WAI-ARIA contract between roles and attributes works, and how to fix it.
• Presentation role conflictsAn element with role="none" or role="presentation" that is focusable or has global ARIA attributes stays in the accessibility tree. How to resolve it.

Keyboard

• Duplicate accesskeysWhen two elements share an accesskey, the shortcut goes to one of them, depending on the browser. How to make each shortcut unique, or remove them.
• Bypass blocksWithout a skip link, landmarks or headings, keyboard and screen reader users have to go through the navigation on every page. How to give them a way past it.
• Nested controlsA button inside a link, or a link inside a button, is one control to the eye and two to a keyboard or screen reader. How to separate them.
• Content outside landmarksContent outside the header, nav, main and footer landmarks is missing from a screen reader's landmark list. How to place every part of the page in one.
• Positive tabindexA tabindex above 0 pulls an element ahead of the page's natural focus order, so keyboard users jump around the page. How to fix the order at its source.

Tables

• Empty table headerA header cell with no text gives screen readers nothing to announce for its column or row. How to give it a name, or make it a data cell.
• Invalid scopeThe scope attribute works only on header cells, with one of four values. Anywhere else, browsers ignore it and the header relationship is lost.
• Duplicate captionA table with the same text in its caption and summary is announced twice by screen readers. The summary attribute is obsolete; how to keep one description.
• Fake captionA first row with one cell spanning the whole table looks like a title but is read as data. How to move it into a caption element.
• Cells without headersIn a table of three rows and three columns or more, a data cell with no header is read as a bare value. How to mark up header cells so every value is labeled.
• Headers attributeA data cell whose headers attribute names an ID outside its table, or itself, is read without the right header. How to point it at the right cells.
• Headers without dataA table header cell with no data cells in its row or column labels nothing, which usually means the table is built wrong. How to find and fix it.

Time and media

• Blink and marqueeBlinking and scrolling text can't be paused, is hard to read, and distracts from the rest of the page. What to use instead of <blink> and <marquee>.
• Timed refreshA meta refresh with a delay reloads or redirects the page while someone may still be reading it. Use a server redirect, or no refresh at all.
• Autoplaying audioSound that starts on its own talks over screen readers and can't always be stopped. When autoplay is acceptable, and how to fix it.

Zoom and contrast

• Color contrastLow color contrast makes text unreadable for people with low vision. WCAG contrast ratios, AA versus AAA, how probeo measures contrast, and how to fix it.
• Zoom disableduser-scalable=no and a low maximum-scale stop people on phones from enlarging text. How to write a viewport tag that keeps zoom.