Accessibility in Flutter Radial Gauge (SfRadialGauge)

22 May 20251 minute to read

Screen reader

The SfRadialGauge can be made accessible to screen readers by wrapping it with the flutter Semantics widget. This provides meaningful information about the gauge to assistive technologies.

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

For users who need larger text, you can adjust the font size of the SfRadialGauge elements using these APIs:

• Title
• Axis labels
• Annotation

Easier touch targets

The SfRadialGauge follows accessibility standards by providing touch targets of 48 × 48 pixels for all interactive elements, making it easier for users with motor impairments to interact with the gauge.