Flutter accessibility code samples
Browse code samples to learn how to build more accessible Flutter apps.
Accessibility code samples
- Accessibility action
Accessibility action on Flutter
Accessibility actions provide alternative ways for for users of assistive technologies to perform actions.
- Accessibility announcement
Accessibility announcement on Flutter
Users of assistive technologies should be made aware of important changes in content through accessibility announcements.
- Accessibility dialog
Accessibility dialog on Flutter
A dialog overlays the screen and offers one or more actions to proceed.
- Accessibility focus indicator
Accessibility focus indicator on Flutter
Users should know which element has focus when using a keyboard or assistive technology.
- Accessibility focus
Accessibility focus on Flutter
Sometimes you need to programmatically move the accessibility focus to a specific element.
- Accessibility focusability
Accessibility focusability on Flutter
An element should indicate whether it should be focusable by assistive technologies or not.
- Accessibility group
Accessibility group on Flutter
It is easier and quicker for users of assistive technologies to interact with grouped elements.
- Accessibility hint
Accessibility hint on Flutter
An accessibility hint helps users to understand what will happen after performing an action.
- Accessibility language
Accessibility language on Flutter
When content is written in multiple languages, foreign words should ideally be indicated in their respective language.
- Accessibility label
Accessibility label on Flutter
An accessibility label helps users of assistive technologies to identify elements on the screen.
- Accessibility link
Accessibility link on Flutter
Links should be accessible for users of assistive technologies.
- Accessibility live region
Accessibility live region on Flutter
A live region allows users of assistive technologies to receive updates whenever important information on the screen changes.
- Accessibility modal
Accessibility modal on Flutter
A modal overlays the screen with additional content.
- Accessibility name
Accessibility name on Flutter
The accessibility name indicates the name used for interface elements by assistive technologies.
- Accessibility order
Accessibility order on Flutter
Assistive technologies try to determine a logical accessibility order based on the placement and properties of the elements on the screen.
- Accessibility role
Accessibility role on Flutter
An accessibility role helps users of assistive technologies to understand the purpose of elements on the screen.
- Accessibility state
Accessibility state on Flutter
An accessibility state helps users of assistive technologies to understand the state of elements on the screen.
- Accessibility value
Accessibility value on Flutter
An accessibility value helps users of assistive technologies to understand the state of elements on the screen.
Element code samples
- Element focus change
Element focus change on Flutter
Whenever an element receives focus, it should not automatically trigger an event which changes context.
- Element identification
Element identification on Flutter
Functionality that is repeated on multiple screens should use consistent identification.
- Element position
Element position on Flutter
Components that are repeated on multiple screens should have a consistent position.
Input code samples
- Input cancellation
Input cancellation on Flutter
Users should be able to cancel accidental interaction.
- Input content type
Input content type on Flutter
Setting the content type for input fields helps user entering data.
- Input errors
Input errors on Flutter
Users should be notified when they make input errors.
- Input gestures
Input gestures on Flutter
Gesture activated functionality should also be available without the use of gestures.
- Input instructions
Input instructions on Flutter
When a label might not describe the requested input sufficiently, you should add additional instructions.
- Input keyboard type
Input keyboard type on Flutter
Setting the keyboard type for input fields helps user entering data.
- Input label
Input label on Flutter
Input fields should have labels so that users know what input data is expected.
- Input motion
Input motion on Flutter
Provide an alternative way for actions activated by motion, to allow everyone to use the functionality.
- Input predictable
Input predictable on Flutter
Whenever a user provides input, there should be no change of context.
Keyboard code samples
- Keyboard order
Keyboard order on Flutter
By adjusting the keyboard order, you can provide a great experience for users that control their device using a hardware keyboard.
- Keyboard shortcuts
Keyboard shortcuts on Flutter
Most people operate their smartphones with touch, but some people use an external keyboard.
Quality code samples
Linting on Flutter
Linting is the process of running a tool which analyzes your code for potential errors.
Media code samples
- Audio control
Audio control on Flutter
Users should be able to control audio whenever it plays automatically.
- Audio description
Audio description on Flutter
Videos should include audio description when important visual details are shown which you cannot hear.
- Live captions
Live captions on Flutter
Captions should be provided in real-time to enable users to understand what is being said in live videos.
Captions on Flutter
Captions should be provided to enable users to understand what is being said in videos.
Transcript on Flutter
Videos should contain a transcript to allow users to read what is shown in media, such as a video or podcast.
Screen code samples
- Reduced animations
Reduced animations on Flutter
Content which conveys a sense of motion can be a barrier for users.
Contrast on Flutter
Apps should provide enough contrast between text and its background so that it can be read by people with moderately low vision.
- Dark mode
Dark mode on Flutter
Dark mode darkens background colours and provides a more comfortable viewing experience in low light.
- Frequent flashes
Frequent flashes on Flutter
Rapidly flashing images or views can cause seizures for some users.
- Descriptive headers
Descriptive headers on Flutter
Screens should have descriptive headers, this helps users find specific content and orient themselves within your app.
- Descriptive labels
Descriptive labels on Flutter
Screens should have descriptive labels, these help users recognize which purpose controls have.
- Screen orientation
Screen orientation on Flutter
Apps should adapt to the preferred display orientation of the user.
Reflow on Flutter
Content on the screen should reflow based on the users' preferences.
- Search functionality
Search functionality on Flutter
Users might have difficulty finding a specific screen.
- Skip content
Skip content on Flutter
It can be helpful for users to skip repeated blocks of content.
- Adjustable timing
Adjustable timing on Flutter
Everyone, including people with disabilities, should have adequate time to interact with your app.
- Screen title
Screen title on Flutter
Each screen should have a descriptive title, which helps users with identifying the screen.
Text code samples
- Bold text
Bold text on Flutter
Apps should use bold text when users have indicated this as a preference in the system settings.
- Text element
Text element on Flutter
Always use text elements to display text, unless this is not possible due to styling, such as text logo's.
Localization on Flutter
Assistive technologies, such as the screen reader, use the locale for the pronunciation of utterances.
- Scale text
Scale text on Flutter
Apps should scale text to the size specified by users in the system settings.
- Text spacing
Text spacing on Flutter
Content should adapt to increased spacing between lines, words, letters, and paragraphs.
- Text truncation
Text truncation on Flutter
Text should never get truncated in your app, even when users have enlarged their font size.