Acceptance Criteria

Accordion

WHEN I use the tab key to move focus to an expandable button I SEE focus is strongly visually indicated

THEN when I use the spacebar and/or enter key to activate the expandable button I SEE the hidden content is revealed

WHEN I use the arrow key to move focus to an expandable button

I HEAR its purpose is clear

I HEAR it identifies its role as a button or details

I HEAR it expresses its state (expanded/collapsed)

THEN when I use the spacebar and/or enter key to activate the expandable I HEAR the hidden content is revealed

WHEN I swipe to focus on a button

I HEAR its purpose is clear

I HEAR it identifies its role as a button or details

I HEAR it expresses its state (expanded/collapsed)

THEN when I doubletap with the button in focus I HEAR the intended action occurs

Breadcrumbs

WHEN I use the tab key to move focus to a link

I SEE focus is strongly visually indicated

THEN when I use the enter key to activate the link

I SEE my browser navigates to a different part of the page or to another page

WHEN I use the arrow key to move focus to a link

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a breadcrumb navigation landmark

I HEAR the current page link is indicated when focused

THEN when I use the enter key to activate the link

I HEAR my browser navigates to a different part of the page or to another page

WHEN I use screen reader shortcuts to jump between navigation landmarks

I HEAR the breadcrumbs are discoverable

WHEN I swipe to focus on a link

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a breadcrumb navigation landmark

I HEAR the current page link is indicated when focused

THEN when I doubletap with the link in focus

I HEAR my browser navigates to a different part of the page or to another page

WHEN I use screen reader shortcuts to jump between navigation landmarks

I HEAR the breadcrumbs are discoverable

Button

WHEN I use the tab key to move focus to a button

I SEE focus is strongly visually indicated

THEN when I use the spacebar and/or enter key to activate the button

I SEE the intended action occurs

WHEN I use the arrow key to move focus to a button

I HEAR its purpose is clear

I HEAR it identifies its role of button

I HEAR it indicates if it has popup for listbox, menu or dialog

I HEAR it expresses its state if applicable (pressed, expanded, disabled/dimmed/unavailable)

THEN when I use the spacebar and/or enter key to activate the button

I HEAR the intended action occurs

WHEN I swipe to focus on a button

I HEAR its purpose is clear

I HEAR it identifies its role of button

I HEAR it indicates if it has popup for listbox, menu or dialog

I HEAR it expresses its state if applicable (pressed, expanded, disabled/dimmed/unavailable)

THEN when I doubletap with the button in focus

I HEAR the intended action occurs

Checkbox

WHEN I use the tab key to move focus to a checkbox

I SEE focus is strongly visually indicated

THEN when I use the spacebar to activate the checkbox

I SEE the state is changed

WHEN I use the arrow key to move focus to a checkbox

I HEAR its label and purpose is clear

I HEAR it identifies its role of checkbox

I HEAR hints or errors are read after the label and related inputs include a group name (ex: Account settings)

I HEAR it expresses its state (checked/unchecked, disabled)

THEN when I use the spacebar to activate the checkbox I HEAR the state is changed

WHEN I swipe to focus on a checkbox input

I HEAR its label and purpose is clear

I HEAR it identifies its role of checkbox

I HEAR hints or errors are read after the label and related inputs include a group name (ex: Account settings)

I HEAR it expresses its state (checked/unchecked, disabled)

THEN when I doubletap with the checkbox in focus I HEAR the state is changed

Data table

WHEN I use the arrow keys to scroll down a page

I SEE the table scrolls into view

WHEN I use the tab key

I SEE the table is not focusable

WHEN a table includes interactive elements, such as sortable columns AND I use the tab key

I SEE focus move the interactive elements

I SEE focus is strongly visually indicated

WHEN I  use the arrow keys to move around the table

I HEAR the table has a caption or a heading to describe its purpose

I HEAR it identifies itself as a table

I HEAR column headers and row headers are identified

I HEAR column and row information for each cell

If a table column is sortable, I HEAR how the information is sorted (ascending, descending)

WHEN I swipe to move through the table

I HEAR the table has a caption or a heading to describe its purpose

I HEAR it identifies itself as a table

I HEAR column headers and row headers are identified

I HEAR column and row information for each cell

If a table column is sortable, I HEAR how the information is sorted (ascending, descending)

Date picker

WHEN I use the tab key to move focus to the date picker button

I SEE focus is strongly visually indicated

THEN when I use the spacebar and/or enter key to activate the date picker button

I SEE the date picker dialog appears

THEN when I use the arrow keys

I SEE the selection moves through next/previous dates

THEN when I use the spacebar and/or enter key

I SEE the date is selected

WHEN I use the escape key when the date picker dialog is visible

I SEE the date picker dialog disappears and focus returns to the date picker in

WHEN I use the arrow key to move focus to the date picker button

I HEAR its label and purpose is clear

I HEAR it identifies its role of input or button

I HEAR it expresses a popup or dialog is available

THEN when I use the spacebar and/or enter key to activate the datepicker

I HEAR the date picker dialog appears

THEN when I use the arrow keys

I HEAR the selection moves through next/previous dates AND dates are expressed fully

THEN when I use the spacebar and/or enter key

I HEAR the date is selected

WHEN I use the escape key

I HEAR the date picker dialog disappears and focus returns to the date picker

WHEN I swipe to focus on the date picker button

I HEAR its label and purpose is clear

I HEAR it identifies its role of input or button

I HEAR it expresses a popup or dialog is available

THEN when I doubletap with the button in focus

I HEAR the date picker dialog appears

THEN when I swipe through the dialog

I HEAR the date options expressed fully and controls come into focus

THEN when I doubletap with the selection or button in focus

I HEAR the selection is activated

Drag & drop

WHEN I come to a component that requires drag and drop

I SEE there is an alternative way to do the task

AND I can move the item without performing a drag gesture with both keyboard and mouse

WHEN I use the arrow key to land on a draggable item

I HEAR its label and purpose of the item is clear

I HEAR instructions of how to move the item without performing a drag gesture

AND I can perform the action successfully with the desktop screen reader running

WHEN I swipe to focus on a draggable item

I HEAR its label and purpose of the item is clear

I HEAR instructions of how to move the item without without performing a drag gesture

AND I can perform the action successfully with the mobile screen reader running

Link

WHEN I use the tab key to move focus to a link

I SEE focus is strongly visually indicated

THEN when I use the enter key to activate the link

I SEE my browser navigates to a different part of the page or to another page

WHEN I use the arrow key to move focus to a link

I HEAR its purpose is clear

I HEAR it identifies itself as a link

THEN when I use the enter key to activate the link

I HEAR my browser navigates to a different part of the page or to another page

WHEN I swipe to focus on a link

I HEAR its purpose is clear

I HEAR it identifies itself as a link

THEN when I doubletap with the link in focus

I HEAR my browser navigates to a different part of the page or to another page

Modal dialog

WHEN I use the tab key to move focus to the button which triggers a modal dialog  to open and use spacebar and/or enter key to activate the button

I SEE the dialog opens and is in focus

THEN when I use the tab key inside the modal

I SEE focus moves to interactive controls in the modal dialog in a logical order

I SEE that focus does not leave the dialog

THEN when I use the escape key OR when I activate the dismiss/close button inside the modal dialog

I SEE focus returns to the trigger button

WHEN I use the arrow key to move focus to the button which triggers a modal dialog to open  

I HEAR its purpose is clear

I HEAR it expresses a popup or dialog is available

THEN when  I use spacebar and/or enter key to open the modal

I HEAR the dialog describes its purpose or title on launch

I HEAR it identifies itself as a modal or dialog

THEN when I use the arrow key inside the modal

I HEAR content in the dialog is browsed in logical order and does not leave the dialog

I do not HEAR any contents outside of the dialog

THEN when I use the escape key OR when I close the dialog with a dismiss/close button

