aViewer intro

Here at the paciello group we are very excited by the improvements being made to our aViewer accessibility API information inspection tool. We want to share the updated aViewer with you and in the process elicit your feedback on the new features and any bugs you may find.

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:
  
• 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.
  • 
    Submit button with associated balloon tip displaying MSAA information for the element.
• Customize what to display via the view menu (alt+v):
  

• 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:

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 –
    1. Modify displayed properties via the check boxes
    2. Change font and size
    3. In order to inspect IAccessible2 information the DLL needs to be registered on initial use.
       1. Register
       2. 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 has 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.

Download

aViewer release page on GitHub

Special thanks

To Jun for all his work on aViewer development and to Hans and Gez for feedback.