736418 - Hide the "Inspect" button from screen readers

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect)

Comment 1

[Paul Rouget [:paul]]

Attachment: patch v1

Comment 2

[Paul Rouget [:paul]]

Attachment: patch v1.1

Comment 3

[Dão Gottwald [:dao]]

Shouldn't the tooltip be sufficient?

Comment 4

[Paul Rouget [:paul]]

Marco asked for the label to be present.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 606515 [details] [diff] [review]
patch v1.1

I don't think "Inspect" is a good label for what this button is doing.

Should we expose this button to screen readers at all?

Comment 6

[Marco Zehe (:MarcoZ)]

Screen readers for the blind are not the only customers of this stuff. People who use speech recognition software usually give commands like "click the 'inspect' button". That software relies on the same APIs, and in order to function properly, they also need a label on that accessible oject. So yes, we do need to expose it to accessibility APIs, and we do need the label.

Comment 7

[Paul Rouget [:paul]]

(In reply to Dão Gottwald [:dao] from comment #5)
> Comment on attachment 606515 [details] [diff] [review]
> patch v1.1
> 
> I don't think "Inspect" is a good label for what this button is doing.

What do you recommend?

Comment 8

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 606515 [details] [diff] [review]
patch v1.1

We've used this before when it was just a text button. It matches the context menu's "Inspect Element" entry. It's a fairly standard label in similar tools. Firebug, Chrome Web Inspector, etc all use "Inspect". I forget what DOM Inspector uses for it's "Inspect" button, but it has one as well.

If you don't have a better suggestion, I recommend letting this go in.

Comment 9

[Dão Gottwald [:dao]]

(In reply to Rob Campbell [:rc] (robcee) from comment #8)
> Comment on attachment 606515 [details] [diff] [review]
> patch v1.1
> 
> We've used this before when it was just a text button. It matches the
> context menu's "Inspect Element" entry.

And I hope this makes you see why the label is nonsensical. "Inspect Element" does not check the "Inspect" button.

(In reply to Marco Zehe (:MarcoZ) from comment #6)
> Screen readers for the blind are not the only customers of this stuff.
> People who use speech recognition software usually give commands like "click
> the 'inspect' button".

Why would people using speech recognition software want to click this button? The mode this enables is entirely mouse-centric.

Comment 10

[Paul Rouget [:paul]]

(In reply to Dão Gottwald [:dao] from comment #9)
> (In reply to Rob Campbell [:rc] (robcee) from comment #8)
> > Comment on attachment 606515 [details] [diff] [review]
> > patch v1.1
> > 
> > We've used this before when it was just a text button. It matches the
> > context menu's "Inspect Element" entry.
> 
> And I hope this makes you see why the label is nonsensical. "Inspect
> Element" does not check the "Inspect" button.
> 
> (In reply to Marco Zehe (:MarcoZ) from comment #6)
> > Screen readers for the blind are not the only customers of this stuff.
> > People who use speech recognition software usually give commands like "click
> > the 'inspect' button".
> 
> Why would people using speech recognition software want to click this
> button? The mode this enables is entirely mouse-centric.

It's true, the inspect button is here only for mouse users.
(Bug 735214 makes the inspection possible only with the keyboard)

I mark this bug as WONTFIX.

Comment 11

[Dão Gottwald [:dao]]

So we should explicitly hide this from screen readers, right?

Comment 12

[alexander :surkov (:asurkov)]

(In reply to Dão Gottwald [:dao] from comment #11)
> So we should explicitly hide this from screen readers, right?

or provide a sensible label, otherwise it's confusing

Comment 13

[alexander :surkov (:asurkov)]

actually I'm not fun of hide something from screen readers since I don't like to maintain two different UIs. I'd go with providing a reasonable label instead.

Comment 14

[Dão Gottwald [:dao]]

The button isn't going to make sense for screen reader users. See the previous discussion in this bug.

Comment 15

[alexander :surkov (:asurkov)]

(In reply to Dão Gottwald [:dao] from comment #14)
> The button isn't going to make sense for screen reader users. See the
> previous discussion in this bug.

ok, but probably it makes sense for screen magnifiers users which are accessibility API based. No accessible, no info. I really wouldn't end up with creation of two UIs.

Comment 16

[alexander :surkov (:asurkov)]

Paul asked me on irc to comment.

We shouldn't hide the inspect button from assistive technologies because that means we hide it from screen magnifiers users what use the mouse. But if we don't hide it then it should have an accessible name, otherwise it's confusing for screen reader users.

Comment 17

[Dão Gottwald [:dao]]

(In reply to alexander :surkov from comment #16)
> We shouldn't hide the inspect button from assistive technologies because
> that means we hide it from screen magnifiers users what use the mouse.

I don't understand this. This bug isn't about visually hiding the button, so you could still activate it with a screen magnifier and a mouse.

Comment 18

[Paul Rouget [:paul]]

Sorry, I am not sure to understand everything here.

What does "Hiding the button from assistive technologies" mean?
Making the button not tabbable and focusable, am I right?

Why having this button tabbable and focusable is a problem for assistive technologies?
Is it because the resulting action of using the button is a mouse-only action?
But does "assistive technology" mean no mouse?

Comment 19

[alexander :surkov (:asurkov)]

(In reply to Dão Gottwald [:dao] from comment #17)
> (In reply to alexander :surkov from comment #16)
> > We shouldn't hide the inspect button from assistive technologies because
> > that means we hide it from screen magnifiers users what use the mouse.
> 
> I don't understand this. This bug isn't about visually hiding the button, so
> you could still activate it with a screen magnifier and a mouse.

(In reply to Paul Rouget [:paul] from comment #18)
> Sorry, I am not sure to understand everything here.
> 
> What does "Hiding the button from assistive technologies" mean?
> Making the button not tabbable and focusable, am I right?

bug summary is "Hide the "Inspect" button from screen readers" (there are techniques that allow to hide visible content from assistive technologies). I meant we shouldn't do what bug summary says. Instead, inspect button accessible should get a proper accessible name (I thought that was an original problem).

Comment 20

[Paul Rouget [:paul]]

Ok. So we don't hide the button from screen readers. What is an "accessible name"? Is it a label? An aria-label? Is the tooltiptext enough?

Comment 21

[alexander :surkov (:asurkov)]

(In reply to Paul Rouget [:paul] from comment #20)
> Ok. So we don't hide the button from screen readers. What is an "accessible
> name"? Is it a label? An aria-label? Is the tooltiptext enough?

label should work, I can be certain if you show me markup. Otherwise aria-label can be used. Tooltip is always great to have. In terms of accessibility it should serve as accessible description (note: it can be used as accessible name when nothing left).

Comment 22

[David Bolter [:davidb] (NeedInfo me for attention)]

(In reply to Dão Gottwald [:dao] from comment #11)
> So we should explicitly hide this from screen readers, right?

Nope.

Comment 23

[Dão Gottwald [:dao]]

(In reply to Paul Rouget [:paul] from comment #18)
> Sorry, I am not sure to understand everything here.
> 
> What does "Hiding the button from assistive technologies" mean?
> Making the button not tabbable and focusable, am I right?

I think screen readers can access toolbar buttons that aren't normally focusable, so it would need to be hidden explicitly. I may remember this wrongly, though.

> Why having this button tabbable and focusable is a problem for assistive
> technologies?

It's not a problem for AT. It's just that for anyone wanting to navigate without a mouse, this button isn't useful; it would be an extra step to get to those that actually matter.

> Is it because the resulting action of using the button is a mouse-only
> action?

That's why it's only useful to mouse users, yes. See also comment 6 through comment 9.

> But does "assistive technology" mean no mouse?

Not necessarily, but as soon as you can handle the mouse well enough to use the select-element-by-mouse mode, you won't depend on this button being exposed to AT, which means that our software is accessible and we can move on.

(In reply to David Bolter [:davidb] from comment #22)
> (In reply to Dão Gottwald [:dao] from comment #11)
> > So we should explicitly hide this from screen readers, right?
> 
> Nope.

Immensely helpful comment, thanks!

Comment 24

[David Bolter [:davidb] (NeedInfo me for attention)]

(In reply to Dão Gottwald [:dao] from comment #23)
> (In reply to David Bolter [:davidb] from comment #22)
> > (In reply to Dão Gottwald [:dao] from comment #11)
> > > So we should explicitly hide this from screen readers, right?
> > 
> > Nope.
> 
> Immensely helpful comment, thanks!

I had more written there but saw previous comments had me covered. I'll try to catch you on IRC.

Comment 25

[David Bolter [:davidb] (NeedInfo me for attention)]

Marco, what currently happens when using NVDA and Inspect? I'll note that visually, arrowing around via the keyboard is sort of neato. If we can make the rest of inspect keyboard accessible that would be great! (Is it?)

Dao can you clarify what you said in comment 23 about "it would be an extra step to get to those that actually matter"?

Comment 26

[alexander :surkov (:asurkov)]

(In reply to Dão Gottwald [:dao] from comment #23)
> (In reply to Paul Rouget [:paul] from comment #18)
> > Sorry, I am not sure to understand everything here.
> > 
> > What does "Hiding the button from assistive technologies" mean?
> > Making the button not tabbable and focusable, am I right?
> 
> I think screen readers can access toolbar buttons that aren't normally
> focusable, so it would need to be hidden explicitly. I may remember this
> wrongly, though.

hiding is not good option for screen magnifiers users (comment #16).

Comment 27

[Paul Rouget [:paul]]

(In reply to David Bolter [:davidb] from comment #25)
> Marco, what currently happens when using NVDA and Inspect? I'll note that
> visually, arrowing around via the keyboard is sort of neato. If we can make
> the rest of inspect keyboard accessible that would be great! (Is it?)
> 
> Dao can you clarify what you said in comment 23 about "it would be an extra
> step to get to those that actually matter"?

I think what Dao meant is that one extra focusable/tabbable button means one extra key (tab) to press to reach the other buttons.

Comment 28

[Marco Zehe (:MarcoZ)]

Right now, the keyboard accessibility of the Inspect feature is a mystery to me. I can select an element with NVDA's virtual buffer and choose "inspect" from its context menu. However, the virtual cursor then remains active, and I have not found a way to actually get to the Inspect panel/tree or whatever is being used to show the element's properties. I also have the feeling that, if I use NVDA's object navigator, the inspect somehow changes, as if I was moving the mouse (which I am not by default).

What I would have expected to happen is that, as soon as I selected an element and chose "inspect", I'd be thrown into a control that allowed me to do just that: Inspect the element. AFAICS, we have more to fix than just the accessibility label for that button here (or in other bugs).

Comment 29

[Marco Zehe (:MarcoZ)]

I also tried turning off NVDA's virtual buffer and arrowing around as you, David, suggested. And I don't get *anything*. No focus events, nor can I control what element is currently selected or being inspected. Total silence.

Comment 30

[Dão Gottwald [:dao]]

(In reply to Marco Zehe (:MarcoZ) from comment #28)
> What I would have expected to happen is that, as soon as I selected an
> element and chose "inspect", I'd be thrown into a control that allowed me to
> do just that: Inspect the element.

The button this bug is about won't do that. It merely toggles a mode that lets you use the mouse to select an element on the page. "Inspect" is a bad label for that, as mentioned earlier in this bug.

Comment 31

[David Bolter [:davidb] (NeedInfo me for attention)]

(In reply to Dão Gottwald [:dao] from comment #30)
> (In reply to Marco Zehe (:MarcoZ) from comment #28)
> > What I would have expected to happen is that, as soon as I selected an
> > element and chose "inspect", I'd be thrown into a control that allowed me to
> > do just that: Inspect the element.
> 
> The button this bug is about won't do that. It merely toggles a mode that
> lets you use the mouse to select an element on the page. "Inspect" is a bad
> label for that, as mentioned earlier in this bug.

Yeah if I understand correctly, this button doesn't toggle Inspect mode, it merely toggles mouseover-selection mode right?

Note on mac, on nightly I see a graphical button showing a pointer in a box which is visually great IMO. The tooltip is "Select element with mouse (return)".

If I'm on the right track here, I agree with Dao that "Inspect" is not really descriptive of this particular toggle.

Comment 32

[alexander :surkov (:asurkov)]

(In reply to David Bolter [:davidb] from comment #31)

> If I'm on the right track here, I agree with Dao that "Inspect" is not
> really descriptive of this particular toggle.

accessible name shouldn't be super descriptive, it should say something meaningful and be short. description should be descriptive. So maybe:
name: Inspect
description: Inspect the page layout

Comment 33

[David Bolter [:davidb] (NeedInfo me for attention)]

(In reply to alexander :surkov from comment #32)
> (In reply to David Bolter [:davidb] from comment #31)
> 
> > If I'm on the right track here, I agree with Dao that "Inspect" is not
> > really descriptive of this particular toggle.
> 
> accessible name shouldn't be super descriptive, it should say something
> meaningful and be short. description should be descriptive. So maybe:
> name: Inspect
> description: Inspect the page layout

I don't understand how that name or description describes that this button is specifically about mouseover mode.

Comment 34

[David Bolter [:davidb] (NeedInfo me for attention)]

Note you can use the arrow keys when mouseover mode is off which to me is still allowing us to "Inspect".

Comment 35

[Marco Zehe (:MarcoZ)]

The current label for this button is "Select element with mouse (return)". This is good enough for me. Closing this bug as wontfix.