HTML test cases

Page content sections

• ↓ Basic form control and label tests
• ↓ <fieldset> tests
• ↓ <fieldset> with errors tests
• ↓ Nested <fieldset> tests
• ↓ Help text and error messages associated with form control tests
• ↓ Required field tests
• ↓ <button> accessible name and description tests
• ↓ <a> accessible name and description tests
• ↓ <input> accessible name and description tests
• ↓ <table> accessible name and description tests
• ↓ aria-invalid tests
• ↓ Form-based attribute tests
• ↓ disabled attribute tests
• ↓ readonly and aria-readonly attribute tests
• ↓ ARIA landmark tests
• ↓ <header> scope tests
• ↓ Live region tests
• ↓ onsubmit tests
• ↓ Modal dialog tests
• ↓ VoiceOver Rotor tests
• ↓ Technology details

Basic form control and label tests

Tests to determine how form controls and their associated <label> and <legend> elements are announced. In some cases, the form element does not require or should not have a <label>.

Inputs

• → <input type="button">
• → <input type="checkbox">
• → <input type="color">
• → <input type="date">
• → <input type="datetime-local">
• → <input type="email">
• → <input type="file">
• → <input type="month">
• → <input type="number">
• → <input type="password">
• → <input type="radio">
• → <input type="range">
• → <input type="reset">
• → <input type="search">
• → <input type="submit">
• → <input type="tel">
• → <input type="text">
• → <input type="time">
• → <input type="url">
• → <input type="week">

Other elements

• → <button>
• → <select>
• → <select> with multiple
• → <optgroup> within <select>
• → <textarea>

Basic form controls support chart

<fieldset> tests

Tests to determine how <fieldset> elements are announced.

• → Basic <fieldset> and <legend>
• → <fieldset> and buttons

Checkboxes

• → Checkbox group with list
• → Checkbox group with list and role="presentation"
• → Checkbox group without a list
• → Checkbox group using role="group"

Radio buttons

• → Radio group with list
• → Radio group with list and role="presentation"
• → Radio group without a list
• → Radio group using role="radiogroup"

Fieldset support chart

<fieldset> with errors tests

Tests to determine how error messages associated with radio groups are announced.

• → Radio group with error - no programmatic association
• → Radio group with error - aria-describedby applied to <fieldset>
• → Radio group with error - aria-describedby applied to <legend>
• → Radio group with error - aria-describedby applied to <input>
• → Radio group with error - aria-label applied to <fieldset>
• → Radio group with error - aria-label applied to <input>

Fieldsets with errors support chart

Nested <fieldset> tests

Tests to determine how nested <fieldset> elements are announced.

• → Nested <fieldset>
• → Nested <fieldset>, with role="presentation"
• → Nested <fieldset> without list

Nested fieldset support chart

Help text and error messages associated with form control tests

Tests to determine how help text and error messages can be associated with form controls.

Help text

• → <input> with help text wrapped inside <label>
• → <input> with help text using aria-describedby
• → <input> with help text as an aria-label

Error messages

• → <input> with error message wrapped inside <label>
• → <input> with error message using aria-describedby
• → <input> with error message using aria-errormessage
• → <input> with error message using title
• → <input> with error message using aria-describedby and title
• → <input> with error message using hidden aria-describedby

Help text and error message support chart

Required field tests

Tests to determine how required and aria-required are announced.

• → <input> with required
• → <input> with aria-required
• → <input> with required and aria-required
• → <input> with required and aria-invalid="false"

Tests to determine how "(required)"" added to label text is announced.

• → <input> with required and "(Required)" added to label text
• → <input> with aria-required and "(Required)" added to label text

Tests to determine how hiding the "(required)" text is announced.

• → <input> with required and aria-hidden="true" applied to "(Required)" text
• → <input> with aria-required and aria-hidden="true" applied to "(Required)" text

Required field support chart

<button> accessible name and description tests

The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for the <button> element. These examples should not be considered proper practice.

• → <button> where aria-labelledby should be accessible name
• → <button> where aria-label should be accessible name
• → <button> where content should be accessible name
• → <button> where title should be accessible name
• → <button> with no accessible name

The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <button> element.

• → <button> where aria-describedby should be accessible description
• → <button> where title should be accessible description
• → <button> with no accessible description

<a> accessible name and description tests

The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for the <a> element. These examples should not be considered proper practice.

• → <a> where aria-labelledby should be accessible name
• → <a> where aria-label should be accessible name
• → <a> where content should be accessible name
• → <a> where title should be accessible name
• → <a> with no accessible name

The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <a> element.

• → <a> where aria-describedby should be accessible description
• → <a> where title should be accessible description
• → <a> with no accessible description

<input> accessible name and description tests

The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for <input> elements. These examples should not be considered proper practice.

• → <input> where aria-labelledby should be accessible name
• → <input> where aria-label should be accessible name
• → <input> where <label> should be accessible name
• → <input> where title should be accessible name
• → <input> where placeholder should be accessible name
• → <input> with no accessible name

The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <input> element.

• → <input> where aria-describedby should be accessible description
• → <input> where title should be accessible description
• → <input> with no accessible description

<table> accessible name tests

The purpose these tests is to show the cascade order of how accessible names are applied in the accessibility tree for <table> elements. These examples should not be considered proper practice.

