diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index 42113201f7a..69135c3d513 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -72,6 +72,11 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. ::: +## Accessibility + +Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set. + +It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value. ## Interfaces