I HEAR focus returns to the trigger button

WHEN I swipe to focus to the launch button

I HEAR its purpose is clear

I HEAR it expresses a popup or dialog is available

THEN when I double-tap to open the modal

I HEAR the dialog describes its purpose or title on launch

I HEAR it identifies itself as a modal or dialog

THEN when I swipe through the contents of the dialog

I HEAR content in the dialog is browsed in logical order and does not leave the dialog

I do not HEAR any contents outside of the dialog

THEN when I swipe to move focus to the dismiss/close button AND THEN double tap on the close button

I HEAR focus returns to the trigger button

Navigation - links only

WHEN I use the tab key to move focus to a link within a navigation

I SEE focus is strongly visually indicated

I SEE all links are focusable

I SEE focus moves through the links in an order that matches the visual order

THEN when I use the enter key to activate the link

I SEE my browser navigates to a different part of the page or to another page

WHEN I use the arrow key to move focus to a link within a navigation

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a navigation landmark

I HEAR the name of the navigation landmark

I HEAR the number of links in the list

I HEAR the current page link is indicated when focused

THEN when I use the enter key to activate the link

I HEAR my browser navigates to a different part of the page or to another page

WHEN I swipe to focus on a link within a navigation

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a navigation landmark

I HEAR the name of the navigation landmark

I HEAR the current page link is indicated when focused

THEN when I doubletap with the link in focus

I HEAR my browser navigates to a different part of the page or to another page

Navigation with expandable sections - links and buttons

WHEN I use the tab key to move focus to a link or button within a navigation

I SEE focus is strongly visually indicated

I SEE all links and buttons are focusable

I SEE focus moves through the links in an order that matches the visual order

THEN when I use the spacebar or enter key to activate a button

I SEE the expandable section appear

I SEE that focus remains on the button

THEN when I use the tab key focus moves into the expandable section and I SEE all links within the expandable section are focusable

THEN when I use the enter key to activate the link

I SEE my browser navigates to a different part of the page or to another page

WHEN I use the Escape key within an expandable section

I SEE focus returns to the button that activated it

I SEE the expandable section is no longer visible

WHEN I use the arrow key to move focus to a link or button within a navigation

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a navigation landmark

I HEAR the name of the navigation landmark

I HEAR the number of links in the list

I HEAR the current page link is indicated when focused

I HEAR buttons identify their purpose

I HEAR buttons identify their role as buttons

I HEAR that buttons express their state (expanded/collapsed)

THEN when I use the spacebar or enter key to activate a button

I HEAR button express the changed state indicating that an expandable section is visible

THEN when I use the arrow key

I HEAR  interactive elements inside the expandable section are included in the focus order

THEN when I use the enter key to activate the link

I HEAR my browser navigates to a different part of the page or to another page

WHEN I use the Escape key within an expandable section

I HEAR focus return to the button that activated it

I HEAR button express the changed state indicating that an expandable section is no longer visible

WHEN I swipe to focus on a link or button within a navigation

I HEAR the link names correspond to their destination page titles

I HEAR links identify as a links in a navigation landmark

I HEAR the name of the navigation landmark

I HEAR the number of links in the list

I HEAR the current page link is indicated when focused

I HEAR buttons identify their purpose

I HEAR buttons identify their role as buttons

I HEAR that buttons express their state (expanded/collapsed)

THEN when I doubletap to activate a button

I HEAR button express the changed state indicating that an expandable section is visible

THEN when I use swipe

I HEAR interactive elements inside the expandable section are included in the focus order

THEN when I doubletap with the link in focus

I HEAR my browser navigates to a different part of the page or to another page

WHEN I use the Escape gesture within an expandable section

I HEAR focus return to the button that activated it

I HEAR button express the changed state indicating that an expandable section is no longer visible

Number Input

WHEN I use the tab key to move focus to a number input

I SEE focus is strongly visually indicated

THEN when I use the number keys

I SEE numbers are entered

THEN when I use non-number keys

I SEE nothing is entered

