Accessibility in Flutter Radial Gauge (SfRadialGauge)

19 Oct 20221 minute to read

Screen reader

The SfRadialGauge can be accessed by the screen readers by wrapping the SfRadialGauge widget to the Semantics widget.

DART

double _value = 50;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Semantics(
      label: 'Syncfusion Flutter Radial Gauge',
      value: _value.toString(),
      child: SfRadialGauge(axes: <RadialAxis>[
        RadialAxis(pointers: <GaugePointer>[NeedlePointer(value: _value)])
      ]),
    ),
  );
}

Sufficient contrast

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

• Title
• Axis labels
• Ticks
• Annotation
• Marker pointer
• Text pointer
• Knob
• Tail
• Range pointer

Large fonts

You can change the font size of the SfRadialGauge elements using the following APIs:

• Title
• Axis labels
• Annotation

Easier touch targets

The SfRadialGauge has touch target as 48 * 48 as per the standard for all the elements.