Flutter / Inclusive interfaces and target evidence / Lesson 13
Accessibility, localization, and direction
Design meaning, focus, text expansion, and bidirectional layout as part of the interaction contract.
On this page
Lesson goals
- Make the action understandable without sight
- Localize messages as messages
- Use direction-aware geometry
Make the action understandable without sight
Accessibility begins with the task: what information does the user need, what action is possible, and what confirms its outcome? An iconโs shape alone may not communicate that meaning. Prefer standard controls that already carry interaction semantics and add concise labels where necessary. Avoid reading the same label twice by wrapping a control in redundant semantics without inspecting the resulting tree. Screen-reader order, keyboard focus, and visual order should support the same task, though their implementations differ. Automated checks are useful evidence, while manual assistive-technology testing remains necessary on intended targets.
Localize messages as messages
A localized sentence is not always built correctly by concatenating translated words around a number. Grammar, plural categories, and placeholder order differ between languages. Flutterโs localization workflow can generate typed message access from resource files, while Material localization delegates provide framework messages and direction conventions. Keep stable resource keys and describe placeholders so translators understand their meaning and units. Format dates, quantities, and currency with the selected locale policy rather than hard-coding separators. A translated interface can still be inaccessible if labels are missing or an error is announced without its field context.
Use direction-aware geometry
The first fragment uses EdgeInsetsDirectional and AlignmentDirectional so leading space and alignment follow the inherited text direction. In left-to-right context the extra start padding is on the left; in right-to-left context it is on the right. This is a layout rule, not a complete Arabic translation. Some icons should mirror and some should not, depending on their meaning. A media play symbol, a company mark, and a directional navigation arrow have different contracts. Test mixed-direction identifiers inside Arabic text because technical tokens can remain left-to-right even when surrounding prose is right-to-left.
Widget messageCard(String message) => Padding(
padding: const EdgeInsetsDirectional.only(start: 24, end: 8),
child: Align(alignment: AlignmentDirectional.centerStart,
child: Text(message)),
);
Leading padding and alignment follow the inherited TextDirection.A Localizations or Directionality ancestor establishes direction. Absolute left/right values would express a different contract.
Label icon actions and retain usable targets
The second fragment supplies a meaningful tooltip for a standard IconButton. It delegates activation to a callback instead of hiding data access inside the control. The label should come from localized resources in the application, and a pending or disabled state should be communicated consistently. Do not shrink hit areas solely to fit a dense mockup or disable text scaling to preserve a row. Responsive composition should allow labels to grow and controls to remain operable. Verify focus visibility and activation by keyboard as well as touch.
Widget refreshAction(VoidCallback? onRefresh) => IconButton(
tooltip: 'Refresh workshops',
onPressed: onRefresh,
icon: const Icon(Icons.refresh),
);
An enabled button exposes Refresh workshops; null onRefresh disables activation.The literal label is synthetic. Replace it with a generated localized message in a configured application.
Announce change without flooding the user
A search result count, form failure, or completed save may need an announcement, but announcing every keystroke or every intermediate rebuild can make the interface unusable. Decide which state transition matters and use appropriate semantics for that transition. Keep errors associated with the relevant field and move focus only when it helps the task, not whenever asynchronous data arrives. Test the entire flow with a screen reader, including a failure and recovery path. A semantics tree that looks plausible in a dump is useful but does not establish how every target reader speaks it.
Build an inclusive verification matrix
Include long Arabic translations, mixed Latin identifiers, large text, high contrast, keyboard-only use, and the intended screen readers. Check that a narrow layout still exposes the primary action and that text does not overlap or vanish. Use localization resource tests for missing keys and plural branches, widget tests for semantics and direction, and target checks for actual assistive interaction. Record the locale and accessibility settings in a reproducible report. Passing only the English default layout is not evidence that the translated workflow preserves information, order, or actionability.
Common errors and fixes
Arabic text aligns to the wrong leading edge
- Why it happens
- Absolute left/right geometry replaced logical start/end geometry.
- How to fix it
- Use directional values where the design follows reading direction.
- Prevent it next time
- Test both inherited directions with mixed content.
An icon button has no useful spoken action
- Why it happens
- The visual symbol was treated as a sufficient label.
- How to fix it
- Provide a concise localized action label through the suitable control API.
- Prevent it next time
- Inspect semantics and test the reader flow.
Scaled text is clipped to preserve a mockup
- Why it happens
- Fixed geometry assumed one font size and string length.
- How to fix it
- Allow wrapping, growth, or responsive rearrangement.
- Prevent it next time
- Include large text in ordinary layout review.
Check your understanding
1. Should every arrow icon be mirrored in Arabic?
Show worked solution
No. Decide from meaning. A control indicating progression in reading order commonly follows direction, while a symbol representing a fixed physical orientation may not. Review each semantic category with localized users and verify the actual widget configuration.
2. Why are translated word fragments around a number unreliable?
Show worked solution
Languages differ in plural categories, sentence order, and agreement. Use a whole localized message with a typed count placeholder and the required plural branches. Test representative values, including zero and categories relevant to Arabic, instead of assuming an English singular/plural split.
Key takeaways
- Make the action understandable without sight
- Build an inclusive verification matrix