1557605 - Introduce accessibility related warnings in webconsole.

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Yura Zenevich [:yzen] (please use "needinfo")]

Martin and I had a conversation about accessibility related badges in the inspector and the concern there was the worry of making the inspector markup tree too noisy.

The proposal that we had was to introduce and accessibility filter for the console. If enabled, we would lazily analyze colour contrast for text DOM nodes when they become present in the markup inspector (one of the use cases would be a split view usage of the console and inspector).

Comment 1

[:Harald Kirschner :digitarald]

This sounds great. I assume it would only warn when the filter is on?

My concern is that showing DOM/CSS-related a11y warnings in the console seems backward given how few people open split console with Inspector.

Have we considered to use the gutter space to show warning symbols?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

We should really check people would use that. The CSS warnings are not used that much because they're noisy (even if we're trying to make them more useful).
Also, at some point we reduced the number of filters in the console, and I'd like us to be very mindful what we add there.

Maybe we could only have a button in the inspector/accessibility panel that would say "run audit", and that would open the split console and log some (warning?) messages in a console.group ? (or in multiple groups, for each audit).

▼ Color contrast audit
|  <span#id1> ✜ fails with a score range of ...
|  <div.hello> ✜ fails with a score range of ...
▼ Text side audit
|  <p> ✜ fails with a score of ...

The ✜ let the user highlight the element in the page, and clicking on it select it in the inspector.

I think that would be more discoverable than a filter in the console (which people working on the markup might not look at).

Comment 3

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to :Harald Kirschner :digitarald from comment #1)

This sounds great. I assume it would only warn when the filter is on?

My concern is that showing DOM/CSS-related a11y warnings in the console seems backward given how few people open split console with Inspector.

Have we considered to use the gutter space to show warning symbols?

Curious, which part of the UI do you refer to as a gutter. Is it the area with breadcrumbs?

Comment 4

[Yura Zenevich [:yzen] (please use "needinfo")]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #2)

We should really check people would use that. The CSS warnings are not used that much because they're noisy (even if we're trying to make them more useful).

Yeah sorry, I should've mentioned that this would definitely ship with a pref, to be able to a/b test.

Also, at some point we reduced the number of filters in the console, and I'd like us to be very mindful what we add there.

Yeah, Martin mentioned that badges are similarly very sensitive area. If this is still the course forward , the study would definitely be needed.

Maybe we could only have a button in the inspector/accessibility panel that would say "run audit", and that would open the split console and log some (warning?) messages in a console.group ? (or in multiple groups, for each audit).

▼ Color contrast audit
|  <span#id1> ✜ fails with a score range of ...
|  <div.hello> ✜ fails with a score range of ...
▼ Text side audit
|  <p> ✜ fails with a score of ...

The ✜ let the user highlight the element in the page, and clicking on it select it in the inspector.

I think that would be more discoverable than a filter in the console (which people working on the markup might not look at).

This could be interesting, though performance implications of starting platform accessibility + running audits would need to be taken into account.

Comment 5

[:Harald Kirschner :digitarald]

The gutter would be the left side of the markup view, where line numbers are usually displayed.

Comment 6

[Patrick Brosset <:pbro>]

Hey Maliha, are you still interested in this or should we unassign you from this bug?

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Here's an interesting discussion about having "live" accessibility warnings: https://twitter.com/stefanjudis/status/1188874372884422658