• → <table> where aria-labelledby should be accessible name
• → <table> where aria-label should be accessible name
• → <table> where <caption> content should be accessible name
• → <table> where title should be accessible name
• → <table> with no accessible name

The purpose these tests is to show the cascade order of how accessible descriptions are applied in the accessibility tree for the <table> element.

• → <table> where aria-describedby should be accessible description
• → <table> where title should be accessible description
• → <table> with no accessible description

aria-invalid tests

Tests to determine how the aria-invalid attribute is announced.

• → <input> with aria-invalid="true"
• → <input> with aria-invalid="false"
• → <input> with aria-invalid="grammar"
• → <input> with aria-invalid="spelling"

aria-invalid support chart

Form-based attribute tests

Tests to determine how max, aria-valuemax, min, aria-valuemin, maxlength, minlength, multiple and pattern attributes are announced.

• → <input> with max
• → <input> with aria-valuemax
• → <input> with max and aria-valuemax
• → <input> with min
• → <input> with aria-valuemin
• → <input> with min and aria-valuemin
• → <input> with maxlength
• → <input> with minlength
• → <input> with multiple
• → <input> with pattern

Form attributes support chart

disabled attribute tests

Tests to determine how the boolean disabled attribute is announced.

• → <button> with disabled
• → <input> with disabled
• → <textarea> with disabled
• → <select> with disabled
• → <option> with disabled
• → <fieldset> with disabled

disabled attribute support chart

readonly and aria-readonly attribute tests

Tests to determine how the boolean readonly and aria-readonly attributes are announced.

• → readonly attribute on <input>
• → readonly attribute on <textarea>
• → aria-readonly attribute on <input>

readonly and aria-readonly attribute support chart

ARIA landmark tests

Tests to determine how various landmarks are announced.

Landmarks without labels

• → <article>
• → <aside>
• → role="complementary"
• → <footer>
• → role="contentinfo"
• → role="form"
• → <header>
• → role="banner"
• → <main>
• → role="main"
• → <nav>
• → role="navigation"
• → role="search"
• → <section>
• → role="region"

Landmarks with aria-labelledby

• → <article> with aria-labelledby
• → <aside> with aria-labelledby
• → <footer> with aria-labelledby
• → <header> with aria-labelledby
• → <main> with aria-labelledby
• → <nav> with aria-labelledby
• → <section> with aria-labelledby

Landmarks with aria-label

• → <article> with aria-label
• → <aside> with aria-label
• → <footer> with aria-label
• → <header> with aria-label
• → <main> with aria-label
• → <nav> with aria-label
• → <section> with aria-label

Multiple landmarks

• → Two <header> elements
• → Two <footer> elements

Landmark support chart

<header> scope tests

When the <header> element is scoped to the <body> element, it will have an implicit ARIA role of banner. Similarly, when the <footer> element is scoped to the <body> element, it will have an implicit ARIA role of contentinfo.

However, these two elements will not have implicit ARIA roles if they are descendants of the following elements:<article>, <aside>, <main>, <nav>, <section>

These cases are designed to test whether the <header> element's implicit ARIA role is announced.

<header> scoped to the <body> element - implicit ARIA role should be present

• → <header>
• → role="banner"
• → <header> descendant of role="article"
• → <header> descendant of role="complementary"
• → <header> descendant of role="main"
• → <header> descendant of role="navigation"
• → <header> descendant of role="region"

<header> scoped to other elements - implicit ARIA role should be absent

• → <header> descendant of <article> scoped to the <article> element
• → <header> descendant of <aside> scoped to the <aside> element
• → <header> descendant of <main> scoped to the <main> element
• → <header> descendant of <nav> scoped to the <nav> element
• → <header> descendant of <section>scoped to the <section> element

<header> scope support chart

Live region tests

Tests to determine how live regions are announced.

• → aria-live="assertive"
• → aria-live="polite"
• → aria-live="off"
• → role="alert"
• → role="status"

Live region support chart

onsubmit tests

Tests to determine how an onsubmit error is announced.

• → Focus on a container with no role
• → Focus on a container with role="alert"
• → Focus on a container with role="group"
• → Focus on a container with no role or label
• → Focus on the heading
• → Focus on the heading, inside role="group"
• → Focus on the heading, inside role="group" with a aria-labelledby
• → Focus on the heading, inside role="group" with a aria-label

Modal dialog tests

Tests to determine how modal dialogs are announced.

• → Native test 1: initial focus on heading
• → Native test 2: initial focus on first focusable element
• → Native test 3: initial focus on dialog
• → Native test 4: initial focus on heading - with dialog
• → Native test 5: initial focus on dialog - with dialog
• → ARIA test 1: initial focus on heading
• → ARIA test 2: initial focus on first focusable element
• → ARIA test 3: initial focus on container
• → ARIA test 4: initial focus on container - with just dialog
• → ARIA test 5: initial focus on container - with dialog and aria-labelledby

VoiceOver Rotor tests

Tests to determine if the VoiceOver Rotor displays the landmark information as announced.

• → VoiceOver test without ARIA roles
• → VoiceOver test with ARIA roles
• → VoiceOver test with aria-labelledby
• → VoiceOver test with aria-label

VoiceOver Rotor support chart

Other tests