WHEN I use the arrow key to move focus to a number input

I HEAR its label and purpose is clear

I HEAR it identifies its role of editable input

I HEAR hints or errors are read after the label

I HEAR related inputs include a group name (ex: Enter your telephone number including area code)

I HEAR it expresses its state (required, disabled)

THEN when I use the number keys

I HEAR numbers are entered

THEN when I use non-number keys

I HEAR nothing is entered

WHEN I swipe to focus on a number input

I HEAR its label and purpose is clear

I HEAR it identifies its role of editable input

I HEAR hints or errors are read after the label

I HEAR related inputs include a group name (ex: Enter your telephone number including area code)

I HEAR it expresses its state (required, disabled)

THEN when I enter a number

I HEAR the numeric keypad is revealed

Radio buttons

WHEN I use the tab key to move focus to a radio group

I SEE focus is strongly visually indicated on the selected option if there is one or the first unselected option if nothing is selected

THEN when I use the spacebar to activate the radio button

I SEE the radio button with focus change state to selected

THEN when I use the arrow keys to focus a radio button

I SEE the focused radio button state is changed to selected

THEN when I reach the last radio button in a radio group and press the arrow key

I SEE focus loops back to the first radio button in the group

THEN when I press the tab key again focus moves away from the radio group to the next interactive element

WHEN I use the tab key to move focus to a radio group

I HEAR its label and purpose is clear

I HEAR it identifies its role of radio button

I HEAR hints or errors are read after the label and related inputs include a group name (ex: Shipping options)

I HEAR it expresses its state (selected, checked, disabled)

THEN when I use the spacebar to activate the radio button

I HEAR the state is changed

THEN when I use the arrow keys to focus a radio button

I HEAR the focused radio button state is changed to selected

THEN when I reach the last radio button in a radio group and press the arrow key

I HEAR focus loops back to the first radio button in the group

WHEN I swipe to focus on a radio button input

I HEAR its label and purpose is clear

I HEAR it identifies its role of radio button

I HEAR hints or errors are read after the label and related inputs include a group name (ex: Shipping options)

I HEAR it expresses its state (selected, checked, disabled)

THEN when I doubletap with the radio button in focus

I HEAR the state is changed

Select dropdown - non-editable

WHEN I use the tab key to move focus to a select dropdown

I SEE focus is strongly visually indicated

THEN when I use the arrow keys to select an option

I SEE focus moves to the selected option

THEN when I press the Spacebar or Enter key

I SEE the selection option is updated

WHEN I use the escape key while the select dropdown is open

I SEE it closes and focus returns to the select without changing the selection

WHEN I use the arrow key to move focus to a select input

I HEAR its label and purpose is clear

I HEAR it identifies its role (select, listbox, or combobox)

I HEAR hints or errors are read after the label

I HEAR it expresses its state (selected option, disabled/dimmed)

THEN when I use the arrow keys to select an option

I HEAR that focus moves through the available options

THEN when I press the Spacebar or Enter key

I HEAR the selection option is updated

WHEN I use the escape key while the select is open

I HEAR it collapses and focus returns to the input

WHEN I swipe to focus on a select input

I HEAR its label and purpose is clear

I HEAR it identifies its role (select, popup, listbox or combobox)

I HEAR hints or errors are read after the label

I HEAR it expresses its state (selected option, disabled/dimmed)

THEN when I doubletap to open the select and swipe to select an option

I HEAR that focus moves through the available options

THEN when I doubletap

I HEAR the selection option is updated

WHEN I use the escape gesture while the select is open

I HEAR it collapses and focus returns to the input

Status messages (live regions)

WHEN a status message (live region) is activated

I SEE the message on the screen

I SEE that focus remains on the element I was already interacting with

I SEE that I can continue with the task I was doing without having to move focus

WHEN a status message (live region) is activated

I HEAR all the information needed to understand the status message

I HEAR the announcement without the screen reader moving focus to the live region

