mirror of
https://github.com/material-components/material-components-ios.git
synced 2026-02-20 08:27:32 +08:00
107 lines
3.7 KiB
Markdown
107 lines
3.7 KiB
Markdown
## Accessibility
|
|
|
|
To help ensure your buttons are accessible to as many users as possible, please
|
|
be sure to review the following recommendations:
|
|
|
|
### Set `-accessibilityLabel`
|
|
|
|
Set an appropriate
|
|
[`accessibilityLabel`](https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel)
|
|
value if your button does not have a title. This is often the case with Floating
|
|
Action Button instances which typically only have an icon.
|
|
|
|
#### Objective-C
|
|
|
|
```objc
|
|
button.accessibilityLabel = @"Create";
|
|
```
|
|
|
|
#### Swift
|
|
|
|
```swift
|
|
button.accessibilityLabel = "Create"
|
|
```
|
|
|
|
### Minimum touch size
|
|
|
|
Make sure that your buttons have a minimum touch area. The Material spec
|
|
for buttons calls for buttons that have a [visual height of
|
|
36](https://material.io/design/components/buttons.html#specs)
|
|
and that [touch areas should be at least 48 points high and 48
|
|
wide](https://material.io/design/layout/spacing-methods.html#touch-click-targets).
|
|
|
|
#### Set the touch size
|
|
|
|
To keep a button's visual sizes small with larger touchable areas, set the
|
|
`hitAreaInsets` to a negative value. Be careful to maintain sufficient distance
|
|
between the button touch targets. This will allow your button to have [a large
|
|
enough touch
|
|
target](https://material.io/design/layout/spacing-methods.html#touch-click-targets)
|
|
while maintaining the desired visual appearance. For more see the [Touch and click
|
|
targets](https://material.io/design/layout/spacing-methods.html#touch-click-targets)
|
|
in the spec.
|
|
|
|
##### Objective-C
|
|
|
|
```objc
|
|
CGFloat verticalInset = MIN(0, -(48 - CGRectGetHeight(button.bounds)) / 2);
|
|
CGFloat horizontalInset = MIN(0, -(48 - CGRectGetWidth(button.bounds)) / 2);
|
|
button.hitAreaInsets = UIEdgeInsetsMake(verticalInset, horizontalInset, verticalInset, horizontalInset);
|
|
```
|
|
|
|
##### Swift
|
|
|
|
```swift
|
|
let buttonVerticalInset =
|
|
min(0, -(kMinimumAccessibleButtonSize.height - button.bounds.height) / 2);
|
|
let buttonHorizontalInset =
|
|
min(0, -(kMinimumAccessibleButtonSize.width - button.bounds.width) / 2);
|
|
button.hitAreaInsets =
|
|
UIEdgeInsetsMake(buttonVerticalInset, buttonHorizontalInset,
|
|
buttonVerticalInset, buttonHorizontalInset);
|
|
```
|
|
|
|
#### Set the minimum visual size of the button
|
|
|
|
Set your buttons to have a minimum size. [Material Buttons
|
|
guidelines](https://material.io/design/components/buttons.html#specs)
|
|
typically recommend [a minimum height of 36 points and a minimum width of 64
|
|
points](https://material.io/design/components/buttons.html#specs).
|
|
|
|
##### Objective-C
|
|
|
|
```objc
|
|
button.minimumSize = CGSizeMake(64, 36);
|
|
```
|
|
|
|
##### Swift
|
|
|
|
```swift
|
|
button.minimumSize = CGSize(width: 64, height: 48)
|
|
```
|
|
|
|
##### Exceptions
|
|
|
|
However there are
|
|
[some](https://material.io/design/components/buttons.html#toggle-button) clear
|
|
[exceptions](https://material.io/design/components/app-bars-bottom.html#specs)
|
|
for these rules. Please adjust your buttons sizes accordingly.
|
|
|
|
#### Using `accessibilityHint`
|
|
|
|
Apple rarely recommends using the `accessibilityHint` because the label should
|
|
already be clear enough to indicate what will happen. Before you consider
|
|
setting an `-accessibilityHint` consider if you need it or if the rest of your
|
|
UI could be adjusted to make it more contextually clear.
|
|
|
|
A well-crafted, thoughtful user interface can remove the need for
|
|
`accessibilityHint` in most situations. Examples for a selection dialog to
|
|
choose one or more days of the week for a repeating calendar event:
|
|
|
|
* (Good) The dialog includes a header above the list of days reading, "Event
|
|
repeats weekly on the following day(s)." The list items do not need
|
|
`accessibilityHint` values.
|
|
* (Bad) The dialog has no header above the list of days. Each list item
|
|
(representing a day of the week) has the `accessibilityHint` value, "Toggles
|
|
this day."
|