Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[4.6] chore(a11y): generate wai aria articles with the latest a11y specs #1666

Merged
merged 2 commits into from
Oct 10, 2023
Merged

[4.6] chore(a11y): generate wai aria articles with the latest a11y specs #1666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
593e2bb
docs(a11y): add pdfviewer wai aria article
xristianstefanov Oct 10, 2023
85713f6
docs: update accessibility and keyboard-nav specs
kendo-bot Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions components/pdfviewer/accessibility/wai-aria-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: Wai-Aria Support
page_title: Telerik UI for Blazor PDFViewer Documentation | PDFViewer Accessibility
description: "Get started with the Telerik UI for Blazor PDFViewer and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
tags: telerik,blazor,accessibility,wai-aria,wcag
slug: pdfviewer-wai-aria-support
position: 50
---

# Blazor PDFViewer Accessibility

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)



xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
Out of the box, the Telerik UI for Blazor PDFViewer provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.


The PDFViewer is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.1 AA](https://www.w3.org/TR/WCAG21/) standards](https://www.w3.org/TR/WCAG21/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for managing its focus and is tested against the most popular screen readers.
xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved

## WAI-ARIA


xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.


xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
The PDFViewer component contains two inner elements - a toolbar and a page container.
xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved

[ToolBar accessibility specification]({{toolbar_a11y_link}})
xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-pdfviewer .k-canvas` | `tabindex=0` | Defines the focusable page container element. |
| | `aria-label` | Describes the purpose of the focusable container. Translatable message. |
| | `role=document` | Defines that content should be evaluated in reader mode by assistive technologies. |
| `.k-pdfviewer .k-toolbar .k-button:has(.k-svg-i-search, .k-i-search)` | `aria-haspopup=dialog` | Describes that the Search tool button opens a dialog element. |
| `.k-pdfviewer .k-canvas .k-search-panel` | `role=dialog` | Describes the role of the Search panel. |
| | `aria-label` | Translatable message, same label as the one, used to describe the Toolbar Search tool. |

## Section 508


xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
The PDFViewer is fully compliant with the [Section 508 requirements](http://www.section508.gov/).

## Testing


xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
The PDFViewer has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.

> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).

### Screen Readers


xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
The PDFViewer has been tested with the following screen readers and browsers combinations:
xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved

| Environment | Tool |
xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |



xristianstefanov marked this conversation as resolved.
Show resolved Hide resolved
## See Also

* [Blazor PDFViewer Overview (Demo)](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %})
* [Accessibility Theme]({% slug themes-accessibility-swatch %})
12 changes: 12 additions & 0 deletions src-a11y/configs/pdfviewer.aria.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
title: Wai-Aria Support
component: PDFViewer
from: /aria/pdfviewer_aria.md
dest: ../components/pdfviewer/accessibility/wai-aria-support.md
slug: pdfviewer-wai-aria-support
position: 50
after: |
## See Also

* [Blazor PDFViewer Overview (Demo)](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
* [Accessibility in Telerik UI for Blazor]({% slug accessibility-overview %})
* [Accessibility Theme]({% slug themes-accessibility-swatch %})
Loading