Automattic / Automattic/Iris

Gradient selector and color links lack ARIA labels

Open
#69 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
259
Forks
67
PR merge metrics
No merged PRs in 30d

Description

We recently worked with the Inclusive Design Research Centre to conduct an accessibility audit on our WordPress-based software backend (for [Pressbooks](https://pressbooks.org/)). In the course of that audit, the auditor indicated that the content of the color picker is not communicated to users of assistive technologies. For example, the selector within the gradient is communicated as `link,` and the various colors (black, white, red, etc.) are announced as `group`.
![Screen Shot 2019-04-29 at 1 13 03 PM](https://user-images.githubusercontent.com/13485451/56917221-8d455480-6a80-11e9-8e30-748b733b76ee.png)

Our auditors indicated that this can be fixed by adding [an ARIA label](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html) to each color so that it says something other than 'group' (i.e. the color's name or hex value).

Contributor guide

No contributing guide indexed for this repository

Research direction

No file or test is named in the issue. Start by locating the gradient color-picker implementation and inspect how its selector and color entries are exposed to assistive technologies. Done means the selector and each color announce a meaningful color name or hex value instead of “link” or “group”.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.