E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Firefox Accessible Way To Inspect Individual Elements?

Number of posts in this thread: 9 (In chronological order)

From: Jim Homme
Date: Wed, Dec 13 2017 8:59AM
Subject: Firefox Accessible Way To Inspect Individual Elements?
No previous message | Next message →

Hi,
The subject says it. I want to sometimes look at the code for individual elements. It takes a long time to view source and see an element I'm interested in. Is there an accessible way to do this?

Thanks.

Jim

From: Jonathan Avila
Date: Wed, Dec 13 2017 9:04AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

> The subject says it. I want to sometimes look at the code for individual elements. It takes a long time to view source and see an element I'm interested in. Is there an accessible way to do this?

In JAWS you can press JAWSkey+shift+f1 to see the tag and attributes under the virtual cursor.

In browsers with dev tools -- for elements in forms mode you may be able to press the applications key then inspect element and the current element will show up in the developer tools. You can then move focus to the developer toolbar and your focus should be on that element in the tree.

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
(703) 637-8957
= EMAIL ADDRESS REMOVED =
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Frederick, Kathryn A.
Date: Wed, Dec 13 2017 9:07AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

What screen reader are you using?

Katie

From: Jim Allan
Date: Wed, Dec 13 2017 9:07AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

most browser have F12 to open dev tools
Chrome has good keyboard navigation in the dev tools
https://developers.google.com/web/tools/chrome-devtools/shortcuts

On Wed, Dec 13, 2017 at 10:04 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > The subject says it. I want to sometimes look at the code for individual
> elements. It takes a long time to view source and see an element I'm
> interested in. Is there an accessible way to do this?
>
> In JAWS you can press JAWSkey+shift+f1 to see the tag and attributes under
> the virtual cursor.
>
> In browsers with dev tools -- for elements in forms mode you may be able
> to press the applications key then inspect element and the current element
> will show up in the developer tools. You can then move focus to the
> developer toolbar and your focus should be on that element in the tree.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> (703) 637-8957
> = EMAIL ADDRESS REMOVED =
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
>

From: Birkir R. Gunnarsson
Date: Wed, Dec 13 2017 9:11AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

Check out www.bats.fyi for my article on using Firebug.
Two caveats:
1. Firebug has stopped working with the latest versions of Firefox, at
least 57, maybe it is going to be retired altogether.
2. I forget to mention in the article that you have to check the
"accessible mode" checkbox when you first configure Firebug. I'll have
to add it at some point.

You can actually simulate a right click on any element on the page, at
least with Jaws, select "inspect with Firebug" from the right click
menu, and then you lend on that element in the DOM tree in Firebug
(sometimes you have to press tab a few times to get there).

The other good news, Firefox's own "inspect element" is pretty
accessible by now and also works from simulated right click (JawsKey
and 9).

A note on the Jaws DisplayAdvancedElementInfo script, I find it
useful, though it only shows you the element and its ancestor elements
up to the root.
On laptops you have to configure the keyboard shortcut for it by going
opening the Jaws keyboard manager (JawsKey f2), making sure all
scripts are displayed (I think you change the filter under options),
then you locate the "DisplayAdvancedElementInfo" script and press
alt-a to assign a keyboard shortcut to it.

On 12/13/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> The subject says it. I want to sometimes look at the code for individual
>> elements. It takes a long time to view source and see an element I'm
>> interested in. Is there an accessible way to do this?
>
> In JAWS you can press JAWSkey+shift+f1 to see the tag and attributes under
> the virtual cursor.
>
> In browsers with dev tools -- for elements in forms mode you may be able to
> press the applications key then inspect element and the current element will
> show up in the developer tools. You can then move focus to the developer
> toolbar and your focus should be on that element in the tree.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> (703) 637-8957
> = EMAIL ADDRESS REMOVED =
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
>

From: Mallory
Date: Mon, Dec 18 2017 4:51AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

