path: root/files/de/tools/barrierefreiheits_inspektor/index.html

---
title: Barrierefreiheitsinspektor
slug: Tools/Barrierefreiheits_inspektor
translation_of: Tools/Accessibility_inspector
---
<p>{{ToolsSidebar}}</p>

<p class="summary">Der Barrierefreiheitsinspektor bietet Zugriff auf wichtige Informationen, die auf der aktuellen Seite über die barrierefreie Strukturansicht den Hilfstechnologien zur Verfügung gestellt werden. So können Sie überprüfen, was fehlt oder ob Sie anderweitig darauf achten müssen. Dieser Artikel führt Sie durch die Hauptfunktionen des Barrierefreiheitsinspektor und dessen Verwendung.</p>

<h2 id="Ein_sehr_kurzer_Leitfaden_zur_Barrierefreiheit">Ein (sehr) kurzer Leitfaden zur Barrierefreiheit</h2>

<p>Barrierefreiheit ist die Praxis, Ihre Websites für möglichst viele Menschen nutzbar zu machen. Dies bedeutet, dass Sie alles versuchen sollten, um Personen nicht daran zu hindern, auf Informationen zuzugreifen, weil sie eine Behinderung haben oder andere persönliche Umstände sie einschränken wie das von ihnen verwendete Gerät, die Geschwindigkeit ihrer Netzwerkverbindung oder ihre geografische Position oder ihr Gebietsschema.</p>

<p>Hier geht es vor allem darum, Informationen für Menschen mit Sehbehinderungen zu anzuzeigen - dies geschieht über die in Webbrowsern verfügbaren <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Zugänglichkeits-APIs</a>, die Informationen darüber liefern, welche Rollen die verschiedenen Elemente auf Ihrer Seite spielen (z.B. bestehen sie nur aus Text oder sind es Buttons, Links, Formularelemente, etc.?).</p>

<p>Semantischen DOM-Elementen sind standardmäßig Rollen zugewiesen, die auf ihren Zweck hindeuten. Manchmal müssen Sie jedoch ein nicht-semantisches Markup (z. B. {{htmlelement ("div")}} s) verwenden, um ein komplexes benutzerdefiniertes Steuerelement zu erstellen, und das Steuerelement hat keine Standardrolle, die seinen Zweck widerspiegelt. In solch einer Situation können Sie <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>-Rollenattribute verwenden, um Ihre eigenen Rollen bereitzustellen.</p>

<p>Rollen und andere Informationen, die von Browser-APIs zur Verfügung gestellt werden, werden in einer hierarchischen Struktur namens Zugänglichkeitsbaum dargestellt. Ähnlich wie der DOM-Baum, außer dass er eine begrenzte Anzahl von Elementen und etwas andere Informationen über sie enthält.</p>

<p>Hilfstechnologien wie Screenreader nutzen diese Informationen, um herauszufinden, was auf einer Webseite vorhanden ist, lesen ihren Benutzern vor, was dort ist, und ermöglichen ihnen, mit der Seite zu interagieren. Der Zugänglichkeitsinspektor verwendet diese Informationen auch, um wertvolle Debugging-Funktionen für die Barrierefreiheit in den DevTools bereitzustellen.</p>

<h2 id="Auf_den_Barrierefreiheitsinspektor_zugreifen">Auf den Barrierefreiheitsinspektor zugreifen</h2>

<p>Der Barrierefreiheitsinspektor (verfügbar seit Firefox 61) wird in den DevTools standardmäßig nicht angezeigt. Um ihn einzuschalten, müssen Sie zu den DevTools-Einstellungen gehen (drücken Sie <kbd>F1</kbd> , oder gehen Sie zum "Drei Punkte" -Menü und wählen Sie <em>Einstellungen</em>) und aktivieren Sie das Kontrollkästchen <em>Barrierefreiheit </em>unter der Überschrift <em>Standard-Entwicklungswerkzeuge</em>. Die Registerkarte <em>Barrierefreiheit</em> im DevTools-Fenster wird angezeigt, auf die man klicken kann, um den Barrierefreiheitsinspektor anzuzeigen:</p>

<p><img alt='Barrierefreiheitsregister in Firefox DevTools, deaktiviert, mit einem Button, der die Beschriftung trägt "Barrierefreiheitsfunktionen aktivieren"ures' src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;"></p>

<p>Anfangs sind die DevTools-Barrierefreiheitsfunktionen deaktiviert. (Es sei denn, Sie haben sie bereits in einer anderen Browser-Registerkarte aktiviert oder die Firefox-Barrierefreiheit-Engine wurde bereits gestartet, z. B. könnten Sie ein Screenreader-Benutzer oder -Tester sein). Dies liegt daran, dass die Eingabehilfen-Engine im Hintergrund ausgeführt wird, wenn die Barrierefreiheitsfunktionen aktiviert sind. Während sie ausgeführt wird, verlangsamt sie Leistung und Arbeitsspeicher; Daher stört es die Messwerte anderer Panels wie <a href="https://developer.mozilla.org/en-US/docs/Tools/Memory">Speicher </a>und <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Leistung </a>sowie die allgemeine Browserleistung. Aus diesem Grund sollten Sie die Barrierefreiheitsfunktionen ausschalten, wenn Sie sie nicht verwenden.</p>

<p>Sie können die Funktionen mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen aktivieren</em> einschalten.</p>

<p>Sobald der Inhalt des Bedienfelds geladen ist, können Sie ihn mithilfe der Schaltfläche <em>Barrierefreiheitsfunktionen deaktivieren</em> in der oberen linken Ecke wieder deaktivieren, es sei denn, die Barrierefreiheitsengine wurde zuvor zum Ausführen eines Bildschirmlesers ausgeführt. In diesem Fall wird diese Schaltfläche deaktiviert.</p>

<div class="note">
<p><strong>Hinweis</strong>: Wenn Sie die Eingabehilfen auf mehreren Registerkarten verwenden, werden sie auf allen Registerkarten deaktiviert.</p>
</div>

<h2 id="Features_of_the_Accessibility_panel">Features of the Accessibility panel</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;"></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>&lt;a&gt;</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>

<h2 id="Notable_related_features">Notable related features</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;"></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="Highlighting_of_UI_items">Highlighting of UI items</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. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</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;"></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="Typical_use_cases">Typical use cases</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="See_also">See also</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>