Accessibility in Flutter Slider (SfSlider)

18 Nov 20186 minutes to read

Keyboard support

This feature allows you to focus on the SfSlider widget using the TAB key and adjust its values with the keyboard arrow keys. The left and down arrow keys can be used to decrease the thumb value, while the right and up arrow keys can be used to increase it. The value changes by the stepSize (for numeric values) or stepDuration (for date values) per key press.

Screen reader

The SfSlider can be accessed by screen readers. By default, it will read the current value. You can change the reading format using the semanticFormatterCallback property.

For Android, you can adjust the value of the thumb by moving the focus to it and then pressing the volume buttons to increase or decrease the value.

For iOS, you can adjust the value of the thumb by moving the focus to it and then swiping up or down to increase or decrease the value respectively.

Horizontal

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class AccessibilityPage extends StatefulWidget {
  @override
  _AccessibilityPageState createState() => _AccessibilityPageState();
}

class _AccessibilityPageState extends State<AccessibilityPage> {
  double _value = 40.0;

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider(
                min: 0.0,
                max: 100.0,
                value: _value,
                interval: 20,
                showTicks: true,
                showLabels: true,
                semanticFormatterCallback: (double value){
                  return 'The selected value is $value';
                },
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        ),
     );
  }
}

Vertical

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class VerticalAccessibilityPage extends StatefulWidget {
  @override
  _VerticalAccessibilityPageState createState() => _VerticalAccessibilityPageState();
}

class _VerticalAccessibilityPageState extends State<VerticalAccessibilityPage> {
  double _value = 40.0;

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
            body: Center(
              child: SfSlider.vertical(
                min: 0.0,
                max: 100.0,
                value: _value,
                interval: 20,
                showTicks: true,
                showLabels: true,
                semanticFormatterCallback: (double value){
                  return 'The selected value is $value';
                },
                onChanged: (double newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              ),
            )
        ),
     );
  }
}

Sufficient contrast

You can customize the color of the SfSlider elements using the following APIs for the sufficient contrast.

Large fonts

The font size of the SfSlider will be automatically scaled based on the device settings. Additionally, you can change the font size of the SfSlider elements using the following APIs:

Touch targets

The SfSlider has a touch target of 48 × 48 pixels as per the standard for all the elements.