I haven't found an accessible way to inspect non-focusable elements with
keyboard alone (with a screen reader you can move your virtual cursor
and do a right-click, but for plain-keyboard that's not possible). This
means if you're a non-SR-using keyboarder, you are stuck with finding
the nearest focusable to do the Inspect Element then you need to work
your way to the element you actually care about.

I'm not sure really what browsers could do for that, but it's one reason
I lug my mouse around with my laptop (clicks on the trackpad are
broken).

cheers,
Mallory

On Wed, Dec 13, 2017, at 05:11 PM, Birkir R. Gunnarsson wrote:
> Check out www.bats.fyi for my article on using Firebug.
> Two caveats:
> 1. Firebug has stopped working with the latest versions of Firefox, at
> least 57, maybe it is going to be retired altogether.
> 2. I forget to mention in the article that you have to check the
> "accessible mode" checkbox when you first configure Firebug. I'll have
> to add it at some point.
>
> You can actually simulate a right click on any element on the page, at
> least with Jaws, select "inspect with Firebug" from the right click
> menu, and then you lend on that element in the DOM tree in Firebug
> (sometimes you have to press tab a few times to get there).
>
> The other good news, Firefox's own "inspect element" is pretty
> accessible by now and also works from simulated right click (JawsKey
> and 9).
>
> A note on the Jaws DisplayAdvancedElementInfo script, I find it
> useful, though it only shows you the element and its ancestor elements
> up to the root.
> On laptops you have to configure the keyboard shortcut for it by going
> opening the Jaws keyboard manager (JawsKey f2), making sure all
> scripts are displayed (I think you change the filter under options),
> then you locate the "DisplayAdvancedElementInfo" script and press
> alt-a to assign a keyboard shortcut to it.
>
>
>
> On 12/13/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> >> The subject says it. I want to sometimes look at the code for individual
> >> elements. It takes a long time to view source and see an element I'm
> >> interested in. Is there an accessible way to do this?
> >
> > In JAWS you can press JAWSkey+shift+f1 to see the tag and attributes under
> > the virtual cursor.
> >
> > In browsers with dev tools -- for elements in forms mode you may be able to
> > press the applications key then inspect element and the current element will
> > show up in the developer tools. You can then move focus to the developer
> > toolbar and your focus should be on that element in the tree.
> >
> > Jonathan
> >
> > Jonathan Avila
> > Chief Accessibility Officer
> > Level Access, inc. (formerly SSB BART Group, inc.)
> > (703) 637-8957
> > = EMAIL ADDRESS REMOVED =
> > Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> > Looking to boost your accessibility knowledge? Check out our free webinars!
> >
> > The information contained in this transmission may be attorney privileged
> > and/or confidential information intended for the use of the individual or
> > entity named above. If the reader of this message is not the intended
> > recipient, you are hereby notified that any use, dissemination, distribution
> > or copying of this communication is strictly prohibited.
> >
> >

From: Joshue O Connor - InterAccess
Date: Mon, Dec 18 2017 7:21AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

On 12/13/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> > >
>> > > In JAWS you can press JAWSkey+shift+f1 to see the tag and attributes under
>> > > the virtual cursor.

Did not know that Jon! Very helpful - this is a useful (and important
thread/discussion).

Thanks

--
Joshue O Connor
Director | InterAccess.ie

From: Pratik Patel
Date: Mon, Dec 18 2017 8:13AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | Next message →

You can get similar developer info about a focused item in NVDA by pressing
NVDA+f1.

Regards,

Pratik

On Mon, Dec 18, 2017 at 9:21 AM Joshue O Connor - InterAccess <
= EMAIL ADDRESS REMOVED = > wrote:

>
> On 12/13/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> >> > >
> >> > > In JAWS you can press JAWSkey+shift+f1 to see the tag and
> attributes under
> >> > > the virtual cursor.
>
> Did not know that Jon! Very helpful - this is a useful (and important
> thread/discussion).
>
> Thanks
>
> --
> Joshue O Connor
> Director | InterAccess.ie
> > > > >

From: Mallory
Date: Tue, Dec 19 2017 10:42AM
Subject: Re: Firefox Accessible Way To Inspect Individual Elements?
← Previous message | No next message

Agreed these shortcuts are new to me!

> On Mon, Dec 18, 2017 at 9:21 AM Joshue O Connor - InterAccess <
> = EMAIL ADDRESS REMOVED = > wrote:

> > Did not know that Jon! Very helpful - this is a useful (and important
> > thread/discussion).