Skip to content

Improve Button Accessibility for Screen Readers #7

Description

@brylie

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions