======================= Accessibility Inspector ======================= 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. This article takes you through the main features of the Accessibility Inspector and how to use it. A (very) brief guide to accessibility ************************************* Accessibility is the practice of making your websites usable by as many people as possible. This means trying your best to not lock anyone out of accessing information because of any disability they may have, or any other personal circumstances such as the device they are using, the speed of their network connection, or their geographic location or locale. You can find more extensive information in the `Accessibility `_ section of MDN Web Docs. Here we are mainly talking about exposing information to people with visual disabilities — this is done via the `accessibility APIs `_ available inside web browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?). Semantic DOM elements have roles assigned to them by default that hint at what their purpose is. Sometimes, however, you need to use some non-semantic markup (e.g., `div `_ s) to build a complex custom control, and the control won't have a default role that reflects its purpose. In such a situation, you can use `WAI-ARIA `_ role attributes to provide your own roles. Roles and other information exposed by browser accessibility APIs are presented in a hierarchical structure called the accessibility tree. This is a bit like the DOM tree, except that it contains a more limited set of elements and slightly different information about them. Assistive technologies like screenreaders use this information to find out what's on a web page, tell their users what's there, and enable them to interact with the page. The Accessibility Inspector also uses this information to provide valuable accessibility debugging capabilities in the DevTools. Accessing the Accessibility Inspector ************************************* When you first open any of the other Developer Tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). The accessibility inspector is automatically enabled when you do one of the following(beforeFirefox 79, it had to be explicitly enabled): - Choose **Accessibility** in the **Tools > Browser Tools** menu. - Select the **Accessibility** tab in the Developer Tools toolbox. - Right-click in the main browser window, and choose **Inspect Accessibility Properties** in the context menu. - Right-click an item in the HTML pane of the :doc:`Page Inspector <../page_inspector/index>`, and choose **Show Accessibility Properties** in the context menu. Once activated, the accessibility engine remains running until you close the Developer Tools toolbox. .. note:: The accessibility engine runs in the background when the accessibility features are turned on. When enabled it may affect the metrics from other panels such as :doc:`Memory <../memory/index>` and :doc:`Performance <../performance/index>`, and have some impact onoverall browser performance. If you don't wish to allow the accessibility features to be automatically enabled, you can use the `Configuration Editor `__ (also known as ``about:config``) to define the preference ``devtools.accessibility.auto-init.enabled``, and set it to ``False``. If you don't wish to use the accessibility features at all, you can use the `Configuration Editor `__ to set the preference ``devtools.accessibility.enabled`` to ``False``. If you do this, the methods listed above for activating the Accessibility Inspector do nothing. Features of the Accessibility panel *********************************** The enabled accessibility panel looks like so: .. image:: accessibility-inspector-tabbing_order.png :class: border :alt: Shows issue checker toolbar with "contrast" and "text label" options 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. The name depends on the element; for example, the name of most text elements is 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 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 the 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 ```` 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 :doc:`Page Inspector <../page_inspector/index>`. Hovering over the "target" icon highlights the DOM node in the page content. .. image:: dom-node-target-icon.png :alt: DOMNode property in accessibility inspector with target icon highlighted - *description* — any further description provided on the element, usually by the content of a title attribute. - *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