Important: This website does not attempt to establish a standard for how assistive technologies must behave. Read the FAQ for more information. Additionally, this is a work in progress. Please submit feedback or suggestions.

Test: ARIA readonly grid

Screen Reader support level: partial (73/88)

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

On this page

About this test

This test ensures that grid semantics are conveyed.

Submit new test results

Age of results

Results in this test range from 10 days ago to 5 years 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 5 years ago. Consider running this test and contributing results.

Test HTML

Open the test case HTML file

HTML source is too long to display here.

Summary of Screen Reader support by expectation

columnheader role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportednonesupportedsupportedsupportedsupportedsupportedsupportedsupported
grid role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportedsupportedpartialpartialpartialpartialsupportedsupportedpartial
SHOULD switch to interaction modesupportedsupportedsupportednonesupportedsupportedsupportedsupportednot applicablenot applicablenot applicable
MUST convey boundariessupportedsupportedsupportedsupportedsupportedsupportedsupportedpartialsupportedsupportedsupported
gridcell role
ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its namesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported
MUST convey its rolesupportedsupportedsupportedsupportedpartialpartialpartialpartialsupportedsupportedpartial
MUST convey the position of the header (row/column) when row and columns existpartialpartialnonesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

* 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 RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
grid role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
Not applicable
gridcell role
ExpectationDragon Naturally SpeakingVoice Access (Android)Voice Control (iOS)Voice Control (MacOS)Windows Speech RecognitionWindows Voice Access
ChromeChromeSafariSafariEdgeChromeEdgeChrome
MUST convey its namenot applicablenot applicablenot applicablenot applicablenot applicablenot applicablenot applicablenot applicable
MUST convey its rolenot applicablenot applicablenot applicablenot applicablenot applicablenot applicablenot applicablenot applicable

* means that some support is hidden behind settings

Summary of Keyboard support by expectation

columnheader role
ExpectationWindows KeyboardMac KeyboardiOS KeyboardAndroid Keyboard
ChromeFirefoxEdgeChromeSafariSafariChrome
Not applicable
grid role
ExpectationWindows KeyboardMac KeyboardiOS KeyboardAndroid Keyboard
ChromeFirefoxEdgeChromeSafariSafariChrome
Not applicable
gridcell role
ExpectationWindows KeyboardMac KeyboardiOS KeyboardAndroid Keyboard
ChromeFirefoxEdgeChromeSafariSafariChrome
Not 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
JAWSEdgeyes
  • 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 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: "Date, column header"
    • 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, name, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAEdgeyes
  • 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 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, column header, row 1, 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="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, column header, column 2"
    • 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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: columnheader role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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
JAWSEdgeyes
  • 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 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: "Date, column header"
    • 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.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
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, name, column 2"
    • Command Notes: use arrow keys to navigate the table cells
NVDAEdgeyes
  • 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 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, column header, row 1, 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="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, column header, column 2"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safariyes
  • 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.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: columnheader role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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-
JAWSChromeyes
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
JAWSEdgeyes
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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)
        • After issuing the command, virtual focus should be: target
      6. Record results for the relevant expectations
    • Output: "Grid with 2 columns and 3 rows"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
JAWSFirefoxyes
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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 (Jump to 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 (Jump to 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 "
NVDAChromeyes
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
NVDAEdgeyes
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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)
        • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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: "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)Safariyes
  • Result: (pass)
    • 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: "Grid example, Date row header, column header, row 1, column 1, start of table, 3 rows and 2 columns"
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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: grid role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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)
        • 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 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)
        • 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 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: "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
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 (Jump to 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 (Jump to 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 (Jump to 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 (Jump to 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: "table with 3 rows and 2 columns name column 2 alex"
    • 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.
NVDAEdgepartial
  • Result: (partial)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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)
        • 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 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)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns name column 2 alex"
    • 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 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: "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)Safariyes
  • Result: (pass)
    • 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: "Grid example, Date row header, column header, row 1, column 1, start of table, 3 rows and 2 columns"
  • Result: (pass)
    • 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: "Grid example, name, alex, row 3, column 2, table end"
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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: grid role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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.
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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-
JAWSChromeyes
  • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
JAWSEdgeyes
  • Result: (fail)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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)
        • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: Use Up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch JAWS 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)
        • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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: "Grid example, table, column 1, row 1, Grid example, grid, column 1, row 1, date column header"
