How can I help you?
Accessibility in Syncfusion® Blazor components
6 Feb 202610 minutes to read
All Syncfusion® Blazor components follow WAI-ARIA by default, enabling accessible web applications that are fully navigable with assistive technologies.
Accessibility overview
Accessibility in components refers to designing and building user interface elements so that users with disabilities can perceive, operate, and understand them. Examples include sufficient color contrast, alternative text for images, and keyboard-operable controls and interactions.
Accessibility standards
A component is accessible when it is implemented in accordance with recognized accessibility standards.
The accessibility of the components consists of the following standards and aspects:
ADA - A law to ensure that people with disabilities have the same opportunities and access as people without disabilities.
WCAG 2.2 - Guidelines from the W3C to ensure web content is accessible to people with disabilities, organized by success criteria at levels A, AA, and AAA.
Section 508 - U.S. federal standards for making electronic and information technology accessible, aligned with WCAG.
WAI-ARIA - Roles, states, and properties that enhance accessibility of dynamic web content and applications for assistive technologies.
Keyboard navigation - The ability to use a keyboard to interact with and navigate a user interface.
Syncfusion® Blazor components adhere to these established standards.
Accessibility compliance
Accessibility support in Syncfusion® Blazor components is based on adhering to and applying recognized standards and technical specifications to ensure an intuitive experience for people with disabilities.
There are several methodologies of accessibility validation that can be performed on the Syncfusion® Blazor components, such as:
The WAI-ARIA patterns are followed by the Syncfusion® Blazor components to enable appreciable accessibility.
Each Blazor component is evaluated with manual screen reader testing and automated tests to ensure required attributes and behaviors are present.
Attributes are assigned and updated correctly during interaction. Each component has an appropriate role and ARIA attributes defined by the WCAG 2.2 specification.
In addition to the methodologies mentioned above, Syncfusion® Blazor components are constructed to support the following accessibility aspects.
Screen reader support
Syncfusion® Blazor components follow WAI-ARIA to work properly with screen readers such as Narrator for Windows and VoiceOver for macOS.
Right-to-left support
Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc. Syncfusion® Blazor components support the Right-to-Left feature. Refer to the Right-to-Left documentation to learn more about this support.
Color contrast
Syncfusion® Blazor components include predefined themes that provide sufficient color contrast to benefit users with visual impairments.
Mobile device support
Syncfusion® Blazor components are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly.
Keyboard navigation support
Syncfusion® Blazor components support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component.
Ensuring accessibility
Ensuring the accessibility of Syncfusion® Blazor components is crucial for making the product inclusive and user-friendly for individuals with disabilities. This process involves various types of accessibility testing, including:
-
Automated testing: Accessibility is validated using axe-core with Playwright tests.
-
Manual testing: Manual evaluation using screen readers such as Narrator for Windows and VoiceOver for macOS.
Syncfusion® Blazor components continually improve based on standards updates and user feedback to enhance accessibility.
Accessibility support for specific components
Consult the component-specific documents below for details on how Syncfusion® Blazor components ensure compliance with accessibility standards, including Section 508, WAI-ARIA, WCAG 2.2, keyboard navigation, and more. The table uses the legend shown below.
| Components | WCAG 2.2 | Section 508 | Screen Reader | Right-To-Left | Color Contrast | Mobile Device | Keyboard Navigation | Accessibility Example | Accessibility Documentation |
| 3D Chart | AA |
|
|
|
|
|
|
--- | Documentation |
| Accordion | AA |
|
|
|
|
|
|
Demo | Documentation |
| Accumulation Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| AppBar | N/A |
|
|
|
|
|
|
Demo | Documentation |
| AI AssistView | AA |
|
|
|
|
|
|
Demo | Documentation |
| AutoComplete | AA |
|
|
|
|
|
|
Demo | Documentation |
| Breadcrumb | AA |
|
|
|
|
|
|
Demo | Documentation |
| Bullet Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| Button | AA |
|
|
|
|
|
|
Demo | Documentation |
| Button Group | AA |
|
|
|
|
|
|
Demo | Documentation |
| Calendar | AA |
|
|
|
|
|
|
Demo | Documentation |
| Carousel | AA |
|
|
|
|
|
|
Demo | Documentation |
| Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| Chat UI | AA |
|
|
|
|
|
|
Demo | Documentation |
| CheckBox | AA |
|
|
|
|
|
|
Demo | Documentation |
| Chip | AA |
|
|
|
|
|
|
Demo | Documentation |
| Circular Gauge | AA |
|
|
|
|
|
N/A | Demo | Documentation |
| Color Picker | AA |
|
|
|
|
|
|
Demo | Documentation |
| ComboBox | AA |
|
|
|
|
|
|
Demo | Documentation |
| ContextMenu | AA |
|
|
|
|
|
|
Demo | Documentation |
| Dashboard | AA |
|
|
|
|
|
N/A | Demo | Documentation |
| Grid | AA |
|
|
|
|
|
|
Demo | Documentation |
| DatePicker | AA |
|
|
|
|
|
|
Demo | Documentation |
| DateRangePicker | AA |
|
|
|
|
|
|
Demo | Documentation |
| Datetime Picker | AA |
|
|
|
|
|
|
Demo | Documentation |
| Diagram | AA |
|
|
|
|
|
|
Demo | Documentation |
| Dialog | AA |
|
|
|
|
|
|
Demo | Documentation |
| Dropdown Menu | AA |
|
|
|
|
|
|
Demo | Documentation |
| DropDown List | AA |
|
|
|
|
|
|
Demo | Documentation |
| Dropdown Tree | AA |
|
|
|
|
|
|
Demo | Documentation |
| FileManager | AA |
|
|
|
|
|
|
Demo | Documentation |
| File Upload | AA |
|
|
|
|
|
|
Demo | Documentation |
| Floating Action Button | AA |
|
|
|
|
|
|
Demo | Documentation |
| Gantt Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| HeatMap Chart | AA |
|
|
N/A |
|
|
N/A | Demo | Documentation |
| In-place editor | AA |
|
|
|
|
|
|
Demo | Documentation |
| Image Editor | AA |
|
|
|
|
|
|
Demo | Documentation |
| Input Mask | AA |
|
|
|
|
|
|
Demo | Documentation |
| Kanban | AA |
|
|
|
|
|
|
Demo | Documentation |
| Linear Gauge | AA |
|
|
N/A |
|
|
N/A | Demo | Documentation |
| ListBox | AA |
|
|
|
|
|
|
Demo | Documentation |
| ListView | AA |
|
|
|
|
|
|
Demo | Documentation |
| Maps | AA |
|
|
N/A |
|
|
|
Demo | Documentation |
| Markdown Editor | AA |
|
|
|
|
|
|
--- | Documentation |
| Mention | AA |
|
|
|
|
|
|
Demo | Documentation |
| Menu Bar | AA |
|
|
|
|
|
|
Demo | Documentation |
| Message | AA |
|
|
|
|
|
|
Demo | Documentation |
| MultiColumn ComboBox | AA |
|
|
|
|
|
|
--- | Documentation |
| MultiSelect Dropdown | AA |
|
|
|
|
|
|
Demo | Documentation |
| Numeric TextBox | AA |
|
|
|
|
|
|
Demo | Documentation |
| Pager | AA |
|
|
|
|
|
|
Demo | Documentation |
| OTP Input | AA |
|
|
|
|
|
|
--- | Documentation |
| Pivot Table | AA |
|
|
|
|
|
|
Demo | Documentation |
| ProgressBar | AA |
|
|
|
|
|
|
Demo | Documentation |
| ProgressButton | AA |
|
|
|
|
|
|
Demo | Documentation |
| Query Builder | AA |
|
|
|
|
|
|
Demo | Documentation |
| RadioButton | AA |
|
|
|
|
|
|
Demo | Documentation |
| Range Selector | AA |
|
|
|
|
|
|
Demo | Documentation |
| Range Slider | AA |
|
|
|
|
|
|
Demo | Documentation |
| Rating | AA |
|
|
|
|
|
|
Demo | Documentation |
| Ribbon | AA |
|
|
|
|
|
|
--- | Documentation |
| Rich Text Editor | AA |
|
|
|
|
|
|
Demo | Documentation |
| Scheduler | AA |
|
|
|
|
|
|
Demo | Documentation |
| Sidebar | AA |
|
|
|
|
|
|
Demo | Documentation |
| Signature | AA |
|
|
N/A |
|
|
|
Demo | Documentation |
| Skeleton | AA |
|
|
|
|
|
N/A | Demo | Documentation |
| Smith Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| Sparkline | AA |
|
|
|
|
|
|
Demo | Documentation |
| Speech To Text | AA |
|
|
|
|
|
|
--- | Documentation |
| SpeedDial | AA |
|
|
|
|
|
|
Demo | Documentation |
| SplitButton | AA |
|
|
N/A |
|
|
|
Demo | Documentation |
| Splitter | AA |
|
|
|
|
|
|
Demo | Documentation |
| Stepper | AA |
|
|
|
|
|
|
Demo | Documentation |
| Stock Chart | AA |
|
|
|
|
|
|
Demo | Documentation |
| Tabs | AA |
|
|
|
|
|
|
Demo | Documentation |
| TextBox | AA |
|
|
|
|
|
|
Demo | Documentation |
| Timeline | AA |
|
N/A |
|
|
|
N/A | Demo | Documentation |
| TimePicker | AA |
|
|
|
|
|
|
Demo | Documentation |
| Toast | AA |
|
|
|
|
|
N/A | Demo | Documentation |
| Toggle Switch Button | AA |
|
|
N/A |
|
|
|
Demo | Documentation |
| Toolbar | AA |
|
|
|
|
|
|
Demo | Documentation |
| Tooltip | AA |
|
|
|
|
|
|
Demo | Documentation |
| TreeGrid | AA |
|
|
|
|
|
|
Demo | Documentation |
| TreeMap | AA |
|
|
|
|
|
N/A | Demo | Documentation |
| TreeView | AA |
|
|
|
|
|
|
Demo | Documentation |
- 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.