Accessibility in Flutter Radial Gauge (SfRadialGauge)

6 Aug 20262 minutes 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

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Radial Gauge Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  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 a 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.