Accessibility in Flutter Maps (SfMaps)

28 Jul 20253 minutes to read

Screen reader

The SfMaps widget can be accessed by the screen readers by wrapping it with the Semantics widget.

late List<PopulationModel> _data;
  late MapShapeSource _dataSource;
  late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent';

  @override
  void initState() {
    _data = const <PopulationModel>[
        PopulationModel('Asia', 456.07),
        PopulationModel('Africa', 121.61),
        PopulationModel('Europe', 74.64),
        PopulationModel('North America', 57.9),
        PopulationModel('South America', 42.25),
        PopulationModel('Australia', 2.54),
    ];

    _dataSource = MapShapeSource.asset(
        'assets/world_map.json',
        shapeDataField: 'continent',
        dataCount: _data.length,
        primaryValueMapper: (int index) => _data[index].continent,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Semantics(
          label: 'Syncfusion Flutter Maps',
          value: _semanticLabel,
          child: SfMaps(
            layers: <MapLayer>[
              MapShapeLayer(source: _dataSource)
            ]
          ),
        ),
      ),
    );
  }

class PopulationModel {
  const PopulationModel(this.continent, this.populationInCrores);

  final String continent;
  final double populationInCrores;
}

Sufficient contrast

You can customize the color of the SfMaps elements using the following APIs to ensure sufficient contrast:

Large fonts

The font size of the SfMaps will automatically scale based on the device settings.

Additionally, you can manually adjust the font size of the SfMaps elements using these APIs:

Easier touch targets

The SfMaps widget provides touch targets of 48 × 48 pixels as per accessibility standards for all applicable elements.