NOTE: VoiceOver does not reliably read out notifications using live regions. Test with NVDA and JAWS to ensure this works.

WHEN a status message (live region) is activated

I HEAR all the information needed to understand the status message

I HEAR the announcement without the screen reader moving focus to the live region

Tabs - automatic activation

WHEN I use the tab key to move focus to a tab

I SEE focus is strongly visually indicated on the selected tab

WHEN I use the left/right arrow keys

I SEE the tab panel for the tab in focus is automatically visible

THEN when I use the tab key

I SEE focus moves to interactive elements inside the activated tab panel

WHEN I use the arrow key to move focus to a tab

I HEAR its label and purpose is clear

I HEAR it identifies its role as a tab

I HEAR it expresses its state (selected/pressed/checked)

THEN when I use the left/right arrow keys

I HEAR the tab panel for the tab in focus is selected

THEN when I use the tab key

I HEAR focus moves to the activated tab panel

WHEN I swipe to focus on a tab

I HEAR its label and purpose is clear

I HEAR it identifies its role as a tab

I HEAR it expresses its state (selected/pressed/checked)

THEN when I swipe to the next tab

I HEAR the tab panel for the tab in focus is selected

Tabs - manual activation

WHEN I use the tab key to move focus to a tab

I SEE focus is strongly visually indicated on the selected tab

THEN when I use the left/right arrow keys

I SEE focus moves to other tabs

THEN when I use the spacebar or enter key to activate the tab

I SEE the selected tab panel is visible

THEN when I use the tab key

I SEE focus moves to interactive elements inside the activated tab panel

WHEN I use the arrow key to move focus to a tab

I HEAR its label and purpose is clear

I HEAR it identifies its role as a tab

I HEAR it expresses its state (selected/pressed/checked)

THEN when I use the left/right arrow keys

I HEAR focus moves to other tabs

I HEAR the tabs are unselected

THEN when I use the spacebar or enter key to activate the tab

I HEAR the state of the tab change to selected

THEN when I use the tab key

I HEAR focus moves to the activated tab panel

WHEN I swipe to focus on a tab

I HEAR its label and purpose is clear

I HEAR it identifies its role as a tab

I HEAR it expresses its state (selected/pressed/checked)

THEN when I swipe to the next tab

I HEAR focus moves to the next tab

I HEAR the tabs are unselected

THEN when I doubletap to activate the tab

I HEAR the state of the tab change to selected

Text input

WHEN I use the tab key to move focus to a text input

I SEE focus is strongly visually indicated

THEN when I type

I SEE the letters and numbers appear in the text input

WHEN I use the arrow key to move focus to a text input

I HEAR its purpose is clear

I HEAR it identifies itself as a text input

I HEAR hints or errors are read after the label

I HEAR if applicable, it expresses its state (required, disabled / dimmed / unavailable)

THEN when I type

I HEAR what I have entered

WHEN I swipe to focus on a text input

I HEAR its purpose is clear

I HEAR it identifies itself as a text input

I HEAR hints or errors are read after the label

I HEAR if applicable, it expresses its state (required, disabled / dimmed / unavailable)

THEN when I type

I HEAR what I have entered

Text input with error

WHEN I use the tab key to move focus to a text input with an error

I SEE hint, help, or error displayed as text

I SEE any supporting colors used for borders, icons and text meets  contrast requirements

I SEE color is not the only way to convey error messages

WHEN I use the tab key to move focus to a text input with an error

I HEAR after the input name, the role and state is read, THEN the hint, help, or error is read

I HEAR an error is read automatically when it appears dynamically

WHEN I swipe to focus on a text input with an error

I HEAR after the input name, the role and state is read, THEN the hint, help, or error is read

I HEAR an error is read automatically when it appears dynamically

Tiny MCE Editor

WHEN I use the tab key to move focus to the Tiny MCE Editor toolbar

I SEE focus is strongly visually indicated

THEN when I use left/right arrows

I SEE focus move between the elements in the toolbar

THEN when I use the Spacebar / Enter key on an element in the toolbar