JAWSFirefoxyes
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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 (Jump to 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 (Jump to 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: Use Up arrow (Jump to 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 (Jump to 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
NVDAChromeyes
  • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • 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: "table with 3 rows and 2 columns name column 2 alex"
    • Result Notes: mode was not changed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
NVDAEdgeyes
  • Result: (fail)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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)
        • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (fail)
    • Test Case: Use up arrow (Read previous item) to navigate backwards to the end of `[role="grid"]`
      1. Launch NVDA 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)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns name column 2 alex"
    • Result Notes: mode was not changed
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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: "grid example table, date, column header, row 1, date, column 1"
NVDAFirefoxyes
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
OrcaFirefoxyes
  • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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"
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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: "Grid example, Date row header, column header, row 1, column 1, start of table, 3 rows and 2 columns"
  • 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: "Grid example, name, alex, row 3, column 2, table end"
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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot 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-
JAWS 2020.2003.13IE 11yes
  • 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"
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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
JAWSEdgeyes
  • Result: (pass)
    • Test Case: Use Down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch JAWS 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)
        • 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 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)
        • 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 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)
        • 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 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: "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
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 (Jump to 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 (Jump to 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 (Jump to 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 (Jump to 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 (Jump to 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 (Jump to 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: "table with 3 rows and 2 columns name column 2 alex"
  • 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"
NVDAEdgeyes
  • Result: (pass)
    • Test Case: Use down arrow (Read next item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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)
        • 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 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)
        • 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 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)
        • After issuing the command, virtual focus should be: end of target
      6. Record results for the relevant expectations
    • Output: "table with 3 rows and 2 columns name column 2 alex"
  • Result: (pass)
    • Test Case: Use Tab (Read next focusable item) to navigate forward to `[role="grid"]`
      1. Launch NVDA 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: "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)Safariyes
  • Result: (pass)
    • 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: "Grid example, Date row header, column header, row 1, column 1, start of table, 3 rows and 2 columns"
  • Result: (pass)
    • 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: "name, alex, column 2, table end"
  • Result: (pass)
    • 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: "Grid example, name, alex, row 3, column 2, table end"
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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: grid role: convey boundaries

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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
JAWSEdgeyes
  • 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 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: "name, target"
    • 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
NVDAEdgeyes
  • 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 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, 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: "name, target, column 2"
    • 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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: gridcell role: convey its name

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11yes
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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
JAWSEdgeyes
  • 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 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: "name, target"
    • Command Notes: use arrow keys to navigate the table cells
    • Result Notes: implied by grid context
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
NVDAEdgepartial
  • 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 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, 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)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: "name, target, column 2"
    • 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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot applicable-

Extended Support for: gridcell role: convey its role

These are less common combinations

ATBrowserHas SupportOutput
Dragon Naturally SpeakingIEnot applicable-
Dragon Naturally SpeakingFirefoxnot applicable-
JAWS 2020.2003.13IE 11partial
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot 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.
JAWSEdgepartial
  • 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 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: "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.
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
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
Grading Note: There is no known/documented support. There may still be support for this expectation, but it is undocumented. If this is the case, please report this issue.
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
NVDAEdgeyes
  • 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 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, 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)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: "name, target, column 2"
    • Command Notes: use arrow keys to navigate the table cells
VoiceOver (macOS)Safariyes
  • 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.
    • Grading note: This command may be expected to fail. This result simply indicates that it did not yield support.
  • 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 RecognitionEdgenot applicable-
Windows Speech RecognitionChromenot applicable-
Windows Voice AccessEdgenot applicable-
Windows Voice AccessChromenot applicable-
Windows KeyboardChromenot applicable-
Windows KeyboardFirefoxnot applicable-
Windows KeyboardEdgenot applicable-
Mac KeyboardChromenot applicable-
Mac KeyboardSafarinot applicable-
iOS KeyboardSafarinot applicable-
Android KeyboardChromenot 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-
JAWS 2020.2003.13IE 11yes
  • 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
NarratorFirefoxunknown-
NarratorChromeunknown-
NarratorIEunknown-
NVDAIEunknown-
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-
Mac KeyboardFirefoxnot applicable-
Android KeyboardFirefoxnot applicable-
Back to top

Dates and Versions of tested combinations

ATAT VersionBrowserBrowser versionOS versionDate tested
JAWS2021.2107.12Chrome92Windows 10 version 21h12021-07-28
JAWS2021.2107.12Edge92Windows 10 version 21h12021-07-28
JAWS2020.2003.13Firefox76Windows 10 version 19092020-05-15
NarratorWindows 10 version 1909Edge44Windows 10 version 19092020-05-15
NVDA2021.1Chrome92Windows 10 version 21h12021-07-28
NVDA2021.1Edge92Windows 10 version 21h12021-07-28
NVDA2019.3.1Firefox76Windows 10 version 19092020-05-15
Orca3.36.1Firefox76Ubuntu 20.042020-05-15
TalkBack8.1Chrome80102020-05-15
VoiceOver (iOS)18.1Safari18.118.12024-11-11
VoiceOver (macOS)10.15.4Safari13.110.15.42020-05-15

History

  • 2020-05-15 Draft the test
  • 2021-07-28 Added Narrator results for NVDA and JAWS, updated NVDA+Chrome results.
  • 2024-11-11 Updated iOS results. Thanks @SimoAccessiWay!