Accessibility customization
19 Dec 202411 minutes to read
The Syncfusion® ASP.NET CORE Accumulation Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the ASP.NET CORE Accumulation Chart component’s accessibility customization are briefly explained in this section.
The accumulation chart component has a number of characteristics that enable accessibility features to be customized, including:
-
AccessibilityDescription- Provides a text description for the accumulation chart, improving support for screen readers. -
AccessibilityRole- Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately. -
Focusable- Allows the accumulation chart to receive focus, making it accessible via keyboard navigation. -
FocusBorderColor- Sets the color of the focus border, enhancing visibility when the accumulation chart is focused. -
FocusBorderMargin- Defines the margin around the focus border. -
FocusBorderWidth- Specifies the width of the focus border. -
TabIndex- Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
@{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" focusBorderColor='#FF0000' focusBorderWidth="3" focusBorderMargin="5">
<e-accumulationchart-accessibility accessibilityDescription="Pie chart representing the distribution of data through mobile browsers." accessibilityRole='chart'></e-accumulationchart-accessibility>
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pie">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<FunnelChartData> chartData = new List<FunnelChartData>
{
new FunnelChartData { xValue = "Chrome", yValue = 37 },
new FunnelChartData { xValue = "UC Browser", yValue = 17 },
new FunnelChartData { xValue = "iPhone", yValue = 19 },
new FunnelChartData { xValue = "Others", yValue = 4 },
new FunnelChartData { xValue = "Opera", yValue = 11 },
new FunnelChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class FunnelChartData
{
public string xValue;
public double yValue;
}Series
The Series supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
-
AccessibilityDescription- Provides a text description for the series root element, enhancing support for screen readers. -
AccessibilityRole- Specifies the role of the series, helping screen readers to identify the element appropriately. -
Focusable- Allows the series to receive focus, making it accessible via keyboard navigation. -
TabIndex- Specifies the tab order of the series element, enabling efficient keyboard navigation.
@{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 14 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="false">
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser"
type="@Syncfusion.EJ2.Charts.AccumulationType.Pyramid">
<e-accumulationseries-accessibility accessibilityDescription="This pyramid shows the mobile browser usage" accessibilityRole="presentation"></e-accumulationseries-accessibility>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PyramidChartData> chartData = new List<PyramidChartData>
{
new PyramidChartData { xValue = "Chrome", yValue = 37 },
new PyramidChartData { xValue = "UC Browser", yValue = 17 },
new PyramidChartData { xValue = "iPhone", yValue = 19 },
new PyramidChartData { xValue = "Others", yValue = 14 },
new PyramidChartData { xValue = "Opera", yValue = 11 },
new PyramidChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PyramidChartData
{
public string xValue;
public double yValue;
}Legend
The LegendSettings provide information about the series shown in the accumulation chart. The following Accessibility properties in LegendSettings can be used to alter the accessibility of the accumulation chart’s legend:
-
AccessibilityDescription- Provides a text description for the legend root element, enhancing support for screen readers. -
AccessibilityRole- Specifies the role of the legend items to screen readers, providing appropriate context. -
Focusable- Specifies whether legend items are focusable via keyboard navigation. -
TabIndex- Specifies the tab order of the legend element, enabling efficient keyboard navigation.
@{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
}
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
<e-accumulationchart-legendsettings visible="true">
<e-legendSettings-accessibility accessibilityDescription="This legend identifies the series displayed in the chart, showing the browser details." accessibilityRole="list"></e-legendSettings-accessibility>
</e-accumulationchart-legendsettings>
<e-accumulation-series-collection>
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}