E-mail List Archives

Search E-mail List Archives for

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

From: reinhard.stebner---
Date: Sat, Feb 01 2025 1:20PM
Subject: Inspecting Website code on the Mac using Voiceover and keyboard only
No previous message | Next message →

Thank you Dean for your advice.

When you are using Voiceover and you locate a page element you want to gain more information about, how to you inspect this page element in the DOM tree on the developer toolbar (note, I am using both Safari and Chrome)? I know how to do this on windows, I use the applications key and then inspect element while I have keyboard focus on the page element. In the past I was led to believe that it's difficult to use Voiceover and the developer tools. So, I want to know how totally blind accessibility testers are inspecting page elements on the Mac that the tester wants to gain more understanding on. To share How I do it on windows, I am using JAWS for Windows, and I use two methods. First is when JAWS is currently focused on the page element I want to understand, I press Shift+JAWSKey+F1 which gives me a virtual view allowing me to gain a basic understanding of what JAWS is interpreting from the page. The second command is I will use the options key (shift + f10) to bring up the context menu and then activate the menu item inspect element wish opens the dev tool with the DOM tree scrolled to the keyboard focused page element. I will be starting a new job on Tuesday and the company I will be working with is a team that uses the Mac. I would appreciate your advice on how to inspect Website code on the Mac with Voiceover and keyboard only. I appreciate your assistance in this matter. Up until now, I have been using the Mac as a usability tool and not inspecting code because I did not know how to get to the DOM element that is focused.

From: Kelly Ford
Date: Sat, Feb 01 2025 2:15PM
Subject: Re: Inspecting Website code on the Mac using Voiceover andkeyboard only
← Previous message | Next message →

Hi,

You can use the same basic technique you have been using on Windows on the Mac. Locate the item with interest with VoiceOver, press VO+Shift+m for the context menu, arrow up to Inspect and press enter. This will open the dev tools to the tree of elements and focus you on the element of interest.

Note, the first time you do this you *may* need to change options about showing what’s new with dev tools and such.

Also, I tend to use Chrome more than Safari here so am less familiar with how Safari developer tools work but in trying just before my reply here, what I am saying appears to be accurate for both Chrome and Safari on the Mac.

Kelly


> On Feb 1, 2025, at 12:20 PM, reinhard.stebner--- via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>
> Thank you Dean for your advice.
>
> When you are using Voiceover and you locate a page element you want to gain more information about, how to you inspect this page element in the DOM tree on the developer toolbar (note, I am using both Safari and Chrome)? I know how to do this on windows, I use the applications key and then inspect element while I have keyboard focus on the page element. In the past I was led to believe that it's difficult to use Voiceover and the developer tools. So, I want to know how totally blind accessibility testers are inspecting page elements on the Mac that the tester wants to gain more understanding on. To share How I do it on windows, I am using JAWS for Windows, and I use two methods. First is when JAWS is currently focused on the page element I want to understand, I press Shift+JAWSKey+F1 which gives me a virtual view allowing me to gain a basic understanding of what JAWS is interpreting from the page. The second command is I will use the options key (shift + f10) to bring up the context menu and then activate the menu item inspect element wish opens the dev tool with the DOM tree scrolled to the keyboard focused page element. I will be starting a new job on Tuesday and the company I will be working with is a team that uses the Mac. I would appreciate your advice on how to inspect Website code on the Mac with Voiceover and keyboard only. I appreciate your assistance in this matter. Up until now, I have been using the Mac as a usability tool and not inspecting code because I did not know how to get to the DOM element that is focused.
>

From: Jonathan Cohn
Date: Sat, Feb 01 2025 2:57PM
Subject: Re: Inspecting Website code on the Mac using Voiceover and keyboard only
← Previous message | No next message

I do find the focus control better in Chrome and Firefox development tools than they are in Safari.
It has been a while since I used the dev tools for Firefox on a Macintosh, but, on Windows the screen reader tends to be better at changing and examining attributes in Firefox than it does in Chrome/Edge.
Jonathan


> On Feb 1, 2025, at 4:15 PM, Kelly Ford via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi,
>
> You can use the same basic technique you have been using on Windows on the Mac. Locate the item with interest with VoiceOver, press VO+Shift+m for the context menu, arrow up to Inspect and press enter. This will open the dev tools to the tree of elements and focus you on the element of interest.
>
> Note, the first time you do this you *may* need to change options about showing what’s new with dev tools and such.
>
> Also, I tend to use Chrome more than Safari here so am less familiar with how Safari developer tools work but in trying just before my reply here, what I am saying appears to be accurate for both Chrome and Safari on the Mac.
>
> Kelly
> on
>
>> On Feb 1, 2025, at 12:20 PM, reinhard.stebner--- via WebAIM-Forum < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Thank you Dean for your advice.
>>
>> When you are using Voiceover and you locate a page element you want to gain more information about, how to you inspect this page element in the DOM tree on the developer toolbar (note, I am using both Safari and Chrome)? I know how to do this on windows, I use the applications key and then inspect element while I have keyboard focus on the page element. In the past I was led to believe that it's difficult to use Voiceover and the developer tools. So, I want to know how totally blind accessibility testers are inspecting page elements on the Mac that the tester wants to gain more understanding on. To share How I do it on windows, I am using JAWS for Windows, and I use two methods. First is when JAWS is currently focused on the page element I want to understand, I press Shift+JAWSKey+F1 which gives me a virtual view allowing me to gain a basic understanding of what JAWS is interpreting from the page. The second command is I will use the options key (shift + f10) to bring up the context menu and then activate the menu item inspect element wish opens the dev tool with the DOM tree scrolled to the keyboard focused page element. I will be starting a new job on Tuesday and the company I will be working with is a team that uses the Mac. I would appreciate your advice on how to inspect Website code on the Mac with Voiceover and keyboard only. I appreciate your assistance in this matter. Up until now, I have been using the Mac as a usability tool and not inspecting code because I did not know how to get to the DOM element that is focused.
>>