Inspector

Every modern browser nowadays has it. A way to view al kind information about the webpage in the browser. In Chrome it's called DevTools, in Firefox Page inspector and the new Edge calls it Developer Tools. If you are wondering how to get there, well, read further.

Open inspector - short cut key

Surprisingly in all browsers you can inspect by Ctrl+Shift+I or if you happen to work on macOS Cmd+Opt+I. There are other ways to open the inspector, like via the context menu.

Firefox

The accessibility feature in Firefox is something you have to switch on. This feature is off for performance reasons.

Accessibility inspector

For finding the accessible name of an element:

  • Open Page inspector.
  • Click Accessibility in the main menu bar
  • Turn this feature on if it's disabled.
  • You can view Role and Name directly

Be aware that Firefox uses graphic as role for images, where Chrome uses img

More info:

Chrome

For finding the accessible name of an element:

  • Open DevTools
  • In Elements: submenu Accessibility
    If you don't see this menu item then first click on ».
  • You can view Role and Name under Computed Properties

Edge

(releases as of version 79 based on Chromium) For finding the accessible name of an element:

  • Open Developers Tools
  • In Elements: submenu Accessibility
    If you don't see this menu item then first click on ».
  • You can view Role and Name under Computed Properties

More about Developer Tools: