Checkbox semantic

[rymesaint]

Since Checkbox widget doesnt have semantic i got this warning Accessibility issue 1: Tap area is missing a semantic label

[fennelhans]

I see this on OutlinedButton, too.

[aednlaxer]

Hi @rymesaint and @fennelhans!

Would you be able to share a code snippet that illustrates this problem?

[fennelhans]

Hi @rymesaint and @fennelhans!

Would you be able to share a code snippet that illustrates this problem?

I imagine it's probably as simple as this:

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

class Test extends StatelessWidget {
  const Test({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AccessibilityTools(
      child: MaterialApp(
        home: Scaffold(
          body: OutlinedButton(
            onPressed: () {},
            child: const Text('Button'),
          ),
        ),
      ),
    );
  }
}

Although I haven't tested it locally. It's the fact that the OutlinedButton (and Checkbox) don't have the option for a semantic label.

[rymesaint]

just use Checkbox widget it doesnt have any semantic option but the warning give me "Accessibility issue 1: Tap area is missing a semantic label"

[aednlaxer]

Since Checkbox widget doesnt have semantic i got this warning Accessibility issue 1: Tap area is missing a semantic label

I don't think this is a bug in accessibility tools. The tools just find all semantic issues it can find. Not having a semantic label for Checkbox is an actual accessibility issue that could be fixed by providing a semantics label using Semantics widget. Same with any other tappable widget - if that widget has no option for semantic label, the issue of not having a label is still there and accessibility tools should not be ignoring these widgets simply because they have no options to set a label. In the end, it's developer's responsibility to find a way for providing a label.

I've checked missing Checkbox label using Flutter 3.16. Checkbox widget now has semanticLabel property, providing a label directly to this widget is now possible. Other options are to use Semantics or CheckboxListTile.

Given example with OutlinedButton doesn't produce any accessibility issues (Flutter 3.16). The reason is that button's child, Text, is used as semantic node's label. For a screen reader it would look like This widget is a button, action - "<Text>'s text here".

Slightly different example gives a missing label issue:

Scaffold(
  body: OutlinedButton(
    onPressed: () {},
    child: Icon(Icons.abc),
   ),
)

The reason is that Icon has no label and there's nowhere to get this label from. Consider using Semantics or Icon's semanticLabel property in this case.