Skip to content
Patrick H. Lauke edited this page Jun 24, 2017 · 2 revisions

Accessibility Viewer (aViewer)

aViewer interface overview

Features

  • Exposes MSAA, iAccessible2, ARIA, HTML DOM and UI Automation properties. Note: UIA properties will only be displayed for browsers that support it i.e. Internet Explorer, same goes for IA2 which is supported in FireFox and Chrome, but not IE.

  • Displays a navigable accessibility tree. The tree scope can be customized via the ‘view’ menu.

  • Accessibility properties, accessibility tree and HTML code panes.

  • Customize which MSAA, IAccessible2 and UIA properties to display via the settings dialog.

    aViewer's settings, showing the various MSAA/IAccessible2/UIA properties that can be selectively displayed

  • Show balloon tip with MSAA, IA2 and HTML code information on element hover, focus or as you navigate the accessibility tree. Information to display in the balloon tip can be customized by using the View ALT + V menu – ‘balloon tips’ sub menu.

    A focused submit button in a web page, with a ballon tooltip showing its relevant MSAA properties

  • Customize what to display via the view menu ALT + V:

    aViewer's 'View > Select Display' menu

  • IAccessible2 relations are listed in the object information tree view. What this means is that if an element has an associated label which is associated using the IA2 labelledby relation type (for example, this relation is used extensively in FireFox) or it has any of the ARIA relationship attributes (also supported in FireFox) you can select the relation target in the tree view and the element it is referenced by will be highlighted in the page.

    aViewer showing an outline to denote relationship between two elements associated via aria-labelledby and aria-describedby

The aViewer toolbar

  1. Watch Focus F4 – Information will be displayed for the element that has focus
  2. Watch Cursor F5 – Information will be displayed for the element that is under the cursor
  3. Show Highlight Rectangle F6 – places a visible highlight rectangle around the element that is currently being inspected
  4. Show tooltip F3 – displays tooltip in context with MSSA information (note: accessible name for this button is not currently user friendly)
  5. Copy Text to Clipboard F7 – copies all the information currently displayed to the clipboard
  6. Focus Rectangle Only F8 – disables all features except the keyboard focus rectangle
  7. Navigate to Parent Object F9
  8. Navigate to First Child Object F10
  9. Navigate to Previous Sibling Object F11
  10. Navigate to Next Sibling Object F12
  11. Show Online Help F1 – opens the Aviewer help in a browser window.
  12. Desktop Mode – Disables HTML and ARIA inspection features.
  13. Settings
  14. Modify displayed properties via the check boxes
  15. Change font and size
  16. In order to inspect IAccessible2 information the DLL needs to be registered on initial use. - Register - Unregister

Keyboard Shortcuts

For moving focus to:

  • Treeview: SHIFT + F1
  • Listview: SHIFT + F2
  • Editbox: SHIFT + F3

Note: the settings and desktop mode don’t currently have keyboard shortcuts, but can be activated using the keyboard by tabbing to the toolbar then using the arrow keys, then spacebar/enter to enable/disable.

Note: this version does play better with screen readers and we are working on improvements.

Note: the HTML view works in FireFox and IE, but not Chrome as Chrome not expose the required information.

Issues

There are still issues for screen reader users, that we are working on, but we hope this is a step in the right direction.

  • When navigating the page content (not via the accessibility tree), the balloon tips can only be displayed using keyboard navigation on focusable elements (any element will display a balloon tips using the mouse). I have created a simple bookmarklet that adds tabindex=0 to every element on a page: Add tabindex=0 This can be used by keyboard only users to allow in page navigation of all elements. We will look also at adding this as a feature of aViewer.
  • Appears to work better on windows Vista than windows 7, especially with NVDA.

You can try aViewer out on a test page which includes all the HTML/HTML5 form controls. Note: the level of implementation support for new HTML5 controls varies by browser.

Note: the HTML code view works in FireFox and IE, but not Chrome as Chrome does not expose the required information. In Firefox the code view displays the inner HTML for the currently focused element. In IE it displays the outer HTML for the currently focused element.