Accessibility customization in ASP.NET MVC Chart component

19 Dec 202424 minutes to read

The Syncfusion® ASP.NET MVC 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 MVC Chart component’s accessibility customization are briefly explained in this section.

The chart component has a number of characteristics that enable accessibility features to be customized, including:

  • AccessibilityDescription - Provides a text description for the chart, improving support for screen readers.
  • AccessibilityRole - Specifies the role of the chart, helping screen readers to identify the element appropriately.
  • Focusable - Allows the chart to receive focus, making it accessible via keyboard navigation.
  • FocusBorderColor - Sets the color of the focus border, enhancing visibility when the chart is focused.
  • FocusBorderMargin - Defines the margin around the focus border.
  • FocusBorderWidth - Specifies the width of the focus border.
  • TabIndex - Specifies the tab order of the chart element, enabling efficient keyboard navigation.
@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").      
      Add();
   })
   .Accessibility(access => access.
         AccessibilityDescription("This line chart shows the gold medal count in the Olymbic.")
         .AccessibilityRole("chart")
      ).FocusBorderColor('#FF0000')
    .FocusBorderWidth(3)
    .FocusBorderMargin(5)
   .PrimaryXAxis(px =>
         px.Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            .IsIndexed(true)
   ).Title("Olympic Medal Counts - RIO").Render()
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4, color="red" },
                new AxisLabelData { x= "India", y= 61.3, color="green" }, 
                new AxisLabelData { x= "Pakistan", y= 20.4, color="#ff0097" },
                new AxisLabelData { x= "Germany", y= 65.1, color="crimson" }, 
                new AxisLabelData { x= "Australia", y= 15.8, color="blue" },
                new AxisLabelData { x= "Italy", y= 29.2, color="darkorange" },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
            public string color;
        }

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.
  • AccessibilityDescriptionFormat - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format “${series.name} : ${point.x}” displays the series name and x-value of the point in the accessibility description. Data point’s values like high, low, open, and close are applicable based on the series types.
  • 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.
@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      .Accessibility(access => access
         .AccessibilityDescription("This series shows the medal count of the country in Olymbic.")
         .AccessibilityRole("series")
         .AccessibilityDescriptionFormat('The country ${point.x} won ${point.y} gold medals.')
      )
      Add();
   })
   .PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
         .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4 },
                new AxisLabelData { x= "India", y= 61.3 }, 
                new AxisLabelData { x= "Pakistan", y= 20.4 },
                new AxisLabelData { x= "Germany", y= 65.1 }, 
                new AxisLabelData { x= "Australia", y= 15.8 },
                new AxisLabelData { x= "Italy", y= 29.2 },
                new AxisLabelData { x= "United Kingdom", y= 44.6 },
                new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
                new AxisLabelData { x= "Russia", y= 40.8 },
                new AxisLabelData { x= "Mexico", y= 31 },
                new AxisLabelData { x= "Brazil", y= 75.9 },
                new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
        }

Title and subtitle

In the ASP.NET MVC chart component, the TitleStyle and SubTitleStyle attributes allow you to customize the accessibility of the chart’s title and subtitle. The following Accessibility properties in TitleStyle and SubTitleStyle can be customized for accessibility:

  • AccessibilityDescription - Provides a text description for the chart title and subtitle, enhancing support for screen readers.
  • AccessibilityRole - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately.
  • Focusable - Enables or disables the keyboard navigation focus for the title and subtitle.
  • TabIndex - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation.
@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Add();
   })
   .PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
         .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").TitleStyle(title => 
      title.Accessibility(access => access.
         AccessibilityDescription('This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.')
         .AccessibilityRole('heading')
      )
   ).SubTitle("Medal Comparison").SubTitleStyle(subtitle => 
      subtitle.Accessibility(access => access.
         AccessibilityDescription('The subtitle provides additional context for the Olympic medal distribution chart.')
         .AccessibilityRole('heading')
      )).Render()
public ActionResult Index()
        {
            List<AxisLabelData> chartData = new List<AxisLabelData>
            {
                new AxisLabelData { x= "South Korea", y= 39.4 },
                new AxisLabelData { x= "India", y= 61.3 }, 
                new AxisLabelData { x= "Pakistan", y= 20.4 },
                new AxisLabelData { x= "Germany", y= 65.1 }, 
                new AxisLabelData { x= "Australia", y= 15.8 },
                new AxisLabelData { x= "Italy", y= 29.2 },
                new AxisLabelData { x= "United Kingdom", y= 44.6 },
                new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
                new AxisLabelData { x= "Russia", y= 40.8 },
                new AxisLabelData { x= "Mexico", y= 31 },
                new AxisLabelData { x= "Brazil", y= 75.9 },
                new AxisLabelData { x= "China", y= 51.4 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class AxisLabelData
        {
            public string x;
            public double y;
        }

Annotations

The Annotations property allows you to add annotations to the chart in specific regions. The following Accessibility properties in Annotations can be customized for accessibility:

  • AccessibilityDescription - Provides a text description for the annotation, enhancing support for screen readers.
  • AccessibilityRole - Specifies the role of the annotation, helping screen readers to identify the element appropriately.
  • Focusable - Specifies whether annotations are focusable via keyboard navigation.
  • TabIndex - Specifies the tab order of the annotation element, enabling efficient keyboard navigation.
@Html.EJS().Chart("container").Series(series =>
   {
   series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
   Marker(ViewBag.Marker).
   XName("x").
   YName("yValue").
   DataSource(ViewBag.dataSource).
   Name("Gold").
   Width(2).Add();
   }).
   Annotations(an => {
        an.X("USA").Y("50").CoordinateUnits(Syncfusion.EJ2.Charts.Units.Point)
        .Accessibility(access => 
                access.AccessibilityDescription('Annotation indicating that USA has won 50 Gold Medals.')
                .AccessibilityRole('note')
                .Focusable(true)
        )
        .VerticalAlignment(Syncfusion.EJ2.Charts.Position.Top).Content(ViewBag.content).Add();
    }).
   PrimaryXAxis(px => px.Interval(1).ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).
   Title("Olympic Medal Counts - RIO").Render()
public IActionResult Index()
        {
            List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData{ country= "USA", gold=50, silver=70, bronze=45 },
                new ColumnChartData{ country="China", gold=40, silver= 60, bronze=55 },
                new ColumnChartData{ country= "Japan", gold=70, silver= 60, bronze=50 },
                new ColumnChartData{ country= "Australia", gold=60, silver= 56, bronze=40 },
                new ColumnChartData{ country= "France", gold=50, silver= 45, bronze=35 },
                new ColumnChartData{ country= "Germany", gold=40, silver=30, bronze=22 },
                new ColumnChartData{ country= "Italy", gold=40, silver=35, bronze=37 },
                new ColumnChartData{ country= "Sweden", gold=30, silver=25, bronze=27 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string country;
            public double gold;
            public double silver;
            public double bronze;
        }

Trendline

The Trendlines property allows you to display trends in the data. The following Accessibility properties in Trendlines can be customized for accessibility:

  • AccessibilityDescription - Provides a text description for the trendline, enhancing support for screen readers.
  • AccessibilityRole - Specifies the role of the trendline, helping screen readers to identify the element appropriately.
  • Focusable - Specifies whether trendlines are focusable via keyboard navigation.
  • TabIndex - Specifies the tab order of the trendline element, enabling efficient keyboard navigation.
@Html.EJS().Chart("container").Series(series =>
             {
                 series.Trendlines(trend => trend.
                    Type(Linear).
                    .Accessibility(access => 
                        access.AccessibilityDescription('A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.')
                        .AccessibilityRole('line')
                        .Focusable(true)        
                    )
                 )
                 .Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line)
                 .XName("x").YName("y")
                 .Marker(ViewBag.marker)
                .DataSource("series1")
                .Name("Rupees")
                .Width(2).Add(); })
                .PrimaryXAxis(px => px.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
                .MajorGridLines(ViewBag.majorGridLines))
                .PrimaryYAxis(py => py.Title("Rupees against Dollars")
                .Interval(10)
                .MajorTickLines(ViewBag.majorTickLines)
                .LineStyle(ViewBag.lineStyle))
                .ChartArea(area => area.Border(ViewBag.ChartBorder))
                .Title("Historical Indian Rupee Rate (INR USD)")
                .LegendSettings(lg => lg.Visible(false))
                .Tooltip(tt => tt.Enable(true)).Render()

<script type="text/javascript">
        var series1 = [];
        var yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
            13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
            41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
        var point1;
        var i;
        var j = 0;
        for (i = 1973; i <= 2013; i++) {
            point1 = { x: i, y: yValue[j] };
            series1.push(point1);
            j++;
        }
        var powerData = [
            { x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
            { x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x: 9, y: 490 }, { x: 10, y: 500 }
        ];
    </script>
public IActionResult Index()
        {
            return View();
        }

Zooming

The ZoomSettings attributes allow you to adjust the chart’s zooming capability. The following Accessibility properties in ZoomSettings offer the parameters for accessibility customization:

  • AccessibilityDescription - Provides a text description for the zoom toolkit items, enhancing support for screen readers.
  • AccessibilityRole - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately.
  • Focusable - Specifies whether zoom toolkit items are focusable via keyboard navigation.
  • TabIndex - Specifies the tab order of the zooming element, enabling efficient keyboard navigation.
@Html.EJS().Chart("container").
   PrimaryXAxis(px => px.Title("Years").
   MajorGridLines(ViewBag.majorGridLines).
       ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
       Skeleton("yMMM")).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area).
           Border(ViewBag.border).Animation(ViewBag.animation).
           DataSource("series1").
           Name("Product X").
           XName("x").
           YName("y").Add();
       }
       ).ChartArea(area => area.Border(ViewBag.chartBorder)).
       LegendSettings(legend => legend.Visible(false)).
       PrimaryYAxis(py => py.Title("Profit ($)").
       LineStyle(ViewBag.lineStyle).
       MajorTickLines(ViewBag.majorTickLines).
       RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None)).
       ZoomSettings(z => z.EnableMouseWheelZooming(true).
        EnablePinchZooming(true).EnableSelectionZooming(true).
        Mode(Syncfusion.EJ2.Charts.ZoomMode.X).
        Accessibility(access => access.
            AccessibilityDescription('This allows users to zoom in and out of the chart using mouse wheel, pinch gestures, or selection box.')
            .AccessibilityRole('zoom')
        )
       ).
       Title("Sales History of Product X").Render()

 <script>
        var series1 = [];
        var point1;
        var value = 80;
        var i;
        for (i = 1; i < 500; i++) {
            if (Math.random() > 0.5) {
                value += Math.random();
            }
            else {
                value -= Math.random();
            }
            point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
            series1.push(point1);
        }
    </script>
public IActionResult Index()
        {
            return View();
        }

Technical indicators

The Indicators property allows you to analyze the trends and patterns in the data. The following Accessibility properties in Indicators can be customized for accessibility:

  • AccessibilityDescription - Provides a text description for the indicators, enhancing support for screen readers.
  • AccessibilityRole - Specifies the role of the indicators, helping screen readers to identify the element appropriately.
  • Focusable - Specifies whether indicators are focusable via keyboard navigation.
  • TabIndex - Specifies the tab order of the indicators element, enabling efficient keyboard navigation.
<script src="chart/technical-indicators/atr/financial-data.js"></script>

   @Html.EJS().Chart("container-vertical").Rows(rows =>
       {
           rows.Height("40%").Add();
           rows.Height("60%").Add();
       }).Axes(ax =>
       {
           ax.Name("secondary").LineStyle(ViewBag.Line).Title("ATR").MajorTickLines(ViewBag.majorGridLines).OpposedPosition(true).Minimum(0).Maximum(14).Interval(7).RowIndex(0).Add();
       }
           ).Series(series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
           }).Indicators(id =>
           {
               id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.AccumulationDistribution).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close)
               .Accessibility(access => 
                access.AccessibilityDescription('The Accumulation Distribution indicator is used to assess the buying and selling pressure of Apple Inc. stock.')
                .AccessibilityRole('indicator')
        ).SeriesName("Apple Inc").Add();
           }).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
           ).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).MajorGridLines(ViewBag.Line).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
             ).PrimaryYAxis(py => py.LineStyle(ViewBag.Line).RowIndex(1).OpposedPosition(true).Title("Price").Minimum(80).Maximum(170).Interval(30).LabelFormat("{value}M").PlotOffset(25)
             ).Title("AAPL 2012-2017").ChartArea(area => area.Border(ViewBag.ChartBorder)).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()

<script>
        var dataSource = window.chartData;
</script>
public IActionResult Index()
        {
            return View();
        }

Legend

The LegendSettings provide information about the series shown in the chart. The following Accessibility properties in LegendSettings can be used to alter the accessibility of the 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.
@Html.EJS().Chart("container").ChartArea(area => area.Border(ViewBag.ChartBorder)).Series(series =>
       {
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").Marker(ViewBag.marker).YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue1").Marker(ViewBag.marker).DataSource(ViewBag.dataSource).Name("England").Add();


       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).MajorGridLines(ViewBag.majorGridLines).MajorGridLines(ViewBag.majorGridLines).IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LabelFormat("y")
       ).PrimaryYAxis(py => py.LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).MajorTickLines(ViewBag.majorTickLines).MinorTickLines(ViewBag.minorTickLines).LineStyle(ViewBag.lineStyle).Interval(20).Minimum(0).Maximum(100)
       )LegendSettings(legend => legend.
          Visible(true).Accessibility(access => access.
            AccessibilityDescription('Legend displaying consumer price in inflation.')
            .AccessibilityRole('presentation')
          )
       ).Title("Inflation - Consumer Price").Tooltip(tt => tt.Enable(true)).Load("load").Render();
public IActionResult Index()
        {
            List<LineChartData> chartData = new List<LineChartData>
            {
                new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
                new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
                new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
                new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
                new LineChartData { xValue = new DateTime(2009, 01, 01), yValue = 54, yValue1 = 66 },
                new LineChartData { xValue = new DateTime(2010, 01, 01), yValue = 57, yValue1 = 78 },
                new LineChartData { xValue = new DateTime(2011, 01, 01), yValue = 70, yValue1 = 84 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class LineChartData
        {
            public DateTime xValue;
            public double yValue;
            public double yValue1;
        }