Accessibility inspector is now available in Firefox Developer Tools

Starting version 61, Mozilla Firefox comes with Accessibility Inspector within developer tools. However, Accessibility Inspector is not enabled by default reason being shown that as of now while accessibility inspector is turned on, users are experiencing some performance issues using other developer tools.

It would be a great friend to developers to see what information gets exposed to assistive technologies and what is missing. So that developers would know instantly what they would need to fix. Here is what is said in the announcement on .

The accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what’s missing or otherwise needs attention.

As mentioned earlier, accessibility inspector is not active by default and here is how to activate the same.

• Open Tools menu -> Web Developer -> Inspector
• Choose three dots button on the right side top or using F1 key; this will minimise DevTools and open help menu
• Choose Settings
• Under Default Developer Tools section, Check “Accessibility” checkbox.
• Now user will see “Accessibility” in the inspector tabs with a message saying “Accessibility inspector is not active by default and causes some performance issues. Turn off Accessibility inspector before using other DevTools” with a button “Turn ON Accessibility inspector
• Activate the button

That’s it; now Accessibility inspector is now available to use.

Features of Accessibility Inspector

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

• Role — the role this item has on the page (e.g., pushbutton, or footer). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA role attribute.
• Name — the name this item has on the page. Where this comes from depends on the element; for example, the name of most text elements is simply their textContent, whereas form elements’ names are the contents of their associated <label>.

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

• name — the item’s name, as described above.
• role — the item’s role, as described above.
• actions — a list of the actions that can be performed on the item, for example a pushbutton would have “Press” listed, while a link would have “Jump” listed.
• value — the value of the item. This can mean different things depending on the type of item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link’s value would be the URL in the corresponding <a> element’s href.
• DOMNode — the type of DOM node that the item in the accessibility tree represents. You can click on the “target” icon that comes after it to select the node in the Page Inspector. Hovering over the “target” icon highlights the DOM node in the page content.
  
• description — any further description provided on the element, usually by the content of a title attribute.
• help — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 (bug 1467643).
• keyboardShortcut — any keyboard shortcut that is available to activate the element, as specified in an accessKey attribute. Note that this works correctly as of Firefox 62 (bug 1467381).
• childCount — the number of child items the current item has in the accessibility tree hierarchy.
• indexInParent — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.
• states — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see Gecko states.
• attributes — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see Gecko object attributes.