Accessibility in Flutter Maps (SfMaps)

2 Nov 20213 minutes to read

Screen reader

The SfMaps can be accessed by the screen readers by wrapping the SfMaps widget to 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 for the sufficient contrast.

Large fonts

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

Also, you can change the font size of the SfMaps elements using the following APIs:

Easier touch targets

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