Skip to content

Commit a175f8c

Browse files
committed
docs: update accessibility and keyboard-nav specs
1 parent 02e214d commit a175f8c

File tree

1 file changed

+80
-0
lines changed

1 file changed

+80
-0
lines changed
Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: Wai-Aria Support
3+
page_title: Telerik UI for Blazor FloatingActionButton Documentation | FloatingActionButton Accessibility
4+
description: "Get started with the Telerik UI for Blazor FloatingActionButton and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
tags: telerik,blazor,accessibility,wai-aria,wcag
6+
slug: floatingactionbutton-wai-aria-support
7+
position: 50
8+
---
9+
10+
# Blazor FloatingActionButton Accessibility
11+
12+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
13+
14+
15+
16+
Out of the box, the Telerik UI for Blazor FloatingActionButton provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.
17+
18+
19+
The FloatingActionButton is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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.
20+
21+
## WAI-ARIA
22+
23+
24+
This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.
25+
26+
27+
The FloatingActionButton features two distinct modes of operation: button-only and button-with-menu.
28+
29+
### Button-Only Mode
30+
31+
| Selector | Attribute | Usage |
32+
| -------- | --------- | ----- |
33+
| `.k-fab` | `role=button` or `nodeName=button` | Omitted if the `<button>` DOM element is used. |
34+
| | `aria-label` or `title` | The attribute must be present when no text is initially visible in the button. |
35+
| `.k-fab.k-disabled` | `aria-disabled=true` | Rendered only when the button is disabled and the `disabled` attribute cannot be used. Applicable for the `<button>` or `<input type="button">` elements. |
36+
37+
### Button-with-Menu Mode
38+
39+
40+
In the button-with-menu mode, the FloatingActionButton must implement the specification for the DropDownButton component.
41+
42+
[DropDownButton accessibility specification]({{dropdownbutton_a11y_link}})
43+
44+
## Resources
45+
46+
[WAI-ARIA Authoring Practices: Navigation Menu Button Example](https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links.html)
47+
48+
## Section 508
49+
50+
51+
The FloatingActionButton is fully compliant with the [Section 508 requirements](http://www.section508.gov/).
52+
53+
## Testing
54+
55+
56+
The FloatingActionButton has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.
57+
58+
> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).
59+
60+
### Screen Readers
61+
62+
63+
The FloatingActionButton has been tested with the following screen readers and browsers combinations:
64+
65+
| Environment | Tool |
66+
| ----------- | ---- |
67+
| Firefox | NVDA |
68+
| Chrome | JAWS |
69+
| Microsoft Edge | JAWS |
70+
71+
72+
73+
## Keyboard Navigation
74+
75+
For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article.
76+
77+
## See Also
78+
79+
* [FloatingActionButton Overview](https://demos.telerik.com/blazor-ui/floatingactionbutton/overview)
80+
* [Accessibility in Telerik UI for Blazor](slug://accessibility-overview)

0 commit comments

Comments
 (0)