Menu
Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
VoiceOver and TalkBack testing in Flutter ensures that your app is accessible to users with visual impairments. Both VoiceOver (for iOS devices) and TalkBack (for Android devices) are essential screen readers that help users interact with app content. Conducting thorough testing ensures compatibility with these accessibility tools. It also helps improve the user experience for a broader audience and identify potential issues with navigability, element focus, and text-to-speech output. Proper testing guarantees that the app meets accessibility standards, reduces usability barriers, and supports inclusivity. Prerequisites Flutter SDK, Xcode (for iOS devices), Android Studio (for Android devices). Physical iOS and Android devices or simulators/emulators. Set up a Flutter Project Using This Guide: Getting Started with Flutter: Setup and Basics Set Up the Testing Environment Enable VoiceOver (For iOS Devices) On an iOS device or simulator, navigate to Settings > Accessibility > VoiceOver . Toggle the VoiceOver switch to the on position. A tutorial will appear on first activation; complete it to proceed. For simulators in Xcode, use Command + Option + F5 to toggle VoiceOver, or enable it via the Accessibility Inspector in Xcode's Device menu. Enable TalkBack (For Android Devices) On an Android device or emulator, open Settings > Accessibility > TalkBack . Toggle the Use TalkBack switch to enable it. A brief tutorial will guide the initial setup. For emulators in Android Studio, access it through the extended controls panel under Accessibility, or use adb commands like adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/talkback followed by adb shell settings put secure accessibility_enabled 1 . Conduct VoiceOver Testing in Flutter Navigate the App Using Rotor Gestures & Swipe Controls Launch the Flutter app on an iOS device or simulator with VoiceOver enabled. Perform a three-finger swipe to start or stop VoiceOver speech. Use a right-finger swipe to move focus to the next element and a left-finger swipe to move to the previous element. Rotate two fingers on the screen to access the Rotor menu. It helps to list navigable items like headings, links, or form controls; select an item from the Rotor and swipe right or left to jump between them. Test multi-finger gestures, such as a 2-finger double-tap to activate the focused element or a three-finger swipe up/down to scroll. Verify Semantic Labels, Traits, Hints In Flutter code, wrap widgets with the Semantics widget to provide labels, hints, and traits. For example, to add a semantic label to a button: Semantics( label: 'Submit button', hint: 'Double-tap to submit the form', button: true, // Trait indicating it's a button child: ElevatedButton( onPressed: () {}, child: Text('Submit'), ), ) Run the app with VoiceOver on and swipe to focus the element; VoiceOver should announce the label first, followed by the hint on a two-finger single-tap. Verify traits by checking if interactions like double-tap activation work as expected. Exclude non-essential elements using excludeSemantics: true to prevent VoiceOver from reading them. Focus Management & Dynamic Content Ensure logical focus order in Flutter by using the Semantics widget's sortKey property to define traversal sequence: Semantics( sortKey: OrdinalSortKey(1.0), child: Text('First item'), ), Semantics( sortKey: OrdinalSortKey(2.0), child: Text('Second item'), ) Test by swiping right through the app; focus should move sequentially without skipping or looping unexpectedly. For dynamic content, such as lists updated via setState, use Semantics with mergeAllDescendantsIntoOneSemantics for grouped elements. Then verify that VoiceOver announces insertions or removals correctly without losing focus on the current element. Monitor announcements during state changes to confirm they describe updates accurately. Debug with Accessibility Inspector In Xcode, open the Simulator and launch the Flutter app. Go to Xcode > Open Developer Tool > Accessibility Inspector . Select the Inspect mode and hover over app elements; the inspector displays the semantic label, hint, traits, and frame. Enable the Accessibility Tree view to see the hierarchy of focusable elements. Use the simulator's VoiceOver output in the inspector to hear announcements while interacting. For code-level debugging, add Flutter's semantics debugging by setting debugSemanticsDisableAnimations to true in the app's main function and inspect the Semantics tree via Flutter Inspector in VS Code or Android Studio. Conduct TalkBack Testing in Flutter Navigate the App Using Swipe Gestures and Volume Key Shortcuts Launch the Flutter app on an Android device or emulator with TalkBack enabled. Swipe right with one finger to move focus to the next element and swipe left to move to the previous element. Use a two-finger swipe up or down to scroll the view. Press the volume up key to navigate forward through focusable items, and press the volume down key to navigate backward. Double-tap with one finger to activate the focused element, or use a two-finger double-tap to open the context menu for additional actions like reading all content. Verify Content Descriptions & Headings In Flutter, apply content descriptions using the Semantics widget's label property, which maps to android:contentDescription on Android. For headings, set the header trait: Semantics( label: 'User profile heading', header: true, child: Text( 'Profile', style: Theme.of(context).textTheme.headlineSmall, ), ) Run the app with TalkBack on and swipe to focus the element; TalkBack should announce the label as the primary description. For images or icons without visible text, add explicit labels to ensure they are described. Verify headings by checking if TalkBack treats them as structural elements, allowing jumps via the local context menu (two-finger swipe right from the top). Focus Order & Announcements Define focus order in Flutter using the Semantics widget's sortKey to establish traversal sequence: Semantics( sortKey: OrdinalSortKey(1.0), child: ElevatedButton( onPressed: () {}, child: Text('First button'), ), ), Semantics( sortKey: OrdinalSortKey(2.0), child: ElevatedButton( onPressed: () {}, child: Text('Second button'), ), ) Test by swiping right; focus should follow the defined order without gaps. For announcements, use Semantics with explicitChildNodes or live region semantics for dynamic updates, such as notifying changes in a list: Semantics( liveRegion: true, label: 'New item added', child: ListView.builder(...), ) Swipe through during state changes; TalkBack should automatically announce the update without requiring manual focus shift. Automated Checks with Accessibility Scanner Install the Accessibility Scanner app from the Google Play Store on the Android device. Launch the Flutter app, then open Accessibility Scanner and select Scan now. Point the camera or use the on-screen scanner to analyze the current screen. It helps detect issues such as missing content descriptions, low contrast, or incorrect touch target sizes. Review the report for violations, such as elements without labels, and fix them in Flutter code by adding Semantics properties. Rerun scans after updates to confirm resolutions, focusing on TalkBack-specific metrics like actionable element descriptions. Important Considerations for VoiceOver & TalkBack Testing Semantics Widget Provide concise, descriptive labels in Semantics to avoid overwhelming announcements; use hints for actions and exclude visible text labels to prevent duplication. On iOS, traits like button influence VoiceOver gestures. On Android, labels map to content descriptions for TalkBack. Test cross-platform by running on both simulators, ensuring announcements match intent without platform-specific jargon. Semantics( label: 'Add to cart', hint: 'Double-tap to add item', button: true, child: IconButton(onPressed: addToCart, icon: Icon(Icons.add_shopping_cart)), ) Verify no empty or generic labels like “ button ” that reduce usability. MergeSemantics Apply MergeSemantics only for tightly related groups to prevent flattening unrelated elements, which can confuse navigation order. It combines announcements into one node, so ensure the merged description flows logically for both readers. Avoid nesting multiple MergeSemantics, as it may lead to unexpected focus behavior; test by swiping through merged areas on iOS and Android to confirm a unified but clear readout. MergeSemantics( child: Card( child: Column( children: [ Text('Item name'), Semantics(label: 'Price: $10', child: Text('\$10')), ], ), ), ) Monitor for skipped details in dynamic UIs where children change. IndexedSemantics Use IndexedSemantics sparingly for overriding default order in non-linear layouts, assigning unique ascending indices from 0; gaps allow fallback to natural order. Mismatches can trap focus or skip content, so validate indices match the visual hierarchy on both platforms. Test exhaustive navigation to ensure no infinite loops or inaccessible areas. IndexedSemantics( index: 0, child: ElevatedButton(child: Text('Primary action'), onPressed: primaryAction), ), IndexedSemantics( index: 1, child: Text('Secondary info'), ) Reindex after layout changes to maintain consistency. ExcludeSemantics Set excludeSemantics: true solely for decorative or duplicate elements to streamline the accessibility tree; never exclude interactive or informative content, as it renders them invisible to readers. On Android, this prevents TalkBack clutter; on iOS, it skips VoiceOver focus. Test by confirming excluded items are non-essential and navigation remains intuitive without them. Semantics( excludeSemantics: true, child: DecoratedBox(decoration: BoxDecoration(color: Colors.grey)), ) Audit for accidental exclusions that hide critical paths. Text Scaling Support dynamic text scaling up to 200% via MediaQuery.textScaleFactor without layout breakage; use Flexible or Expanded widgets to handle overflow. Test at extreme scales on iOS, Larger Text, and Android font size settings with readers enabled. This helps ensure announcements remain accurate and elements reflow properly. Fixed sizes defeat accessibility, so prioritize relative units. SizedBox( width: double.infinity, child: Text( 'Long text that scales', style: TextStyle(fontSize: 16 * MediaQuery.of(context).textScaleFactor), ), ) Verify no truncation or clipping affects readability or focus. Color Contrast Adhere to a 4.5:1 contrast ratio for text and 3:1 for large elements per WCAG, using tools like Flutter's Semantics or browser inspectors. High contrast aids low-vision users alongside readers; test in both light/dark modes on iOS and Android, as poor ratios reduce legibility during focus highlights. Avoid relying on color alone for information. ColorScheme( brightness: Brightness.light, primary: Colors.blue, onPrimary: Colors.white, // Ensures contrast > 4.5:1 surface: Colors.grey[100], onSurface: Colors.black87, ) Simulate color blindness with filters to confirm that semantic cues suffice.
Video Hosting
Image Hosting
Galleries
Video Messaging
CincoTube
Pages
Live
