1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
---
title: Инспектор доступности
slug: Tools/Инспектор_доступности
translation_of: Tools/Accessibility_inspector
---
<div>{{ToolsSidebar}}</div>
<p class="summary">Инспектор доступности предоставляет средства для доступа к важной информации, предоставляемой вспомогательным технологиям на текущей странице, через дерево доступности, позволяя вам проверить, что отсутствует или иным образом требует внимания. В этой статье вы узнаете основные функции инспектора доступности и способы его использования.</p>
<h2 id="Очень_краткое_руководство_по_доступности">Очень краткое руководство по доступности</h2>
<p>Доступность - это средство, позволяющее использовать ваши сайты как можно большему числу людей. Это означает, что вы стараетесь изо всех сил не ограничивать кого-либо в доступе к информации из-за какой-либо имеющейся инвалидности, или любых других личных особенностей, таких как используемое устройство, скорости их сетевого подключения или их географического местоположения или языка.</p>
<p>Здесь мы в основном говорим о том, чтобы донести информацию людям с нарушениями зрения - это делается с помощью <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API доступности</a>, доступных внутри веб-браузеров, которые раскрывают информацию о том, какие роли играют разные элементы на вашей странице (например, они являются текстом или кнопками, ссылками, элементами форм и т. д.?).</p>
<p>Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые имеют свое предназначение. Иногда приходится использовать некоторую не семантическую разметку (например, {{htmlelement ("div")}}) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для обозначения своих собственных ролей.</p>
<p>Роли и другая информация, предоставляемая API-интерфейсами браузера, представлена в иерархической структуре, называемой деревом доступности. Это немного похоже на дерево DOM, за исключением того, что оно содержит более ограниченный набор элементов и немного другую информацию о них.</p>
<p>Вспомогательные технологии, такие как скринридеры, используют эту информацию, чтобы узнать, что находится на веб-странице и сообщают своим пользователям и это позволяет им взаимодействовать со страницей. Инспектор доступности также использует эту информацию для обеспечения возможностей для отладки доступности в DevTools.</p>
<h2 id="Доступ_к_инспектору_доступности">Доступ к инспектору доступности</h2>
<p>The accessibility inspector (available since Firefox 61) is not shown by default in the DevTools. To turn it on, you need to go to DevTools Settings (press <kbd>F1</kbd>, or go to the "three dots" menu and choose <em>Settings</em>) and check the <em>Accessibility</em> checkbox under the <em>Default Developer Tools</em> heading. This will cause the <em>Accessibility</em> tab to appear in the main DevTools display, which can be clicked on to display the accessibility panel:</p>
<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;" title=""></p>
<p>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 <a href="/en-US/docs/Tools/Memory">Memory</a> and <a href="/en-US/docs/Tools/Performance">Performance</a> as well as overall browser performance. For this reason you should keep it turned off when you aren't specifically using it.</p>
<p>You can turn the features on using the <em>Turn On Accessibility Features</em> button.</p>
<p>Once the panel content loads, you can then turn it off again using the <em>Turn Off Accessibility Features</em> 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 disabed.</p>
<div class="note">
<p><strong>Note</strong>: If are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.</p>
</div>
<h2 id="Особенности_панели_доступности">Особенности панели доступности</h2>
<p>The enabled accessibility panel looks like so:</p>
<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;" title=""></p>
<p>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:</p>
<ul>
<li><em>Role</em> — the role this item has on the page (e.g., <code>pushbutton</code>, or <code>footer</code>). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA <code>role</code> attribute.</li>
<li><em>Name</em> — 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 <code>textContent</code>, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.</li>
</ul>
<p>On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:</p>
<ul>
<li><em>name</em> — the item's name, as described above.</li>
<li><em>role</em> — the item's role, as described above.</li>
<li><em>actions</em> — 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.</li>
<li><em>value</em> — 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 <code><a></code> element's <code>href</code>.</li>
<li><em>DOMNode</em> — 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 <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. Hovering over the "target" icon highlights the DOM node in the page content.<br>
<img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li>
<li><em>description</em> — any further description provided on the element, usually by the content of a title attribute.</li>
<li><em>help</em> — 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)}}).</li>
<li><em>keyboardShortcut</em> — any keyboard shortcut that is available to activate the element, as specified in an <code>accessKey</code> attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).</li>
<li><em>childCount</em> — the number of child items the current item has in the accessibility tree hierarchy.</li>
<li><em>indexInParent</em> — 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.</li>
<li><em>states</em> — 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 <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>.</li>
<li><em>attributes</em> — 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 <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a>.</li>
</ul>
<div class="note">
<p><strong>Note</strong>: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.</p>
</div>
<h3 id="Keyboard_controls">Keyboard controls</h3>
<p>The <em>Accessibility</em> tab is fully keyboard-accessible:</p>
<ul>
<li>You can tab between the <em>Turn Off Accessibility Features</em> button and left and right panels.</li>
<li>When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).</li>
</ul>
<h3 id="Вывод_дерева_доступности_в_JSON-формате">Вывод дерева доступности в JSON-формате</h3>
<p>You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting <strong>Print to json:</strong></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 238px; margin: 0px auto; width: 800px;" title=""></p>
<p>When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p>
<p>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.</p>
<h2 id="Известные_связанные_особенности">Известные связанные особенности</h2>
<p>When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:</p>
<h3 id="Context_menu_options">Context menu options</h3>
<p>An extra context menu option is added, both for the general context menu on the web page when right/<kbd>Ctrl</kbd> + clicking a UI feature, and the HTML pane of the page inspector when right/<kbd>Ctrl</kbd> + clicking a DOM element:</p>
<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;" title=""></p>
<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p>
<p>When you choose the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu options, the <em>Accessibility</em> tab is immediately opened to show the corresponding accessibility tree item and its properties.</p>
<div class="note">
<p><strong>Note</strong>: Some DOM elements do not have accessibility properties — in such a case, the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu item is grayed out.</p>
</div>
<h3 id="Выделение_элементов_интерфейса">Выделение элементов интерфейса</h3>
<p>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. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p>
<p>In the following example, you can see that the image has been highlighted and its role, graphic, and name, "Road, Asphalt, Sky, Clouds, Fall" appears in the information bar above it.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16173/role_name_pc.png" style="border: 1px solid black; display: block; height: 331px; margin: 0 auto; width: 424px;"></p>
<h4 id="Цветовой_контраст">Цветовой контраст</h4>
<p>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 color blindness will be unable to read the text. The Web Content Accessibility Guidelines (WCAG) 2.0 defines 4.5:1 as the minimum suggested contrast ratio between the foreground and background colors for smaller text on a web page. For example:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16305/text_contrast_2.png" style="display: block; height: 67px; margin: 0px auto; width: 259px;"></p>
<p>The color contrast in the image above is 2.77, 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. Compare that to the following:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16304/text_contrast_1.png" style="display: block; height: 64px; margin: 0 auto; width: 336px;"></p>
<p>In this example, the contrast is 12.63. This time the number is followed by AAA and a checkmark in green, indicating that the text has a contrast ratio of 7:1 or more, meaning it meets the criteria for enhanced contrast, or Level AAA.</p>
<h3 id="Accessibility_picker">Accessibility picker</h3>
<p>In a similar way to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector HTML pane picker</a>, when the <em>Accessibility</em> tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.</p>
<p>The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:</p>
<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p>
<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;" title=""></p>
<p>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 <kbd>Shift</kbd> 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 <kbd>Shift</kbd> key.</p>
<p>When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the <kbd>Esc</kbd> key.</p>
<h2 id="Типичное_использование">Типичное использование</h2>
<p>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 <code>alt</code> text and form elements without proper labels have a <code>name</code> property of <code>null</code>, for example.</p>
<p><img alt="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" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
<p>It is also very handy for verifying semantics — you can use the <em>Inspect Accessibility Properties</em> 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 whether a link is really a link).</p>
<p><img alt="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" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p>
<h2 id="Смотри_также">Смотри также</h2>
<ul>
<li><a href="/en-US/docs/Learn/Accessibility">Accessibility fundamentals</a></li>
<li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li>
<li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
<li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li>
</ul>
<div class="TnITTtw-translate-selection-button" style="top: 1199.5px; left: 280.25px;"> </div>
|
