Currently, the buttons in our Flutter application may not have sufficient descriptive labels for screen readers. This creates a barrier for users with visual impairments. To enhance accessibility, we should review button labels and ensure they effectively convey the buttons' actions and purpose.
Tasks:
- Audit existing button labels: Carefully review the text and icons used on each button. Determine if they provide enough context for screen reader users to understand the button's function.
- Add
semanticsLabel where needed: For buttons where the visual label may not be fully descriptive, add the semanticsLabel property to ElevatedButton (or other button widgets used) and provide a clear textual description.
- Test with a screen reader: Use a screen reader (such as VoiceOver on iOS or TalkBack on Android) to test the updated buttons. Ensure the added descriptions accurately reflect the button's purpose.
Example:
ElevatedButton(
onPressed: () => kioskState.selectGender(Gender.female),
// ... other properties
semanticsLabel: 'Select female gender', // Example of a more descriptive label
),
Additional Considerations:
- Consult web accessibility guidelines (e.g., WCAG) for best practices on button labeling.
- Consider providing a means to toggle enlarged text for users with low vision.
Currently, the buttons in our Flutter application may not have sufficient descriptive labels for screen readers. This creates a barrier for users with visual impairments. To enhance accessibility, we should review button labels and ensure they effectively convey the buttons' actions and purpose.
Tasks:
semanticsLabelwhere needed: For buttons where the visual label may not be fully descriptive, add thesemanticsLabelproperty toElevatedButton(or other button widgets used) and provide a clear textual description.Example:
Additional Considerations: