Skip to content

accessibility.md

Latest commit

 

History

History
98 lines (78 loc) · 4.04 KB

accessibility.md

File metadata and controls

98 lines (78 loc) · 4.04 KB
Raw
layout post
title Accessibility in Flutter maps widget | Syncfusion
description Learn here all about the accessibility support in Syncfusion Flutter maps (SfMaps) widget and how to customize it.
platform Flutter
control SfMaps
documentation ug

Accessibility in Flutter Maps (SfMaps)

Screen reader

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

{% tabs %} {% highlight Dart %}

late List _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('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: [ MapShapeLayer(source: _dataSource) ] ), ), ), ); }

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

final String continent; final double populationInCrores; }

{% endhighlight %} {% endtabs %}

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.