!90979 Show epic colour highlight on Epic boards - Follow up
This issue follows on from discussions in !90979 (merged) where there were questions about the equal ability for all GitLab users to make use of epic colours.
Initial review
Just to check, the scope of this MR is making the epic colour visible on epic boards? I've reviewed this MR assuming that is the scope.
- Writing: No changes
✅ - Patterns: No known existing patterns for surfacing colour
✅ - Visual design: Matches colours and styles specified in the designs
✅ - States: Keyboard focus, hover, drag and drop styles all look good
✅ - Responsive: Behaves as expected across the tested range of viewports and browser zooms
✅ - Accessibility:
- issue: Epic colour information not accessible in this view for users with colour blindness.
- issue: Epic colour is not available (tested using VoiceOver on MacOS). Are we able to present the epic colour to users who rely on screen readers or other assistive tech?
- suggestion: create a visually hidden element as part of the card content that can announce the epic colour for screen reader users.
Unfortunately I don't have any ideas to make this better for users with colour blindness. When this information is replicated in the side bar that will allow users to check, but it doesn't help when users are trying to see an overview.
Any ideas? I'll also ask some of my colleagues.
— comment
Slack discussion
Highlights from the conversation on Slack (internal)
👋 Hey! I’m covering this community contribution MR. It is part of a series of changes which adds the ability to assign a colour to an epic. This MR makes that colour visible on the Epic list view.I’m concerned that epic colour information not accessible in this view for users with colour blindness. Elsewhere this information is always accompanied with a label. In the future this information will be available in the side bar. This will allow users to check, but it doesn’t help when users are trying to see an overview.
Any thoughts on how we can create an equal experience for our users who are unable to distinguish between colours?
Currently colours are chosen from a set list. It might be possible (but non-trivial) to assign a pattern to each and use a colour/pattern combo. However this will become harder if this becomes an infinite number of user selected colours in the future.
Another thought I had was some sort of tooltip/hover information. But I don’t think that really helps solve the problem of the comparative view.
I think it's the same scenario as labels right? You can still see the epic name? The colour doesn't actually have any further definition? (edited)
Thanks for collaborating on this Lee!
I understand the expected use case is to use the colours to group epics together. For example, one product owner describes how they would mark epics so development work stands out amongst the rest of the orgs milesones. There are others (1, 2, 3) like this, where colours are used for grouping/meaning.
So although a colour blind user would be able to see the epic name, they might not be able to participate fully. I can imagine situations where someone might say:
Right now we are prioritising the red colour epics
Looking at the green items on our roadmap…
I think labels are different, the label colour and name always appear together. Where as in the (simulated) example in the screenshot, users wouldn’t be able to identify the green epics here.
What do you think?
I think I see where you're headed, but I think labels could be used in the same way.
Let's say I currently have 2 teams... development and support. My development team deal with all C# and Java labels (so they're both blue)... and my support team deal with all my SQL and Reporting labels (so they're both red)
If the label colours don't mean anything, then why do we have them? I guess maybe to help group labels in some way... but ultimately there's a reason, and somoene who's colourblind isn't quite going to benefit from the same experience
Is there a "colour blind" mode, or "accessible mode" for GitLab?
I know Trello has that concept (see https://twitter.com/trello/status/543420024166174721).
I wonder if something like that would be better, where it applies some kind of pattern to the background of the cards based on the colour. The patterns might need to be generated automatically, like the avatar icons.
This would be a significant amount of extra work though.
@uhlexsis
does this MR impact how you might display status in the future? My initial reaction to this is that adding more color in the UI should be considered way more heavily.
Have other explorations been done to solve the problem differently?
Using color alone here could be problematic because it seems to:
- Conflict with status
- Have accessibility concerns by differentiating by color alone (assuming there’s no other way to understand a group or association)
- Introduce yet more color into the UI (we have other views that have already been called the “Christmas tree page”) which can dilute its effectiveness
Conflict with status
I don't think the colour of an epic would be related to the status, and the display of these pieces of information would be different, IMO.
accessibility concerns by differentiating by color alone
I can understand the possible concerns here, although I also think this could be iterated on. Especially while the feature is still behind a feature flag. Alexis has already raised a follow up issue to allow a user to toggle the side colour border on/off, which would be a fast iteration here.
Introduce yet more color
I'm not sure how this will play out. Again, I think while it is behind a feature flag we have a lot of time to iterate this if the feedback is that there is too much colour on the page. And the toggle mentioned above could again be a quick iteration that solves the issue for people that do find it too colourful
I'd like to get the roadmap into a place where it can actually be used to generate nice looking roadmaps similar to [other roadmap tools]. The colours used [in other roadmap tools] need to float up to other areas where they are used though, like the epic boards (I personally like the full colour cards used in [competitor], but that doesn't follow any UX guidelines in GitLab that I'm aware of, but this could easily be iterated on if that was going to be used in the future)
I think a feature flag is great and if Alexis has been working on this then we have space necessary to validate and iterate. Don’t let my concerns be a blocker then if there’s a plan.
Problem
- How might we make epic colour information available in this view for users with colour blindness?
- How might we present the epic colour to users who rely on screen readers or other assistive tech?
- Would the current solution fail WCAG Success Criterion 1.4.1 Use of Color (Level A) ?
Related to #7641 (closed)