diff --git a/.styleguidist/accessibility.md b/.styleguidist/accessibility.md index 1f9b8536f..012020319 100644 --- a/.styleguidist/accessibility.md +++ b/.styleguidist/accessibility.md @@ -1,4 +1,4 @@ -Our goal is to be WCAG 2.1 (and eventually WCAG 2.2) compliant at an AA level for all components. Additionally, components are tested in commonly used user agents and with common assistive technology. We also aim to support Windows High Contrast mode. Based on our testing, almost all components fulfill these goals, with a few [outstanding issues](./#Accessibility?=known-issues). +Our goal is to be WCAG 2.2 compliant at an AA level for all components. Additionally, components are tested in commonly used user agents and with common assistive technology. We also aim to support Windows High Contrast mode. Based on our testing, almost all components fulfill these goals, with a few [outstanding issues](./#Accessibility?=known-issues). Using the Suomi.fi component library does not automatically make your project accessible, but it will hopefully significantly reduce the amount of work you need to do to provice an accessible user experience. It is important to read the documentation for each component carefully. @@ -18,12 +18,13 @@ Using the Suomi.fi component library does not automatically make your project ac ## Known issues -* **MultiSelect** and **SingleSelect**: Options are not read out by VoiceOver on macOS when using Safari. -* **MultiSelect** and **SingleSelect**: The selected state of an option is not read out by JAWS. -* **Textarea** and **TextInput**: Success/error states are not distinguishable without colour. -* **Breadcrumb**: Line-height does not adjust when only text is resized 200%. -* **Dropdown**: Line-height does not adjust when only text is resized 200%. -* **DateInput**: Disabled dates are not distuinguishable from non-disabled ones in Windows High Contrast mode. +- **MultiSelect** and **SingleSelect**: Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations. +- **MultiSelect** and **SingleSelect**: The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari. +- **MultiSelect**, **SingleSelect** and **DropDown**: Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation. +- **Textarea** and **TextInput**: Success/error states are not distinguishable without colour. +- **Breadcrumb**: Height does not adjust when text wraps, e.g. when text is resized 200%. +- **Dropdown**: Height does not adjust when only text is resized 200%. +- **DateInput**: Disabled dates are not distuinguishable from non-disabled ones in Windows High Contrast mode. ## Our accessibility checklist @@ -45,6 +46,7 @@ This checklist reflects the current features of the component library. It is not * All functionality can be accessed with keyboard * Keyboard focus is clearly visible +* The element in focus is visible when it receives keyboard focus. * The keyboard focus order within a component is logical * Focusing a component or its sub-component does not cause a change of context. * Component has no single-character shortcuts. @@ -53,11 +55,13 @@ This checklist reflects the current features of the component library. It is not * Focusing or hovering a component or its sub-component does not cause a change of context. * No actions are performed using the pointer down-event, unless it is native functionality defined by the user-agent. +* Any actions that use a dragging movement can also be performed using a single pointer without dragging. +* Target sizes fulfill WCAG 2.5.8 Target Size (Minimum) requirement 24 x 24 px. ### Adaptability * Text resizing to 200% does not cause loss of information or overlapping content. **Must** support full-page zoom. **Should** support text-only zoom. -* Changing text settings according to WCAG *4.12 does not cause loss of information or overlap. +* Changing text settings according to WCAG 1.4.12 does not cause loss of information or overlap. * Zooming to 400% in a 1280px wide window does not cause horizontal scrolling, loss or overlap of information. * Content is not limited to a specific device orientation. diff --git a/src/core/Breadcrumb/Breadcrumb/Breadcrumb.md b/src/core/Breadcrumb/Breadcrumb/Breadcrumb.md index ae7e61f7d..d4e6359af 100644 --- a/src/core/Breadcrumb/Breadcrumb/Breadcrumb.md +++ b/src/core/Breadcrumb/Breadcrumb/Breadcrumb.md @@ -1,5 +1,9 @@ The `` component is used to let the user know their current location in a web service. It is rendered as an HTML `nav` element. +### Accessibility Notes + +- Height does not adjust when text wraps, e.g. when text is resized 200%. + Examples: - [Basic use](./#/Components/Breadcrumb?id=basic-use) diff --git a/src/core/Dropdown/Dropdown/Dropdown.md b/src/core/Dropdown/Dropdown/Dropdown.md index c67e26b78..0195e81c6 100644 --- a/src/core/Dropdown/Dropdown/Dropdown.md +++ b/src/core/Dropdown/Dropdown/Dropdown.md @@ -4,6 +4,11 @@ If there are a lot of options in the list, consider using the filterable RadioButton component instead. +### Accessibility notes + +- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation. +- Height does not adjust when only text is resized 200%. + Examples: - [Basic use](./#/Components/Dropdown?id=basic-use) diff --git a/src/core/Form/DateInput/DateInput.md b/src/core/Form/DateInput/DateInput.md index 7b529d84a..572c0c119 100644 --- a/src/core/Form/DateInput/DateInput.md +++ b/src/core/Form/DateInput/DateInput.md @@ -181,7 +181,7 @@ import { DateInput } from 'suomifi-ui-components'; ### Disabled dates in date picker -Use the `shouldDisableDate()` prop to disable certain dates from the date picker. Disabled dates can still be accessed through keyboard navigation but they are not selectable. +Use the `shouldDisableDate()` prop to disable certain dates from the date picker. Disabled dates can still be accessed through keyboard navigation but they are not selectable. Accessibility note: disabled dates are not currently distuinguishable from non-disabled ones in Windows High Contrast mode. ```js import { DateInput } from 'suomifi-ui-components'; diff --git a/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.md b/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.md index 2092a6c27..15f2252b7 100644 --- a/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.md +++ b/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.md @@ -2,6 +2,12 @@ The `` component is used to select multiple items from a list of op If you need to select only one option, use the [SingleSelect](./#/Components/SingleSelect) component instead. +### Accessibility notes + +- Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations. +- The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari. +- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation. + Examples: - [Basic use](./#/Components/MultiSelect?id=basic-use) diff --git a/src/core/Form/Select/SingleSelect/SingleSelect.md b/src/core/Form/Select/SingleSelect/SingleSelect.md index 8f378ac72..6ee1822a0 100644 --- a/src/core/Form/Select/SingleSelect/SingleSelect.md +++ b/src/core/Form/Select/SingleSelect/SingleSelect.md @@ -4,6 +4,12 @@ If you need to select multiple options, use the [MultiSelect](./#/Components/Mul If your list only contains a few options (user does not need filtering to find the correct option), use the [Dropdown](./#/Components/Dropdown) component instead. +### Accessibility notes + +- Options are not read out by VoiceOver on macOS when using Safari and when navigating options using up/down arrow keys. Options remain accessible using regular VO+arrow key combinations. +- The selected state of an option is not read out by JAWS with either Chrome or Firefox or macOS VoiceOver with Safari. +- Browsing the options of the opened listbox in VoiceOver on iOS requires using touch navigation. + Examples: - [Basic use](./#/Components/SingleSelect?id=basic-use) diff --git a/src/core/Form/TextInput/TextInput.md b/src/core/Form/TextInput/TextInput.md index f0851145e..9142a037b 100644 --- a/src/core/Form/TextInput/TextInput.md +++ b/src/core/Form/TextInput/TextInput.md @@ -2,6 +2,10 @@ The component's width should match the preferred length of the user input. +### Accessibility Notes + +- Success/error states are not distinguishable without colour. + Examples: - [Basic use](./#/Components/TextInput?id=basic-use) diff --git a/src/core/Form/Textarea/Textarea.md b/src/core/Form/Textarea/Textarea.md index 977df1a36..92827fd33 100644 --- a/src/core/Form/Textarea/Textarea.md +++ b/src/core/Form/Textarea/Textarea.md @@ -1,5 +1,9 @@ The `