Accessibility in Syncfusion Angular Components
1 Mar 202523 minutes to read
Accessibility overview
Accessibility in software components involves designing user interfaces that are usable by everyone, including individuals with disabilities. This encompasses elements like ensuring high-contrast text, providing alternative text for images, and ensuring controls are operable via keyboard or assistive technologies.
Accessibility standards
A component is considered accessible when it complies with specific standards designed to enhance accessibility.
Syncfusion Angular components meet the following accessibility standards:
-
ADA: A law ensuring equal access and opportunities for people with disabilities compared to those without disabilities.
-
WCAG 2.2: These Web Content Accessibility Guidelines provide standards by the World Wide Web Consortium (W3C) to ensure web content is accessible to people with disabilities. WCAG 2.2 establishes a framework of accessibility principles and success criteria classified into three levels: A, AA, and AAA.
-
Section 508: Guidelines that ensure electronic and information technology are accessible to people with disabilities, primarily for federal agencies in the United States, based on WCAG.
-
WAI-ARIA - WAI-ARIA stands for “Web Accessibility Initiative - Accessible Rich Internet Applications.” It is a set of technical specifications and guidelines developed by the World Wide Web Consortium (W3C) as part of the Web Accessibility Initiative (WAI). WAI-ARIA is designed to enhance the accessibility of dynamic web content, particularly web applications and rich internet applications (RIAs), for people with disabilities. WAI-ARIA provides a set of roles, states, and properties that can be added to HTML elements to provide additional context and information about the purpose and behavior of those elements. This can help assistive technologies better understand and interpret web content and interact with web applications.
-
Keyboard navigation - It refers to the ability to use a keyboard to interact with and navigate through a user interface. It is an important aspect of web accessibility, as it allows people who cannot use a mouse or other pointing device to access and use web content and applications.
Syncfusion Angular components adhere to these established standards.
Accessibility compliance
The accessibility support provided by Syncfusion Angular components is based on a collection of methodologies for 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 Angular components, such as:
-
The WAI-ARIA patterns are followed by the Syncfusion Angular components to enable appreciable accessibility.
-
Each Angular component is subjected to manual testing with a screen reader and also automated test cases to ensure the component’s required attributes. Tools such as aXe, Lighthouse, and Accessibility Scanner are employed to ensure comprehensive coverage and compliance.
-
Attributes are allocated and updated correctly during interaction as well. Each component has been assigned a distinct
Roleattribute and its own set of ARIA attributes defined by the WCAG 2.2 specification.
In addition to the methodologies mentioned above, Syncfusion Angular components are constructed to support the following accessibility aspects.
Screen reader support
A screen reader allows people who are blind or visually impaired to use a computer by reading aloud the text that is displayed on the screen. Syncfusion Angular components followed the WAI-ARIA standards to work properly in the screen readers such as Narrator for Windows and Embedded VoiceOver for MAC, along with JAWS and NVDA, among others.
Right-To-Left support
Right-to-Left (RTL) support allows applications to cater to languages written from right to left, enhancing usability for Arabic, Hebrew, etc. Refer to the Right-to-Left documentation for more details.
Color contrast
Syncfusion Angular components come with predefined themes that ensure satisfactory color contrast. Developers can customize these themes for improved contrast.
Mobile device support
Syncfusion Angular 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 Angular 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 Angular 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: The Syncfusion Angular component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools. These tools provide in-depth analysis and reporting of accessibility compliance.
-
Manual testing: This type of testing involves manually evaluating the Syncfusion Angular components. During manual accessibility testing, testers will ensure accessibility using the screen readers such as Narrator for Windows and Embedded VoiceOver for MAC.
Syncfusion Angular components will keep improving when there is anything required. It also involves client feedback to make the component more accessible, incorporating suggestions and real-world observations.
Voluntary Product Accessibility Template
The Voluntary Product Accessibility Template (VPAT) provides a structured format to document how information and communication technology (ICT) products and services comply with accessibility standards. This template helps organizations clearly and effectively communicate their conformance with standards such as Section 508, WCAG 2.2, and EN 301 549.
Download the Latest VPAT Document
To review the accessibility conformance of Syncfusion products, you can download the latest version of the Syncfusion VPAT document here: VPAT Document
This document provides detailed information on how Syncfusion products meet accessibility requirements, ensuring they are inclusive and usable for all individuals, including those with disabilities.
Accessibility support for specific components
Syncfusion Angular components are designed to ensure compliance with key accessibility standards, including Section 508, WAI-ARIA, WCAG 2.2, and keyboard navigation. Below, you’ll find control-specific documentation that provides detailed guidance on how each control meets these standards.
| Component | Section 508 | WCAG 2.2 | Keyboard Navigation | Accessibility Documentation |
|---|---|---|---|---|
| DataGrid | Yes | AA | Yes | Documentation |
| Pivot Table | Yes | AA | Yes | Documentation |
| Tree Grid | Yes | AA | Yes | Documentation |
| Spreadsheet | Yes | AA | Yes | Documentation |
| In-place Editor | Yes | AA | Yes | Documentation |
| PDF Viewer | Yes | AA | Yes | Documentation |
| RichTextEditor | Yes | AA | Yes | Documentation |
| Word Processor | Yes | AA | Yes | Documentation |
| Image Editor | Yes | AA | Yes | Documentation |
| Dialog | Yes | AA | Yes | Documentation |
| ListView | Yes | AA | Yes | Documentation |
| Tooltip | Yes | AA | Yes | Documentation |
| Splitter | Yes | AA | Yes | Documentation |
| Dashboard Layout | Yes | AA | NA | Documentation |
| Accumulation Chart | Yes | AA | Yes | Documentation |
| Charts | Yes | AA | Yes | Documentation |
| Stock Chart | Yes | AA | Yes | Documentation |
| Circular Gauge | Yes | AA | NA | Documentation |
| Diagram | Yes | AA | Yes | Documentation |
| HeatMap Chart | Yes | AA | NA | Documentation |
| Linear Gauge | Yes | AA | NA | Documentation |
| Maps | Yes | AA | Yes | Documentation |
| Range Selector | Yes | AA | Yes | Documentation |
| Smith Chart | Yes | AA | Yes | Documentation |
| Sparkline Charts | Yes | AA | Yes | Documentation |
| TreeMap | Yes | AA | NA | Documentation |
| Bullet Chart | Yes | AA | Yes | Documentation |
| Kanban | Yes | AA | Yes | Documentation |
| Button | Yes | AA | Yes | Documentation |
| Button Group | Yes | AA | Yes | Documentation |
| Dropdown Menu | Yes | AA | Yes | Documentation |
| Progress Button | Yes | AA | Yes | Documentation |
| Split Button | Yes | AA | Yes | Documentation |
| Chips | Yes | AA | Yes | Documentation |
| FAB | Yes | AA | Yes | Documentation |
| Speed Dial | Yes | AA | Yes | Documentation |
| Calendar | Yes | AA | Yes | Documentation |
| DatePicker | Yes | AA | Yes | Documentation |
| DateRangePicker | Yes | AA | Yes | Documentation |
| DateTime Picker | Yes | AA | Yes | Documentation |
| TimePicker | Yes | AA | Yes | Documentation |
| Gantt Chart | Yes | AA | Yes | Documentation |
| TextBox | Yes | AA | Yes | Documentation |
| Input Mask | Yes | AA | Yes | Documentation |
| Masked TextBox | Yes | AA | Yes | Documentation |
| Numeric TextBox | Yes | AA | Yes | Documentation |
| Radio Button | Yes | AA | Yes | Documentation |
| CheckBox | Yes | AA | Yes | Documentation |
| Color Picker | Yes | AA | Yes | Documentation |
| File Upload | Yes | AA | Yes | Documentation |
| Range Slider | Yes | AA | Yes | Documentation |
| Toggle Switch Button | Yes | AA | Yes | Documentation |
| Signature | Yes | AA | Yes | Documentation |
| Rating | Yes | AA | Yes | Documentation |
| Query Builder | Yes | AA | Yes | Documentation |
| Accordion | Yes | AA | Yes | Documentation |
| AppBar | Yes | AA | Yes | Documentation |
| Breadcrumb | Yes | AA | Yes | Documentation |
| Carousel | Yes | AA | Yes | Documentation |
| Context Menu | Yes | AA | Yes | Documentation |
| Menu Bar | Yes | AA | Yes | Documentation |
| Sidebar | Yes | AA | Yes | Documentation |
| Tabs | Yes | AA | Yes | Documentation |
| Toolbar | Yes | AA | Yes | Documentation |
| Ribbon | Yes | AA | Yes | Documentation |
| TreeView | Yes | AA | Yes | Documentation |
| File Manager | Yes | AA | Yes | Documentation |
| Stepper | Yes | AA | Yes | Documentation |
| Message | Yes | AA | Yes | Documentation |
| Toast | Yes | AA | NA | Documentation |
| Progress Bar | Yes | AA | Yes | Documentation |
| Skeleton | Yes | AA | Yes | Documentation |