From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/id/tools/accessibility_inspector/index.html | 196 ++++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 files/id/tools/accessibility_inspector/index.html (limited to 'files/id/tools/accessibility_inspector') diff --git a/files/id/tools/accessibility_inspector/index.html b/files/id/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..ded237c344 --- /dev/null +++ b/files/id/tools/accessibility_inspector/index.html @@ -0,0 +1,196 @@ +--- +title: Accessibility Inspector +slug: Tools/Accessibility_inspector +tags: + - Aksesibilitas + - Alat + - DevTools + - Inspektur Aksesibilitas + - Panduan +translation_of: Tools/Accessibility_inspector +--- +
{{ToolsSidebar}}
+ +

The Accessibility Inspector (Inspektur Akesibilitas) menyediakan sebuah sarana untuk mengakses informasi penting terbuka untuk teknologi bantu di dalam halaman ini lewat pohon aksesibilitas, memperbolehkan anda untuk cek apa yang hilang atau jika tidak butuh perhatian. Artikel ini membawamu melewati fitur utama dari Accessibility Inspector (Inspektur Aksesibilitas) dan bagaimana menggunakannya.

+ +

Sebuah panduan yang (sangat) singkat untuk aksesibilitas

+ +

Accessibility (Aksesibilitas) adalah latihan untuk membuat website anda dapat digunakan oleh sebanyak mungkin orang . Ini berarti mencoba yang terbaik dari kamu untuk tidak mengunci siapapun untuk mengakses informasi karena kecacatan yang mungkin mereka miliki, atau keadaan pribadi seperti perangkat yang mereka gunakan, kecepatan dari koneksi jaringan mereka, atau geografis lokasi mereka atau lokal. Kamu dapat mencari informasi lebih luas di dalam bagian Accessibility (Aksesibilitas)  dalam Dokumen Web MDN.

+ +

Di sini kita terutama berbicara tentang mengekspos informasi kepada orang-orang dengan cacat visual - ini dilakukan melalui accessibility APIs (API aksesibilitas) yang tersedia di dalam web browser, yang memaparkan informasi tentang peran elemen-elemen yang berbeda di halaman Anda (misalnya, apakah mereka hanya teks, atau apakah mereka tombol, tautan, elemen formulir, dll?).

+ +

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., {{htmlelement("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

+ +

The Accessibility Inspector is available by default since Firefox 63:

+ +

Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features

+ +

Initially, the DevTools 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). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as Memory and Performance as well as overall browser performance. For this reason, you should keep it turned off when you aren't specifically using it.

+ +

You can turn the features on using the Turn On Accessibility Features button.

+ +

Once the panel content loads, you can then turn it off again using the Turn Off Accessibility Features button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabled.

+ +
+

Note: If you are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.

+
+ +

Features of the Accessibility panel

+ +

The enabled accessibility panel looks like so:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labelled Turn Off Accessibility Features

+ +

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:

+ + + +

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

+ + + +
+

Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.

+
+ +

Keyboard controls

+ +

The Accessibility tab is fully keyboard-accessible:

+ + + + + +

You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting Print to JSON:

+ +

+ +

When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:

+ +

+ +

Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw JSON data on a separate tab in the viewer.

+ +

Check for accessibility issues

+ +

You can check for accessibility issues by clicking the drop-down menu next to: Check for issues. The available menu items include:

+ + + +

When you one of the menu items, Firefox scans your document for the type of issues you selected. Depending on the size and complexity of your document, this may take a few seconds. When the scan is complete, the left side of the Accessibility Inspector panel displays only the items that have that type of issue. In the right side of the panel, the Checks subpanel lists the specific issue with the selected node. For each type of issue, there is a Learn more link to further information on MDN Web Docs about the issue.

+ +

Check for "all" issues, with "contrast" and "text labels" selected

+ +

The menu items act as toggles. Select the item to view that type of issue; select the item again to clear the display of issues of that type.

+ +

Issues with a particular item are always displayed in the Checks subpanel as you browse the tree. The Check for issues buttons are a quick way to view all and only those items that have issues.

+ + + +

When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:

+ +

Context menu options

+ +

An extra context menu option is added, both for the general context menu on the web page when right/Ctrl + clicking a UI feature, and the HTML pane of the page inspector when right/Ctrl + clicking a DOM element:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.

+ +
+

Note: Some DOM elements do not have accessibility properties — in that case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.

+
+ +

Highlighting of UI items

+ +

In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar along with color contrast information if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.

+ +

In the following example, you can see that the image has been highlighted and its role, graphic, name, "Road, Asphalt, Sky, Clouds, Fall", and the color contrast ratio, 3.46, appears in the information bar above it.

+ +

+ +

Color contrast

+ +

Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. See Color contrast for details about recommended contrast ratios.

+ +

For example:

+ +

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

+ +

The color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio.

+ +

As of Firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. For example:

+ +

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

+ +

In this example, the contrast ranges from 4.72 to 5.98. The numbers are followed by AAA and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the criteria for enhanced contrast, or Level AAA.

+ +

See Color contrast for more information on color contrast.

+ +

Accessibility picker

+ +

Like the element picker button on the Page Inspector, the Accessibility tab's element picker button allows you to hover and select UI items on the current page  highlight objects in the accessibility tree.

+ +

The accessibility tab element picker looks slightly different from the Page Inspector HTML pane picker, as shown below:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.

+ +

When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.

+ +

Typical use cases

+ +

The Accessibility Inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

+ +

A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null

+ +

It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or a link is really a link).

+ +

A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf