Accessibility in Syncfusion Blazor SfPdfViewer components
26 Mar 20249 minutes to read
The Blazor SfPdfViewer 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 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 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 SfPdfViewer component:
| Attributes | Purpose |
|---|---|
aria-disabled |
Indicates whether the Blazor SfPdfViewer 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 SfPdfViewer element. |
aria-haspopup |
Indicates whether the Blazor SfPdfViewer input element has a suggestion list or not. |
aria-label |
Indicates the breadcrumb item text. |
aria-labelledby |
Provides a label for the SfPdfViewer. Typically, the “aria-labelledby” attribute will contain the id of the element used as the Blazor SfPdfViewer’s title. |
aria-describedby |
This attribute points to the Blazor SfPdfViewer element describing the one it’s set on. |
aria-orientation |
Indicates whether the Blazor SfPdfViewer element is oriented horizontally or vertically. |
aria-valuetext |
Returns the current text of the SfPdfViewer. |
aria-valuemax |
Indicates the Maximum value of the SfPdfViewer. |
aria-valuemin |
Indicates the Minimum value of the SfPdfViewer. |
aria-valuenow |
Indicates the current value of the SfPdfViewer. |
aria-controls |
Attribute is set to the button and it points to the corresponding content. |
Keyboard interaction
The Blazor SfPdfViewer 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 | ||
| CONTROL + Left Arrow (or) CONTROL + Up Arrow | COMMAND + Left Arrow (or) COMMAND + Up Arrow | Navigate to the first page |
| CONTROL + Right Arrow (or) CONTROL + Down Arrow | COMMAND + Right Arrow (or) COMMAND + Down Arrow | Navigate to the last page |
| Left Arrow | Left Arrow (or) Shift + Space | Navigate to the previous page |
| Right Arrow | Right Arrow (or) Space | Navigate to the next page |
| CONTROL + G | COMMAND + G | Go To The Page |
| 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 |
| CONTROL + Shift + A | COMMAND + Shift + A | Toggle Annotation Toolbar |
| CONTROL + Alt + 0 | COMMAND + Option + 0 | Show Command panel |
| CONTROL + Alt + 2 | COMMAND + Option + 2 | Show Bookmarks |
| CONTROL + Alt + 1 | COMMAND + Option + 1 | Show Thumbnails |
| CONTROL + S | COMMAND + S | Download |
| Shift + H | Shift + H | Enable pan mode |
| Shift + V | Shift + 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 shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor SfPdfViewer component with accessibility tools.