Accessibility Inspector is now built into Mozilla FireFox 61. This feature will give a wonderful opportunity for the accessibility testers and consultants to review the accessibility properties of any element and provide a detailed description for the audit report. In this article let us understand , how to enable it and use the feature. Screen reader users, don’t be panic, this feature is also accessible with the screen reader.
How is this Accessibility Inspector useful?
Before enabling the feature, let us understand how is this useful.
For a screen reader to understand a button as a button or link as a link on the browser the accessibility APIs of the browser help. The accessibility APIs expose the role and other information that is required for the screen readers. The information exposed by accessibility APIs include semantically supplied roles such as <a>, <label> as well as those supplied by WAI ARIA such as role=”link” and aria-label.
What is Accessibility Tree
The roles and other information made available by accessibility APIs is presented in a hierarchical structure called accessibility tree. This is similar to a DOM structure but it only has the accessibility related properties.
Making the accessibility inspector available directly on the browser or via dev tools make the life of developers and accessibility testers easy. Eg: Using this feature one can quickly check if an image on the page has an alternate text or not, can easily identify the button displayed is really a button or an image with click functionality etc.
Enabling accessibility inspector on FireFox browser.
- Make sure you are running Mozilla FireFox version 61 or above. Menu > Help > About Firefox or Alt + h, a.
- Now open your developer settings. Right Click or Application key or Shift + F10 and select inspect element or Control + Shift + i.
- Now open the Dev tools settings. Go to the three dots menu and select Settings or Press F1 (Function key 1).
- Navigate through the settings and check the Accessibility checkbox to checked state.
- Now the accessibility tab will be added to the Dev tools panel.
Accessing Accessibility Inspector
Once the accessibility inspector is enabled there are two ways to access the properties of any element.
Method 1: Simple Method
In this method you can directly navigate to any element on the web page and check it’s properties.
- Navigate to the element for which you want to check the accessibility properties.
- Right Click, hit the application key or Shift + F10 and select Inspect Accessibility Properties.
- The accessibility Inspector panel opens. Use the tab or shift tab to find the Accessibility tree. The accessibility tree should have the earlier selected element focused.
- Use a tab to move to the properties of the element.
- Use the arrow keys to navigate between different properties such as Name, role, action, value, keyboard shortcut, state, attributes etc.
Method 2: Not So easy Method
In this method you can navigate from one node to another in the hierarchical accessibility tree, choose any element you prefer to and check it’s accessibility properties.
- Open the dev tools. Right click or application key or Shift + F10 and choose Inspect element or shortcut Control + Shift + i
- Navigate to Dev tools toolbar. Use shift tab or tab to navigate within the Dev tools window.
- Move focus to Accessibility in the tool bar. Use left and right arrow to move within the toolbar.
- Activate the accessibility option in the toolbar.
- Press tab to move into the accessibility inspector panel and to Accessibility tree.
- Navigate within the accessibility tree and observe the elements in the structure. Up and down arrow to move between the nodes and left and right arrows to expand or collapse the same.
- To check the accessibility properties of any element, bring focus to that element in the accessibility tree and press tab to move to it’s properties.
- Use the arrow keys to navigate between different properties such as Name, role, action, value, keyboard shortcut, state, attributes etc.
See the video
Happy Accessibility.