Skip to content

Commit 1cc00eb

Browse files
jelbournwagnermaciel
authored andcommitted
docs(material/button): expand a11y section
Expands the buttons accessibility section with additional information on disabling anchors, icons, and toggle buttons.
1 parent fe77542 commit 1cc00eb

File tree

1 file changed

+17
-4
lines changed

1 file changed

+17
-4
lines changed

src/material/button/button.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,22 @@ approach this to the consuming app.
3434

3535
### Accessibility
3636
Angular Material uses native `<button>` and `<a>` elements to ensure an accessible experience by
37-
default. The `<button>` element should be used for any interaction that _performs an action on the
38-
current page_. The `<a>` element should be used for any interaction that _navigates to another
39-
view_.
37+
default. A `<button>` element should be used for any interaction that _performs an action on the
38+
current page_. An `<a>` element should be used for any interaction that _navigates to another
39+
URL_. All standard accessibility best practices for buttons and anchors apply to `MatButton`.
4040

41+
#### Disabling anchors
42+
`MatAnchor` supports disabling an anchor in addition to the features provided by the native
43+
`<a>` element. When you disable an anchor, the component sets `aria-disabled="true"` and
44+
`tabindex="-1"`. Always test disabled anchors in your application to ensure compatibility
45+
with any assistive technology your application supports.
46+
47+
#### Buttons with icons
4148
Buttons or links containing only icons (such as `mat-fab`, `mat-mini-fab`, and `mat-icon-button`)
42-
should be given a meaningful label via `aria-label` or `aria-labelledby`.
49+
should be given a meaningful label via `aria-label` or `aria-labelledby`. [See the documentation
50+
for `MatIcon`](https://material.angular.io/components/icon) for more
51+
information on using icons in buttons.
52+
53+
#### Toggle buttons
54+
[See the documentation for `MatButtonToggle`](https://material.angular.io/components/button-toggle)
55+
for information on stateful toggle buttons.

0 commit comments

Comments
 (0)