Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WCAG 1.3.3] Update elements for better recognition #63

Merged
merged 8 commits into from
Nov 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions docs/guidelines/platforms/android/guideline_percievable_android.md
Original file line number Diff line number Diff line change
Expand Up @@ -399,19 +399,28 @@ _**Note.** When modifying the traversal order, make sure that it is done in a wa

---

### Sensory characteristics
### Sensory characteristics (WCAG 1.3.3 - Level A)

*This guideline covers point 1.3.3 Sensory characteristics - Level A of the WCAG standard.*
Instructions for using content should avoid relying exclusively on sensory characteristics such as shape, color, size, visual position, orientation, or sound cues. Instead, ensure they include descriptive text or additional indicators that make the content understandable to users of all abilities.

> This guideline covers _1.3.3 Sensory characteristics - Level A of the WCAG standard._

#### ✅ Success technique(s)

The content provided in your app must be easily understandable to all users. That is why it is recommended to use cues or symbols rather than colors to distinguish different views and different actions that those views provide. That way, users with color vision deficiencies could also easily understand the whole UI.
To ensure our app is fully accessible to all users, we should avoid relying on a single characteristic to display elements on the screen.

##### 🚫 Failures
**Example:**

- An important difference between elements is stressed only with colors.
If the action on the screen depends on the button of a particular shape (e.g., "To submit the form press on the round button"), it is recommended to provide additional cues about the button's purpose.
For example, adding a `check sign` to the button that will be appropriately labeled so users using accessibility services are able to identify the targeted button more easily ("To submit the form press on the round check button").

---
That way, users with visual impairments will be able to understand the button's purpose even if they can't see its shape.

:no_entry_sign: **Failures**

- Designing elements that are hard to distinguish and rely on only one characteristic to be visible on the screen.

_Important to note is that this guideline primarily depends on accessible design._

## Distinguishable (WCAG 1.4)

Expand All @@ -433,11 +442,6 @@ Make sure that color isn't the only visual cue used for conveying information, i

_Important to note is that this guideline primarily depends on accessible design._

## Other perceivable guidelines

This section includes guidelines that may not apply to the Android platform or fall under the mobile team’s responsibilities. However, please keep in mind that these guidelines still need to be met.

- [WCAG 1.4.3 Contrast (Minimum) - Level AA](https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum) - This guideline completely depends on the accessible design

### Resizeable text (WCAG 1.4.4 - Level AA)

Expand Down Expand Up @@ -644,6 +648,14 @@ Content becomes unusable on a device with a smaller screen, when changing the or

---

## Other perceivable guidelines

This section includes guidelines that may not apply to the Android platform or fall under the mobile team’s responsibilities. However, please keep in mind that these guidelines still need to be met.

- [WCAG 1.4.3 Contrast (Minimum) - Level AA](https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum) - This guideline completely depends on the accessible design

---

#### Sources

- [Google Support Page](https://support.google.com/accessibility/android)
Expand Down
2 changes: 1 addition & 1 deletion docs/guidelines/principles/guideline_checklist.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Guidelines mentioned in this section are related to the content of the applicati

Guidelines mentioned in this section are related to the user interface and experience of the application, which should be intuitive and easy to use. Its implementation is mostly done in collaboration with a design team which should provide the necessary information about the user interface and user experience per component or screen.

- [ ] 1.3.3 Sensory characteristics (A) - Android | [iOS](../platforms/ios/guideline_perceivable_ios.md#sensory-characteristics-wcag-133---level-a) | Flutter
- [ ] 1.3.3 Sensory characteristics (A) - [Android](../platforms/android/guideline_percievable_android.md#sensory-characteristics-wcag-133---level-a) | [iOS](../platforms/ios/guideline_perceivable_ios.md#sensory-characteristics-wcag-133---level-a) | Flutter
- [ ] 1.3.4 Orientation (AA) - Android | [iOS](../platforms/ios/guideline_perceivable_ios.md#orientation-wcag-134---level-aa) | Flutter
- [ ] 1.4.1 Use of color (A) - [Android](../platforms/android/guideline_percievable_android.md#use-of-color-wcag-141---level-a) | [iOS](../platforms/ios/guideline_perceivable_ios.md#other-perceivable-guidelines) | Flutter
- [ ] 1.4.2 Audio control (A) - Android | [iOS](../platforms/ios/guideline_perceivable_ios.md#other-perceivable-guidelines) | Flutter
Expand Down