I SEE the element is selected

 I SEE color is not the only way to identify the selected state

WHEN I used the tab key to activate the editing area

I SEE a visible text cursor

I SEE text appear when I begin typing

WHEN I use the keyboard to edit or delete text

I SEE the content updated accordingly

WHEN I use the Tab key to move focus from the editing area

I SEE focus moves to the next interactive element outside the editor

WHEN I use the Shift + Tab key inside the editing area

I SEE focus moves to the previous interactive element outside the editor

WHEN I use the arrow key to move focus to the Tiny MCE Editor toolbar

I HEAR the name of the rich text editor

I HEAR that the control is editable

THEN when I navigate through the elements in the toolbar

I HEAR the name of each element

I HEAR the role of each control

I HEAR the state of each control (selected, pressed, disabled/dimmed)

WHEN I focus on the editing area

I HEAR that content is editable

I HEAR content in a logical order

I HEAR relevant semantic information such as headings, lists, links.

WHEN I edit or delete text

I HEAR the content updated accordingly

I HEAR any error messages announced accordingly

WHEN I use the Tab key to move focus from the editing area

I HEAR focus moves to the next interactive element outside the editor

WHEN I use the Shift + Tab key to move focus from the editing area

I HEAR focus moves to the previous interactive element outside the editor

WHEN I swipe to move focus to the Tiny MCE Editor toolbar

I HEAR the name of the rich text editor

I HEAR that the control is editable

THEN when I swipe through the elements in the toolbar

I HEAR the name of each element

I HEAR the role of each control

I HEAR the state of each control (selected, pressed, disabled/dimmed)

WHEN I focus on the editing area

I HEAR that content is editable

I HEAR content in a logical order

I HEAR relevant semantic information such as headings, lists, links.

WHEN I edit or delete text

I HEAR the content updated accordingly

I HEAR any error messages announced accordingly

WHEN I use the swipe forwards to move focus away from the editing area

I HEAR focus moves to the next interactive element outside the editor

WHEN I use the swipe backwards to move focus away from the editing area

I HEAR focus moves to the previous interactive element outside the editor

Toasts

WHEN I use features that trigger the toast

I SEE the toast (BUT focus DOES NOT transfer automatically when the alert appears)

WHEN I use features that trigger the toast

I HEAR the toast is read when it appears (BUT focus DOES NOT transfer automatically when the toast appears)

I HEAR it identifies itself as an alert or status when it appears

NOTE: VoiceOver does not reliably read out notifications using live regions. Test with NVDA and JAWS to ensure this works.

WHEN

I use features that trigger the toast snackbar

I HEAR the toast is read when it appears (BUT focus DOES NOT transfer automatically when the toast appears)

I HEAR it identifies itself as an alert or status when it appears

I HEAR if it is possible to close the toast, focus then returns to a logical place in the page

I HEAR it remains open until closed by user

Toolbar

WHEN I use the Tab key to navigate through the toolbar

I SEE each enabled toolbar control receive visible focus

I SEE disabled controls cannot receive focus

I SEE focus moves through the toolbar in a logical order

WHEN I use the Tab key to move focus to a toolbar control AND I press Enter or Space

I SEE the associated action is performed

WHEN I use the keyboard to activate a toolbar control that opens a menu or dialog

 I SEE focus move into the menu or dialog

I SEE all interactive controls can receive focus

I SEE focus remains within the dialog until I close it

WHEN I close the dialog

 I SEE focus return to the control that opened it

WHEN I use arrow keys to move focus to a toolbar control

I HEAR the name of the control

I HEAR the type of control

I HEAR its current state when applicable (selected, pressed, disabled/dimmed)

WHEN I move focus to a toolbar control that opens a menu

I HEAR whether the menu is expanded or collapsed

WHEN I activate the control

I HEAR that the menu is expanded

WHEN I move focus to  a toolbar control that opens a dialog

I HEAR the name and type of the dialog

I HEAR the controls within the dialog as I navigate through them

