aViewer 2013

Posted on Monday, 11 March 2013 by Steve Faulkner

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.

screenshot of aViewer showing the accessibility tree, accessibility API properties and HTML code panels.

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:
    settings dialog showing property customization 'use of properties' listbox, the font change button and the IA2 registration buttons.
  • 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.
    • screenshot.
      Submit button with associated balloon tip displaying MSAA information for the element.
  • Customize what to display via the view menu (alt+v):
    'view' menu with display, collapse and treeview contents sub menus.

aViewer screenshot

  • 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 screenshot
Screenshot showing a focused element , the listing in aViewer of its labelledby relation and its associated targets. One of the targets listed is selected and the referenced element is highlighted on 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

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

Save the file, unzip and select the aViewer.exe.

aViewer 2013 (zip file 1 mb)

Special thanks

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


About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. Great advances in aViewer, thank you, but any chance you might consider a Mac / Linux version? hey, maybe even an Air or Fluid / web-app version?

  2. Hi Joe, there are tools available for Mac and Linux. We don’t have the resources to develop tools for other OS’s at this time.

  3. Do I use Aviewer with wrong method?
    I have registered IAccessible2Proxy.dll.
    It still can’t give any useful information in Chrome.
    Ex:
    If I move my mouse Cursor to “Leave a Reply”, there are all “none” in MSAA; role is document with “none” name in IAccessible2.
    Any wrong operation?

  4. Hi celia, I don’t think you can, but you can copy the interface output text at any given time with the copy button.

  5. I was using your Web Accessiblity Toolbar in IE8. I uninstalled the toolbar and upgraded to IE9. I then reinstalled the toolbar but cannot enbale the toolbar for use, Manage Add On function does not permit me to Enable the toolbar for use (listed as New).

Comments for this post are closed.

I am thrilled to hear that TPG will be part of the state blanket contract allowing our agencies to use your unique expertise and broad knowledge of accessibility. This is a bright day for citizens of the Commonwealth of Massachusetts.

Sarah Bourne, Director of Assistive Technology – IT Division, Commonwealth of Massachusetts