diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index b91d40265db4..47f5a0f22b3b 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -229,3 +229,52 @@ application root module. }) export class MyApp {} ``` +### Accessibility +The `MdDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it +triggers a calendar dialog with `role="dialog"`. + +`MdDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input +should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or +`MdDatepickerIntl`. + +#### Keyboard shortcuts +The keyboard shortcuts to handle datepicker are: + +| Shortcut | Action | +|----------------------|-------------------------------------| +| `ALT` + `DOWN_ARROW` | Open the calendar pop-up | +| `ESCAPE` | Close the calendar pop-up | + + +In month view: + +| Shortcut | Action | +|----------------------|-------------------------------------| +| `LEFT_ARROW` | Go to previous day | +| `RIGHT_ARROW` | Go to next day | +| `UP_ARROW` | Go to same day in the previous week | +| `DOWN_ARROW` | Go to same day in the next week | +| `HOME` | Go to the first day of the month | +| `END` | Go to the last day of the month | +| `PAGE_UP` | Go to previous month | +| `ALT` + `PAGE_UP` | Go to previous year | +| `PAGE_DOWN` | Go to next month | +| `ALT` + `PAGE_DOWN` | Go to next year | +| `ENTER` | Select current date | + + +In year view: + +| Shortcut | Action | +|----------------------|-------------------------------------| +| `LEFT_ARROW` | Go to previous month | +| `RIGHT_ARROW` | Go to next month | +| `UP_ARROW` | Go to previous 6 months | +| `DOWN_ARROW` | Go to next 6 months | +| `HOME` | Go to the first month of the year | +| `END` | Go to the last month of the year | +| `PAGE_UP` | Go to previous year | +| `ALT` + `PAGE_UP` | Go to previous 10 years | +| `PAGE_DOWN` | Go to next year | +| `ALT` + `PAGE_DOWN` | Go to next 10 years | +| `ENTER` | Select current month | diff --git a/src/lib/menu/menu.md b/src/lib/menu/menu.md index ff082c83cc75..8a3969a1ed57 100644 --- a/src/lib/menu/menu.md +++ b/src/lib/menu/menu.md @@ -98,3 +98,7 @@ that should trigger the sub-menu: - RIGHT_ARROW: Opens the menu item's sub-menu - LEFT_ARROW: Closes the current menu, if it is a sub-menu. - ENTER: Activates the focused menu item + +### Accessibility +Menu triggers or menu items without text or labels should be given a meaningful label via +`aria-label` or `aria-labelledby`. diff --git a/src/lib/slide-toggle/slide-toggle.md b/src/lib/slide-toggle/slide-toggle.md index 8364d85c96df..7f0ffc79fb52 100644 --- a/src/lib/slide-toggle/slide-toggle.md +++ b/src/lib/slide-toggle/slide-toggle.md @@ -22,3 +22,11 @@ and `ReactiveFormsModule`. ### Theming The color of a `` can be changed by using the `color` property. By default, slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`. + +### Accessibility +The `` uses an internal `` to provide an accessible +experience. This internal checkbox receives focus and is automatically labelled by the text content +of the `` element. + +Slide toggles without text or labels should be given a meaningful label via `aria-label` or +`aria-labelledby`. diff --git a/src/lib/slider/slider.md b/src/lib/slider/slider.md index b2b06ab4272b..d64fb7daf111 100644 --- a/src/lib/slider/slider.md +++ b/src/lib/slider/slider.md @@ -85,3 +85,7 @@ The slider has the following keyboard bindings: | Page down | Decrement the slider value by 10 steps. | | End | Set the value to the maximum possible. | | Home | Set the value to the minimum possible. | + +### Accessibility +Sliders without text or labels should be given a meaningful label via `aria-label` or +`aria-labelledby`. diff --git a/src/lib/snack-bar/snack-bar.md b/src/lib/snack-bar/snack-bar.md index 5e2ac1b1fa2c..a468dfa3718a 100644 --- a/src/lib/snack-bar/snack-bar.md +++ b/src/lib/snack-bar/snack-bar.md @@ -72,3 +72,8 @@ export class MessageArchivedComponent { constructor(@Inject(MD_SNACK_BAR_DATA) public data: any) { } } ``` +### Accessibility +Snack-bar messages are announced via an `aria-live` region. Focus is not moved to +the snack-bar element, as this would be disruptive to a user in the middle of a +workflow. For any action offered in the snack-bar, the application should offer the +user an alternative way to perform the action (typically via keyboard shortcut). diff --git a/src/lib/toolbar/toolbar.md b/src/lib/toolbar/toolbar.md index eb7189923d0f..cfc2879b0c17 100644 --- a/src/lib/toolbar/toolbar.md +++ b/src/lib/toolbar/toolbar.md @@ -49,3 +49,13 @@ easily accomplished with `display: flex`: The color of a `` can be changed by using the `color` property. By default, toolbars use a neutral background color based on the current theme (light or dark). This can be changed to `'primary'`, `'accent'`, or `'warn'`. + +### Accessibility +By default, the toolbar assumes that it will be used in a purely decorative fashion and thus sets +no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of `
` +elements on the page. + +Generally, the toolbar is used as a header where `role="header"` would be appropriate. + +Only if the use-case of the toolbar match that of role="toolbar", the user should add the role and +an appropriate label via `aria-label` or `aria-labelledby`.