WHEN I close the dialog

I HEAR focus return to the control that opened it

WHEN I swipe to move focus to a toolbar control

I HEAR the name of the control

I HEAR the type of control

I HEAR its current state when applicable (selected, pressed, disabled/dimmed)

WHEN I swipe to move focus to a toolbar control that opens a menu

I HEAR whether the menu is expanded or collapsed

WHEN I activate the control

I HEAR that the menu is expanded

WHEN I move focus to  a toolbar control that opens a dialog

I HEAR the name and type of the dialog

I HEAR the controls within the dialog as I navigate through them

WHEN I close the dialog

I HEAR focus return to the control that opened it

Forms

WHEN I use the tab key to move focus through a form

I SEE focus is strongly visually indicated

I SEE each field receives focus in a logical order

WHEN I interact with the form

I SEE focus is not moved unexpectedly

I SEE the form is not submitted unexpectedly

I SEE the information is entered into the appropriate field

WHEN I move to a form field with an error

I SEE what needs to be corrected

WHEN I reach the end of the form

I SEE focus can move to the next interactive element after the form

WHEN I submit the form

I SEE whether the form was submitted successfully or not

WHEN I submit a form with invalid information

I CAN navigate to the fields that need to be corrected

I SEE text-based errors

I SEE color is supported by other visual indicators such as text, icons or a change in presentation.

WHEN I use a desktop screen reader to navigate to the form

I HEAR that I am navigating a form

I HEAR the name of the form when one is provided

WHEN I move focus to a form field

I HEAR the name of the field

I HEAR the type of form control

I HEAR its current value when applicable

I HEAR if a form field is required

I HEAR instructions, descriptions and errors associated with the form field

WHEN I move focus to a checkbox, radio button, select, or other control with a state

I HEAR the current state of the control

WHEN I navigate to the form submission button

I HEAR the name and role of the button AND I can activate the button using the keyboard

WHEN I submit the form with invalid information

I HEAR that the form contains errors

I HEAR the relevant error messages

I can navigate to the fields that need to be corrected

WHEN I swipe to navigate through the form

I HEAR that I am navigating a form

I HEAR the name of the form when one is provided

WHEN I move focus to a form field

I HEAR the name of the field

I HEAR the type of form control

I HEAR its current value when applicable

I HEAR if a form field is required

I HEAR instructions, descriptions and errors associated with the form field

WHEN I move focus to a checkbox, radio button, select, or other control with a state

I HEAR the current state of the control

WHEN I navigate to the form submission button

I HEAR the name and role of the button AND I can activate the button using the keyboard

WHEN I submit the form with invalid information

I HEAR that the form contains errors

I HEAR the relevant error messages

I can navigate to the fields that need to be corrected

Guided Tours

WHEN I use the Tab key to navigate to the guided tour

I SEE a visible focus indicator

I SEE focus move to each interactive control in the tour in a logical order

I SEE focus does not move to unrelated content behind the tour

AND I can complete the tour without using a mouse

I SEE  an option to skip or exit the tour

THEN when I activate the close option using the Spacebar or Enter key

I SEE the tour close

I SEE focus move to the top of the page

WHEN I use a desktop screen reader to move focus to the guided tour

I HEAR the name of the tour

I HEAR that the tour step is a dialog or other appropriate interactive component

I HEAR the heading or name of the current step

I HEAR the instructions for the step

I HEAR how many steps are included in the tour when this information is provided visually

I HEAR an option to skip or close the tour

THEN when I activate the close option using the Spacebar or Enter key

I HEAR the page content after the tour closes

WHEN I use a mobile screen reader to move focus to the guided tour

I HEAR the name of the tour

I HEAR that the tour step is a dialog or other appropriate interactive component

I HEAR the heading or name of the current step

I HEAR the instructions for the step

I HEAR how many steps are included in the tour when this information is provided visually

I HEAR an option to skip or close the tour

THEN when I activate the close option using the Spacebar or Enter key

I HEAR the page content after the tour closes