Accessibility in Blazor ListView Component
29 Nov 202424 minutes to read
The Blazor ListView component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor ListView component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support |  |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement. - Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Blazor ListView component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the ListView component:
| Attributes | Purpose |
|---|---|
| aria-selected | It indicates the selected list from the whole list. |
| aria-level | It defines the hierarchical structure of a list item. |
Keyboard interaction
The Blazor ListView component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the ListView component.
| Keyboard shortcuts | Actions |
|---|---|
| Arrow Up | Move to the previous list item. |
| Arrow Down | Move to the next list item. |
| Select | Select the targeted list from the whole list. |
| Back | Get back to the previous lists if it is in nested list. |
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Data
<SfListView DataSource="@ListData" ShowHeader="true" HeaderTitle="Continent">
<ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text" Child="Child"></ListViewFieldSettings>
</SfListView>
@code {
List<DataModel> ListData = new List<DataModel>();
protected override void OnInitialized()
{
base.OnInitialized();
ListData.Add(new DataModel
{
Text = "Asia",
Id = "01",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "India",
Id = "1",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Id = "1001",
Text = "Delhi",
Category = "India"
},
new DataModel {
Text = "Kashmir",
Id = "1002",
Category = "India"
},
new DataModel {
Text = "Goa",
Id = "1003",
Category = "India"
}
}
},
new DataModel {
Text = "China",
Id = "2",
Category = "Asia",
Child = new List<DataModel> () {
new DataModel {
Text = "Zhejiang",
Id = "2001",
Category = "China"
},
new DataModel {
Text = "Hunan",
Id = "2002",
Category = "China"
},
new DataModel {
Text = "Shandong",
Id = "2003",
Category = "China"
}
}
}
}
});
ListData.Add(new DataModel
{
Text = "North America",
Id = "02",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "USA",
Id = "3",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "California",
Id = "3001",
Category = "USA"
},
new DataModel {
Text = "New York",
Id = "3002",
Category = "USA"
},
new DataModel {
Text = "Florida",
Id = "3003",
Category = "USA"
}
}
},
new DataModel {
Text = "Canada",
Id = "4",
Category = "North America",
Child = new List<DataModel> () {
new DataModel {
Text = "Ontario",
Id = "4001",
Category = "Canada"
},
new DataModel {
Text = "Alberta",
Id = "4002",
Category = "Canada"
},
new DataModel {
Text = "Manitoba",
Id = "4003",
Category = "Canada"
}
}
}
}
});
ListData.Add(new DataModel
{
Text = "Europe",
Id = "03",
Category = "Continent",
Child = new List<DataModel>() {
new DataModel {
Text = "Germany",
Id = "5",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Berlin",
Id = "5001",
Category = "Germany"
},
new DataModel {
Text = "Bavaria",
Id = "5002",
Category = "Germany"
},
new DataModel {
Text = "Hesse",
Id = "5003",
Category = "Germany"
}
}
},
new DataModel {
Text = "France",
Id = "6",
Category = "Europe",
Child = new List<DataModel> () {
new DataModel {
Text = "Paris",
Id = "6001",
Category = "France"
},
new DataModel {
Text = "Lyon",
Id = "6002",
Category = "France"
},
new DataModel {
Text = "Marseille",
Id = "6003",
Category = "France"
}
}
}
}
});
}
public class DataModel
{
public string Id { get; set; }
public string Text { get; set; }
public string Category { get; set; }
public List<DataModel> Child { get; set; }
}
}Ensuring accessibility
The Blazor ListView component’s accessibility levels are ensured through an axe-core software tool during automated testing.
The accessibility compliance of the ListView component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the ListView component with accessibility tools.