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 Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Intermediate
Keyboard Navigation Support Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - 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
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
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.

See also