How can I help you?
Accessibility in Syncfusion® Blazor SfPdfViewer
12 Feb 20269 minutes to read
The Blazor SfPdfViewer component follows established accessibility guidelines and standards, including the ADA, Section 508, WCAG 2.2 standards, and WCAG roles, which are commonly used to evaluate accessibility.
The accessibility compliance for the Blazor SfPdfViewer 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 enhance 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 commonly applied in the SfPdfViewer component:
| Attributes | Purpose |
|---|---|
aria-disabled |
Indicates whether an interactive control (for example, a toolbar button) is disabled and not operable. |
aria-expanded |
Indicates whether an expandable element (for example, a panel or toolbar menu) is currently expanded. |
aria-readonly |
Indicates that the element is read-only and user input is not expected. |
aria-haspopup |
Identifies that the element opens a popup (menu, dialog, or toolbar). |
aria-label |
Provides an accessible name for controls or regions when a visible label is not available. |
aria-labelledby |
Identifies the element that labels this element by referencing that element’s id. |
aria-describedby |
Identifies the element that provides a description for this element by referencing that element’s id. |
aria-orientation |
Indicates the orientation (horizontal or vertical) of widgets such as sliders or splitters. |
aria-valuetext |
Provides a human-readable text alternative of the current value (for example, a zoom level). |
aria-valuemax |
Indicates the maximum value for range widgets (for example, maximum zoom). |
aria-valuemin |
Indicates the minimum value for range widgets (for example, minimum zoom). |
aria-valuenow |
Indicates the current numeric value for range widgets (for example, current zoom). |
aria-controls |
Identifies the element or region controlled by this element (for example, a button that opens a panel). |
Keyboard interaction
The Blazor SfPdfViewer component follows the keyboard interaction guideline, making it accessible to users who rely on assistive technologies (AT) and keyboard navigation. The following keyboard shortcuts are supported by the SfPdfViewer component.
| Windows | Mac | Action |
|---|---|---|
| Shortcuts for page navigation | ||
| Ctrl + ← / Ctrl + ↑ | ⌘ + ← / ⌘ + ↑ | Navigate to the first page |
| Ctrl + → / Ctrl + ↓ | ⌘ + → / ⌘ + ↓ | Navigate to the last page |
| ← | ← / ⇧ + Space | Navigate to the previous page |
| → | → / Space | Navigate to the next page |
| Ctrl + G | ⌘ + G | Go To The Page |
| ↑ | ↑ | Scroll up |
| ↓ | ↓ | Scroll down |
| Shortcuts for Zooming | ||
| Ctrl + = | ⌘ + = | Perform zoom-in operation |
| Ctrl + - | ⌘ + - | Perform zoom-out operation |
| Ctrl + 0 | ⌘ + 0 | Reset zoom to 100% |
| Shortcut for Text Search | ||
| Ctrl + F | ⌘ + F | Open the search toolbar |
| Shortcut for Text Selection | ||
| Ctrl + C | ⌘ + C | Copy the selected text or annotation |
| Ctrl + X | ⌘ + X | Cut the selected text or annotation |
| Ctrl + V | ⌘ + V | Paste the selected text or annotation |
| Shortcuts for general operation | ||
| Ctrl + Z | ⌘ + Z | Undo the action |
| Ctrl + Y | ⌘ + Y | Redo the action |
| Ctrl + P | ⌘ + P | Print the document |
| Delete | Delete | Delete the annotations |
| Ctrl + Shift + A | ⌘ + ⇧ + A | Toggle Annotation Toolbar |
| Ctrl + Alt + 0 | ⌘ + ⌥ + 0 | Show Command panel |
| Ctrl + Alt + 2 | ⌘ + ⌥ + 2 | Show Bookmarks |
| Ctrl + Alt + 1 | ⌘ + ⌥ + 1 | Show Thumbnails |
| Ctrl + S | ⌘ + S | Download |
| Shift + H | ⇧ + H | Enable pan mode |
| Shift + V | ⇧ + V | Enable text selection mode |
Ensuring accessibility
The Blazor SfPdfViewer component’s accessibility levels are ensured through an axe-core with playwright tests.
The accessibility compliance of the Blazor SfPdfViewer component is demonstrated in the following sample. Open the SfPdfViewer accessibility sample in a new window to evaluate the accessibility of the Blazor SfPdfViewer component with accessibility tools.