WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inspecting Website code on the Mac using Voiceover and keyboard only

for

From: Jonathan Cohn
Date: Feb 1, 2025 2:57PM

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 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 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.
>>