WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Inspecting Website code on the Mac using Voiceover andkeyboard only

for

From: Kelly Ford
Date: Feb 1, 2025 2:15PM

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