Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

bug(Mat Checkbox) Accessibility Issue: mat-table with mat-checkbox Column Announces "Blank" in Screen Readers During Arrow Navigation. #31816

Open
Labels
AccessibilityThis issue is related to accessibility (a11y) P2The issue is important to a large percentage of users, with a workaround area: material/checkbox area: material/table
@viralsp

Description

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Issue Description:

When users navigate table rows with keyboard arrow keys, screen readers such as NVDA and JAWS announce "blank" for each cell containing only a mat-checkbox, regardless of whether the checkbox (or cell) includes plain text, a visible label, an ARIA label, or visually hidden text.

Arrow navigation focuses on the mat-cell, not the checkbox itself.

As a result, the cell’s accessible name is not set or recognized, breaking expectations for accessible data tables and preventing screen reader users from knowing about the checkbox’s function or label.

Attempts to Resolve:

Added visible and visually hidden text, ARIA attributes (aria-label, aria-labelledby) to both the checkbox and the cell.

Changed cell roles (role="presentation", role="none").

None worked—the issue persists across Chrome and Firefox with latest Angular Material.

Impact:

This prevents screen reader users from understanding the table’s contents and interacting with checkboxes using keyboard navigation—contrary to accessibility guidelines for tables and forms.

Request:

Please investigate this problem. If a workaround or future fix is planned, guidance or updates would be greatly appreciated for developers and accessibility advocates.

Reproduction

Angular site mat table example with mat checkbox column link:

  1. Steps to Reproduce:

Create an Angular Material table with a column of mat-checkbox elements (with or without labels/text/ARIA attributes inside or outside the checkbox).

Use NVDA or JAWS and keyboard arrow keys to navigate between table cells.

Observe screen reader announces "blank" for these cells.
2.

Expected Behavior

Expected Behavior:

When a user navigates via arrow keys, the cell should announce the checkbox and its label/text.

Actual Behavior

Actual Behavior:

Screen readers consistently announce "blank" for every checkbox-only cell during arrow navigation.

Environment

  • Angular:
  • CDK/Material:
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y) P2The issue is important to a large percentage of users, with a workaround area: material/checkbox area: material/table

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /