Detailed Element Info

A powerful NVDA add-on that provides detailed accessibility information about HTML elements on web pages.

Overview

Detailed Element Info is a utility add-on for NVDA that allows you to inspect HTML elements and view their accessibility attributes, ARIA roles, and semantic information. This is particularly useful for web developers, accessibility auditors, and NVDA users who want to understand how screen readers perceive web content.

Features

Keyboard Shortcuts

Shortcut Action
NVDA+Shift+F1 Show focused element details

Note: You can change this shortcut from Preferences > Input Gestures in NVDA.

How to Use

  1. Navigate to any HTML element on a web page using Tab key or arrow keys
  2. Press NVDA+Shift+F1 to show focused element details
  3. A browseable message window will open showing:
  4. Element tag name and attribute count
  5. Accessible name and its source
  6. Computed ARIA role
  7. Native vs. explicit role source
  8. Semantic mismatches
  9. All raw IA2 attributes
  10. DOM path of the focused element
  11. Parent elements up the DOM tree

Information Displayed

Accessible Name

The name that screen readers announce for the element.

Name Source

Where the accessible name comes from: - aria-label: Explicit ARIA label - aria-labelledby: Reference to another element - contents: Text content of the element - alt: Alt text (for images) - value: Element value attribute - title: Title attribute - placeholder: Placeholder text

Computed Role

The ARIA role determined from: 1. Explicit XML-roles (role attribute) 2. HTML native semantics 3. NVDA control type mapping 4. Unknown (fallback)

Semantic Source

Whether the role comes from: - native HTML: HTML's implicit semantics (e.g.,