Closed rymesaint closed 10 months ago
I see this on OutlinedButton, too.
Hi @rymesaint and @fennelhans!
Would you be able to share a code snippet that illustrates this problem?
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.
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"
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.
Since Checkbox widget doesnt have semantic i got this warning Accessibility issue 1: Tap area is missing a semantic label