Skip to content

[web] VoiceOver ignores aria-label on table cells #171991

Closed

Description

@yjbanov

Currently we prefer aria-label on table cells (source). Turns out VoiceOver doesn't like it. It simply ignores the label, reading "blank" on table cells. We should instead use LabelRepresentation.domText or LabelRepresentation.sizedSpan.

Sample:

import 'package:flutter/material.dart';
import 'package:flutter/semantics.dart';

/// A simple data model for the 2x2 table content.
///
/// This class holds the matrix of strings that will be displayed in the table.
class TableData {
  final List<List<String>> data;

  /// Initializes the table data with a predefined 2x2 grid of strings.
  TableData()
      : data = const <List<String>>[
          <String>['Top-Left', 'Top-Right'],
          <String>['Bottom-Left', 'Bottom-Right'],
        ];
}

void main() {
  runApp(const SimpleTableApp());
  SemanticsBinding.instance.ensureSemantics();
}

/// The main application widget for displaying a 2x2 table.
class SimpleTableApp extends StatelessWidget {
  const SimpleTableApp({super.key});

  @override
  Widget build(BuildContext context) {
    final TableData tableData = TableData();

    return MaterialApp(
      title: 'Table Display',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('2x2 Table'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Table(
              // Defines borders for all cells for clear separation.
              border: TableBorder.all(color: Colors.grey, width: 1.0),
              children: tableData.data.map<TableRow>((List<String> row) {
                return TableRow(
                  children: row.map<Widget>((String cellText) {
                    return TableCell(
                      verticalAlignment: TableCellVerticalAlignment.middle,
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Text(
                          cellText,
                          textAlign: TextAlign.center,
                          style: const TextStyle(fontSize: 16.0),
                        ),
                      ),
                    );
                  }).toList(),
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

Activity

  1. added
    engineflutter/engine related. See also e: labels.
    a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)
    platform-webWeb applications specifically
    team-webOwned by Web platform team
    triaged-webTriaged by Web platform team
    P1High-priority issues at the top of the work list
    on Jul 11, 2025
  2. yjbanov commented on Jul 11, 2025

    @yjbanov
    ContributorAuthor

    Optimistically assigned @hannah-hyj (who added table a11y support), but LMK if I should find another owner.

  3. changed the title [-][web] VoiceOver ignore aria-label on table cells[/-] [+][web] VoiceOver ignores aria-label on table cells[/+] on Jul 11, 2025
  4. yjbanov commented on Jul 11, 2025

    @yjbanov
    ContributorAuthor

    Thanks, @vaishnavi-cdf! One thing that could help is if you could test @hannah-hyj's fix on as many screen readers as you have access to. We test on macos (VoiceOver), iOS (VoiceOver), Android (TalkBack), Windows (JAWS, NVDA, Narrator), and ChromeOS (Chromevox).

  5. github-actions commented on Jul 25, 2025

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  6. locked as resolved and limited conversation to collaborators on Jul 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)engineflutter/engine related. See also e: labels.platform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions