Notice: This is a work in progress. Please submit feedback or suggestions.

Test: ARIA readonly grid

Screen Reader support level: partial (54/80)

Voice Control support level: not applicable (or no 'MUST' expectations)

On this page

About this test

This test ensures that grid semantics are conveyed.

Run this test and submit your results

Age of results

Results in this test range from a year ago to a year ago. See detailed information about test dates and versions for more information.

Caution

Failing or partial results may be out of date. The oldest result is from a year ago. Consider running this test and contributing results.

Test HTML

open the test page

HTML source is too long to display here.

Summary of Screen Reader support by expectation

* means that some support is hidden behind settings

Summary of Voice Control support by expectation

columnheader role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable
grid role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
Not applicable
gridcell role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech Recognition
ChromeChromeSafariSafariChrome
MUST convey its namenot applicablenot applicablenot applicablenot applicablenot applicable
MUST convey its rolenot applicablenot applicablenot applicablenot applicablenot applicable

* means that some support is hidden behind settings

Detailed support results by expectation

Expectation for the columnheader role: convey its name

This expectation is from the columnheader role feature.

Rationale:

A user needs to know the name of the header

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might say something like "Column 3, <header name>"

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Date, column header"
    • Command Notes: use arrow keys to navigate the table cells
JAWSIEyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, column 2"
    • Command Notes: use arrow keys to navigate the table cells
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, type in text"
    • Command Notes: use arrow keys to navigate the table cells
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, readonly, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, row 1, date, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, editable, row 1, column 2, name"
    • Command Notes: use arrow keys to navigate the table cells
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header"
    • Command Notes: use arrow keys to navigate the table cells
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="columnheader"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header"
    • Command Notes: use arrow keys to navigate the table cells
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name"
    • Command Notes: use arrow keys to navigate the table cells
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
Windows Speech RecognitionChromenot applicable-

Extended Support for: columnheader role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the columnheader role: convey its role

This expectation is from the columnheader role feature.

Rationale:

A user needs to be able to determine what headers apply to a given cell.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might say something like "Column 3, <header name>"
  • A screen reader might imply the role by conveying the header name when the moving between columns

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Date, column header"
    • Command Notes: use arrow keys to navigate the table cells
JAWSIEyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, column 2"
    • Command Notes: use arrow keys to navigate the table cells
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, type in text"
    • Command Notes: use arrow keys to navigate the table cells
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, readonly, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: column header role was not explicitly conveyed or implicitly conveyed by being announced as columns change when navigating grid data.
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, row 1, date, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, editable, row 1, column 2, name"
    • Command Notes: use arrow keys to navigate the table cells
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header"
    • Command Notes: use arrow keys to navigate the table cells
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="columnheader"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header"
    • Command Notes: use arrow keys to navigate the table cells
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safaripartial
  • Result: (fail)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: column header was not conveyed either explicitly or implicitly.
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="columnheader"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="columnheader"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
Windows Speech RecognitionChromenot applicable-

Extended Support for: columnheader role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the grid role: convey its name

This expectation is from the grid role feature.

Rationale:

A user needs to know the name of the grid so that they understand what it is for

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might announce the name when entering the grid

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
JAWSIEpartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, column 1, row 1, column 1, row 1, date column header"
JAWSFirefoxpartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, column 1, row 1, grid example, grid, date column header, type in text"
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table, grid example, has 3 rows, 2 columns, grid example, data grid, columns date, contains 3 rows, column header, column header, date, row 1 of 3, column 1 of 2 "
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table grid example, has 3 rows, two columns, date, readonly, column header, column header, date, row column 1 of 3, column 1 of 2 "
NVDAChromepartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, date, column 1 date"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, date, column header, row 1, date, column 1"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, column 1, editable, date"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, editable, Date column header, selected, editable, row 1, column 1, Date"
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header, focus mode"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table" <swipe right to enter first cell> "date, column header, row 1, in grid, grid example, 3 rows, 2 columns"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, 2 columns, 3 rows"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "leaving aria gridcell, entering grid example, table. entering grid example table, date, grid example, table, 2 columns, 3 rows."
Windows Speech RecognitionChromenot applicable-

