Accessibility Overview
The UI for Blazor Gantt component is WCAG 2.2 AA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role, and is tested against the popular screen readers.
Blazor Gantt Accessibility Example
WCAG 2.2 introduces the "Dragging Movements" criterion as an important part of the Operable principle. Its primary goal is to guarantee that any feature reliant on drag actions offers an alternative method that can be executed with a single click, enhancing user accessibility.
The illustrative example below shows the Gantt tree columns reorder action, achievable through the Column Menu. Telerik UI for Blazor aims to offer a versatile API that allows users to trigger all functions programmatically or externally, meeting diverse accessibility requirements for any applications.
The following example demonstrates the accessibility compliance of the Gantt component. The described level of compliance is achievable with the Ocean Blue A11y Accessibility Swatch.
Gantt accessibility compliance example
@*Evaluate the example with Axe Core or another accessibility tool*@
<TelerikGantt Data="@Data"
Width="900px"
Height="600px"
IdField="Id"
ParentIdField="ParentId"
Navigable="true"
ColumnReorderable="true"
Sortable="true"
ColumnResizable="true"
ShowColumnMenu="true">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="@nameof(FlatModel.Title)" ShowColumnMenu="false">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.PercentComplete)">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.Start)">
</GanttColumn>
<GanttColumn Field="@nameof(FlatModel.End)">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
@code {
private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
private int LastId { get; set; } = 1;
private List<FlatModel> Data { get; set; }
protected override void OnInitialized()
{
Data = new List<FlatModel>();
var random = new Random();
for (int i = 1; i < 6; i++)
{
var newItem = new FlatModel()
{
Id = LastId++,
Title = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 10 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = newItem.Id;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId++,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 20 + j),
End = new DateTime(2020, 12, 21 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
}
}
base.OnInitialized();
}
public class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
}