Accessibility in Syncfusion® Blazor PDF Viewer components
13 Dec 20247 minutes to read
The Blazor PDF Viewer 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 PDF Viewer 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
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the Blazor PDF Viewer component:
| Attributes | Purpose |
|---|---|
aria-disabled |
Indicates whether the Blazor PDF Viewer component is in a disabled state or not. |
aria-expanded |
Indicates whether the suggestion list has expanded or not. |
aria-readonly |
Indicates the readonly state of the Blazor PDF Viewer element. |
aria-haspopup |
Indicates whether the Blazor PDF Viewer input element has a suggestion list or not. |
aria-label |
Indicates the breadcrumb item text. |
aria-labelledby |
Provides a label for the Blazor PDF Viewer. Typically, the “aria-labelledby” attribute will contain the id of the element used as the Blazor PDF Viewer’s title. |
aria-describedby |
This attribute points to the Blazor PDF Viewer element describing the one it’s set on. |
aria-orientation |
Indicates whether the Blazor PDF Viewer element is oriented horizontally or vertically. |
aria-valuetext |
Returns the current text of the Blazor PDF Viewer. |
aria-valuemax |
Indicates the Maximum value of the Blazor PDF Viewer. |
aria-valuemin |
Indicates the Minimum value of the Blazor PDF Viewer. |
aria-valuenow |
Indicates the current value of the Blazor PDF Viewer. |
aria-controls |
Attribute is set to the button and it points to the corresponding content. |
Keyboard interaction
The Blazor PDF Viewer 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 Message component.
| Press (Windows) | Press (Macintosh) | To do this |
|---|---|---|
| Shortcuts for page navigation | ||
| Up Arrow | Up Arrow | Scroll up |
| Down Arrow | Down Arrow | Scroll down |
| Shortcuts for Zooming | ||
| CONTROL + = | COMMAND + = | Perform zoom-in operation |
| CONTROL + - | COMMAND + - | Perform zoom-out operation |
| CONTROL + 0 | COMMAND + 0 | Retain the zoom level to 1 |
| Shortcut for Text Search | ||
| CONTROL + F | COMMAND + F | Open the search toolbar |
| Shortcut for Text Selection | ||
| CONTROL + C | CONTROL + C | Copy the selected text or annotation |
| CONTROL + X | CONTROL + X | Cut the selected text or annotation |
| CONTROL + Y | CONTROL + Y | Paste the selected text or annotation |
| Shortcuts for the general operation | ||
| CONTROL + Z | CONTROL + Z | Undo the action |
| CONTROL + Y | CONTROL + Y | Redo the action |
| CONTROL + P | COMMAND + P | Print the document |
| Delete | Delete | Delete the annotations |
Ensuring accessibility
The Blazor PDF Viewer component’s accessibility levels are ensured through an axe-core with playwright tests.
The accessibility compliance of the Blazor PDF Viewer component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor PDF Viewer component with accessibility tools.