Extended Support for: grid role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the grid role: convey its role

This expectation is from the grid role feature.

Rationale:

A screen reader user needs to be aware that they are entering a grid so that they know that grid keyboard commands are available.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Screen readers might convey the role as something like "grid"

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Grid end"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
    • Result Notes: Table semantics were conveyed in addition to grid semantics
JAWSIEpartial
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, column 1, row 1, column 1, row 1, date column header"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, column 1, row 1, grid example, grid, date column header, type in text"
    • Result Notes: table semantics were conveyed in addition to grid semantics
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table, grid example, has 3 rows, 2 columns, grid example, data grid, columns date, contains 3 rows, column header, column header, date, row 1 of 3, column 1 of 2 "
    • Result Notes: table role was conveyed in addition to the grid role. Also, very verbose output.
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to the end of `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, data grid, columns date, contains 3 rows"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table grid example, has 3 rows, two columns, date, readonly, column header, column header, date, row column 1 of 3, column 1 of 2 "
    • Result Notes: table role was also conveyed.
NVDAChromepartial
  • Result: (partial)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, date, column 1 date"
    • Result Notes: partially conveyed by the table role. Grid role hints at arrow key navigation, while table does not.
  • Result: (partial)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, date column header, row 1, date, column 1"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, date, column header, row 1, date, column 1"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
NVDAFirefoxpartial
  • Result: (partial)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, column 1, editable, date"
    • Result Notes: potentially implied by "editable" and "table", however this is a readonly grid.
  • Result: (partial)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, editable, date column header, editable, row 1, column 1, date"
    • Result Notes: potentially implied by "editable" and "table", however this is a readonly grid.
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, editable, Date column header, selected, editable, row 1, column 1, Date"
    • Result Notes: potentially implied by "editable" and "table", however this is a readonly grid.
OrcaFirefoxpartial
  • Result: (partial)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
  • Result: (partial)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "name, column header, alex"
    • Result Notes: partial because of the table context instead of grid
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header, focus mode"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table" <swipe right to enter first cell> "date, column header, row 1, in grid, grid example, 3 rows, 2 columns"
  • Result: (pass)
    • Test Case: Use Swipe left (or alt+left arrow) (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe left (or alt+left arrow) (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex, row 3, name, in grid, grid example, 3 rows, 2 columns"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex"
VoiceOver (macOS)Safaripartial
  • Result: (partial)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, 2 columns, 3 rows"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
  • Result: (partial)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of table"
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
  • Result: (partial)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "leaving aria gridcell, entering grid example, table. entering grid example table, date, grid example, table, 2 columns, 3 rows."
    • Result Notes: partially conveyed by table role. Grid role hints at arrow key navigation, while table does not.
Windows Speech RecognitionChromenot applicable-

Extended Support for: grid role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the grid role: switch to interaction mode

This expectation is from the grid role feature.

Rationale:

Grids are usually navigated via arrow keys, so those keys presses need to be sent directly to the browser and not intercepted by the screen reader.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: SHOULD
  • Voice Control: NA

Examples:

  • Screen readers might convey an earcon when the mode switches
  • Arrow keys will work for navigation without manually switching modes

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromepartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid with 2 columns and 3 rows"
    • Result Notes: was not automatically switched to forms mode
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Grid end"
    • Result Notes: mode was not switched to forms mode
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
JAWSIEpartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
    • Result Notes: was not automatically switched to forms mode
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
    • Result Notes: was not switched to forms mode
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, column 1, row 1, column 1, row 1, date column header"
JAWSFirefoxpartial
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, column 1, row 1, grid example, grid, date column header, type in text"
NarratorEdgenone
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table, grid example, has 3 rows, 2 columns, grid example, data grid, columns date, contains 3 rows, column header, column header, date, row 1 of 3, column 1 of 2 "
    • Result Notes: did not switch to forms mode
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to the end of `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, data grid, columns date, contains 3 rows"
  • Result: (fail)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table grid example, has 3 rows, two columns, date, readonly, column header, column header, date, row column 1 of 3, column 1 of 2 "
    • Result Notes: mode was not changed
NVDAChromepartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, date, column 1 date"
    • Result Notes: mode was not changed
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, date column header, row 1, date, column 1"
    • Result Notes: mode was changed
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, date, column header, row 1, date, column 1"
NVDAFirefoxpartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, column 1, editable, date"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, editable, date column header, editable, row 1, column 1, date"
    • Result Notes: mode was changed
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, editable, Date column header, selected, editable, row 1, column 1, Date"
OrcaFirefoxpartial
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header"
    • Result Notes: did not automatically switch to forms mode
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "name, column header, alex"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header, focus mode"
TalkBackChromenot applicable
  • Result: (na)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table" <swipe right to enter first cell> "date, column header, row 1, in grid, grid example, 3 rows, 2 columns"
  • Result: (na)
    • Test Case: Use Swipe left (or alt+left arrow) (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe left (or alt+left arrow) (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex, row 3, name, in grid, grid example, 3 rows, 2 columns"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinot applicable
  • Result: (na)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
  • Result: (na)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex"
VoiceOver (macOS)Safarinot applicable
  • Result: (na)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, 2 columns, 3 rows"
    • Result Notes: VoiceOver doesn't have a concept of modes
  • Result: (na)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of table"
  • Result: (na)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "leaving aria gridcell, entering grid example, table. entering grid example table, date, grid example, table, 2 columns, 3 rows."
Windows Speech RecognitionChromenot applicable-

Extended Support for: grid role: switch to interaction mode

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the grid role: convey boundaries

This expectation is from the grid role feature.

Rationale:

Screen reader users need to know when they enter and exist a grid

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • Screen readers might say something like "entering grid" and "exiting grid"

Grading method:

All of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid with 2 columns and 3 rows"
    • Result Notes: starting boundary was conveyed
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Grid end"
    • Result Notes: end boundary was conveyed
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "Grid end"
    • Result Notes: end boundary was conveyed
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
    • Result Notes: start boundary was implied by the grid role being conveyed
JAWSIEyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
    • Result Notes: conveyed the starting boundary
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
    • Result Notes: ending boundary was conveyed
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
    • Result Notes: ending boundary was conveyed
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, column 1, row 1, column 1, row 1, date column header"
    • Result Notes: start was conveyed by grid/table semantics
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid with 2 columns and 3 rows"
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid end"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, column 1, row 1, grid example, grid, date column header, type in text"
    • Result Notes: implied by grid role
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table, grid example, has 3 rows, 2 columns, grid example, data grid, columns date, contains 3 rows, column header, column header, date, row 1 of 3, column 1 of 2 "
    • Result Notes: starting boundary was implied by the grid role
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item (scan mode)) to navigate forwards to the end of `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Down arrow (Read next item (scan mode))
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "table exit, button, tab stop after"
    • Result Notes: end boundary was conveyed
  • Result: (pass)
    • Test Case: Use Up arrow (Read previous item (scan mode)) to navigate backwards to the end of `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Up arrow (Read previous item (scan mode))
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, data grid, columns date, contains 3 rows"
    • Result Notes: end boundary was implied by backwards navigation and the grid role
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table grid example, has 3 rows, two columns, date, readonly, column header, column header, date, row column 1 of 3, column 1 of 2 "
    • Result Notes: starting boundary was conveyed
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, date, column 1 date"
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "out of table, button tab stop after"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, date column header, row 1, date, column 1"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example table, date, column header, row 1, date, column 1"
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns, row 1, column 1, editable, date"
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "out of table, button, tab stop after"
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "grid example, table, editable, date column header, editable, row 1, column 1, date"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid example, table, editable, Date column header, selected, editable, row 1, column 1, Date"
OrcaFirefoxpartial
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header"
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: down arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: not possible to navigate to the end of the grid, virtual focus kept returning to the first row
    • Result Notes: fail because not possible to complete task
  • Result: (pass)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: up arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "name, column header, alex"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table with 3 rows, 2 columns, date, column header, name, column header, focus mode"
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table" <swipe right to enter first cell> "date, column header, row 1, in grid, grid example, 3 rows, 2 columns"
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "tab stop after, button, out of grid"
  • Result: (pass)
    • Test Case: Use Swipe left (or alt+left arrow) (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe left (or alt+left arrow) (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex, row 3, name, in grid, grid example, 3 rows, 2 columns"
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "date"
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "tab stop after, button"
  • Result: (fail)
    • Test Case: Use Swipe Left (Previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Left (Previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "alex"
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "grid example, table, 2 columns, 3 rows"
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forwards to the end of `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: within target
        • Keyboard focus is: within target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of table"
  • Result: (pass)
    • Test Case: Use VO + Left Arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: after target
        • Keyboard focus is: after target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Left Arrow (Read previous item)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "end of table"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="grid"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Tab (Read next focusable item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "leaving aria gridcell, entering grid example, table. entering grid example table, date, grid example, table, 2 columns, 3 rows."
Windows Speech RecognitionChromenot applicable-

Extended Support for: grid role: convey boundaries

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the gridcell role: convey its name

This expectation is from the gridcell role feature.

Rationale:

A screen reader user needs to know what to enter.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target"
    • Command Notes: use arrow keys to navigate the table cells
JAWSIEyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2" (row changes were announced as something like "row 2")
    • Command Notes: use arrow keys to navigate the table cells
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, target selected, type in text"
    • Command Notes: use arrow keys to navigate the table cells
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, read only, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, row 2, name, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, editable, row 2, name, column 2, target"
    • Command Notes: use arrow keys to navigate the table cells
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, target, column 2"
    • Command Notes: use arrow keys to navigate the table cells
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, name"
    • Command Notes: use arrow keys to navigate the table cells
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safariyes
  • Result: (pass)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safariyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
Windows Speech RecognitionChromenot applicable-

Extended Support for: gridcell role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the gridcell role: convey its role

This expectation is from the gridcell role feature.

Rationale:

A screen reader user needs to know how they can interact with the element. Voice control software might use the role to help users activate controls that do not have a visible name.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: MUST

Examples:

  • A screen reader might announce "grid cell"
  • A screen reader might announce "cell"
  • A screen reader might imply the role by announcing other grid semantics

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: implied by grid context
JAWSIEpartial
  • Result: (partial)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2" (row changes were announced as something like "row 2")
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: table context does not fully imply the gridcell role
JAWSFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, target selected, type in text"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: implied by grid context
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, read only, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: implied by grid context
NVDAChromepartial
  • Result: (partial)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, row 2, name, column 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: table context does not fully imply the gridcell role
NVDAFirefoxpartial
  • Result: (partial)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, editable, row 2, name, column 2, target"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: potentially implied by "editable"and "table", however this is a readonly grid, and the grid role was not correctly conveyed.
OrcaFirefoxpartial
  • Result: (partial)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, target, column 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: partial because of table context instead of grid
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, name"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: implied by grid role
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safaripartial
  • Result: (fail)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
  • Result: (partial)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: partial because of table context instead of grid
Windows Speech RecognitionChromenot applicable-

Extended Support for: gridcell role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Expectation for the gridcell role: convey the position of the header (row/column) when row and columns exist

This expectation is from the gridcell role feature.

Rationale:

A user needs to be able to determine where they are while navigating a table or grid.

Strength of this expectation for different types of assistive technologies:

  • Screen Readers: MUST
  • Voice Control: NA

Examples:

  • A screen reader might say something like "Column 3"

Grading method:

Just one of the listed commands must pass for the expectation to pass.

ATBrowserHas SupportOutput
Dragon Naturally SpeakingChromenot applicable-
JAWSChromepartial
  • Result: (partial)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: when changing columns, the new column header name was conveyed. However, no information was conveyed about row position.
JAWSIEyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and IE.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2" (row changes were announced as something like "row 2")
    • Command Notes: use arrow keys to navigate the table cells
JAWSFirefoxnone
  • Result: (fail)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch JAWS and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, target selected, type in text"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: no indication of row or column position conveyed
NarratorEdgeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Narrator and Edge.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, read only, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: column and row positions are conveyed when changing columns and rows
NVDAChromeyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, row 2, name, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch NVDA and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, editable, row 2, name, column 2, target"
    • Command Notes: use arrow keys to navigate the table cells
OrcaFirefoxyes
  • Result: (pass)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch Orca and Firefox.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, column header, target, column 2"
    • Command Notes: use arrow keys to navigate the table cells
TalkBackChromeyes
  • Result: (pass)
    • Test Case: Use Swipe right (or alt+right arrow) (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch TalkBack and Chrome.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe right (or alt+right arrow) (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target, name"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: A change of column header along with column and row positions were conveyed when moving to a new row or column.
Voice Access (Android)Chromenot applicable-
Voice Control (iOS)Safarinot applicable-
Voice Control (MacOS)Safarinot applicable-
VoiceOver (iOS)Safarinone
  • Result: (fail)
    • Test Case: Use Swipe Right (Next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (iOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: Swipe Right (Next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safaripartial
  • Result: (fail)
    • Test Case: Use <keyboard command> (Keyboard command while in forms or application mode) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: <keyboard command> (Keyboard command while in forms or application mode)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "target"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: position was not conveyed at all. No information was conveyed about position changes when moving to new rows or columns.
  • Result: (pass)
    • Test Case: Use VO + Right arrow (Read next item) to navigate forward to `[role="gridcell"]`
      1. Launch VoiceOver (macOS) and Safari.
      2. Navigate to the test page.
      3. Find the target element(s) that you will test against. Identify all elements that match this selector:[role="gridcell"]
        • If multiple elements match the selector, repeat this test for all instances. However, choose a single instance to report against. If you feel that the selector should be more specific, please open a GitHub Issue.
      4. Position and configure the screen reader so that the following conditions are met
        • Virtual focus is: before target
        • Keyboard focus is: before target
        • Mode is: auto (do not explicitly change the mode)
      5. Issue the command: VO + Right arrow (Read next item)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "name, target, column 2 of 2"
    • Command Notes: use arrow keys to navigate the table cells
Windows Speech RecognitionChromenot applicable-

Extended Support for: gridcell role: convey the position of the header (row/column) when row and columns exist

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWSEdgeunknown-
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
NVDAEdgeunknown-
TalkBackFirefoxunknown-
Voice Access (Android)Firefoxnot applicable-
VoiceOver (iOS)Chromeunknown-
VoiceOver (macOS)Chromeunknown-
VoiceOver (macOS)Firefoxunknown-
OrcaChromeunknown-
Voice Control (MacOS)Chromenot applicable-
Voice Control (MacOS)Firefoxnot applicable-
Windows Speech RecognitionEdgenot applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2020.2003.13Chrome8119092020-05-15
JAWS2020.2003.13IE1119092020-05-15
JAWS2020.2003.13Firefox7619092020-05-15
Narrator1909Edge4419092020-05-15
NVDA2019.3.1Chrome8119092020-05-15
NVDA2019.3.1Firefox7619092020-05-15
Orca3.36.1Firefox76Ubuntu 20.042020-05-15
TalkBack8.1Chrome80102020-05-15
VoiceOver (iOS)13.4.1Safari13.4.113.4.12020-05-15
VoiceOver (macOS)10.15.4Safari13.110.15.42020-05-15

History

  • 2020-05-15 Draft the test