WebAIM - Web Accessibility In Mind

E-mail List Archives

Inspecting Website code on the Mac using Voiceover and keyboard only

for

From: reinhard.stebner---
Date: Feb 1, 2025 1:20PM

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.