Accessibility in Flutter Linear Gauge (SfLinearGauge)

6 Aug 20261 minute to read

Screen reader

The SfLinearGauge can be made accessible to screen readers by wrapping it with the Semantics widget.

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

void main() => runApp(const LinearGaugeDemo());

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

  @override
  Widget build(BuildContext context) {
    double value = 50;
    return MaterialApp(
      title: 'Linear Gauge Demo',
      home: Scaffold(
        body: Semantics(
          label: 'Syncfusion Flutter Linear Gauge',
          value: value.toString(),
          child: SfLinearGauge(
            markerPointers: [LinearShapePointer(value: value)],
          ),
        ),
      ),
    );
  }
}

Sufficient contrast

You can customize the color of the SfLinearGauge elements using the following APIs to ensure sufficient contrast.

Large fonts

You can adjust the font size of the SfLinearGauge elements using the following API:

Easily touch targets

The SfLinearGauge follows accessibility standards by providing touch target of 48 * 48 pixels for all interactive elements.