← ClaudeAtlas

flutter-improving-accessibilitylisted

Configures a Flutter app to support assistive technologies like Screen Readers. Use when ensuring an application is usable for people with disabilities.
openplaybooks-dev/converge · ★ 3 · AI & Automation · score 71
Install: claude install-skill openplaybooks-dev/converge
# Implementing Flutter Accessibility ## Contents - [UI Design and Styling](#ui-design-and-styling) - [Accessibility Widgets](#accessibility-widgets) - [Workflows](#workflows) - [Examples](#examples) ## UI Design and Styling Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings. * **Font Scaling:** Ensure layouts provide sufficient room to render all contents when font sizes are increased to maximum OS settings. Avoid hardcoding fixed heights on text containers. * **Color Contrast:** Maintain a contrast ratio of at least 4.5:1 for small text and 3.0:1 for large text (18pt+ regular or 14pt+ bold) to meet W3C standards. * **Tap Targets:** Enforce a minimum tap target size of 48x48 logical pixels to accommodate users with limited dexterity. ## Accessibility Widgets Utilize Flutter's accessibility widgets to manipulate the semantics tree exposed to assistive technologies (TalkBack, VoiceOver). * **`Semantics`**: Annotate the widget tree with descriptions of widget meaning. Assign specific roles using `SemanticsRole` enum (e.g., button, link, heading) for custom components. * **`MergeSemantics`**: Wrap composite widgets to merge semantics of all descendants into a single selectable node for screen readers. * **`ExcludeSemantics`**: Drop semantics of all descendants, hiding redundant or decorative sub-widgets from accessibility tools. ## Workflows ### Accessibility Implementati