chromium/chrome/browser/resources/accessibility/accessibility.html

<!doctype html>
<html lang="en">
<!--
Copyright 2013 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessibility Internals</title>
  <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
  <link rel="stylesheet" href="accessibility.css">
  <script type="module" src="accessibility.js"></script>
</head>
<body>
  <h1>Accessibility Internals</h1>
  <p>
    Use this page to inspect the internal representation of accessibility in
    Chrome. You can see and modify the various accessibility modes Chrome has.
    You can also view the accessibility tree for a specific page, or for the
    Chrome app natively.
  </p>

  <div class="columns">
    <div class="column">
      <h2>Accessibility modes:</h2>
      <p>
        Check/uncheck accessibility modes to see how they change a page's
        accessibility.
      </p>
      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="native"
                   aria-describedby="native_secondary">
          </span>
          Native accessibility API support
        </label>
      </div>
      <div id="native_secondary" class="secondary">
        Allows Chrome to be controlled via native accessibility APIs
        specific to this platform.
      </div>

      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="web"
                   aria-describedby="web_secondary">
          </span>
          Web accessibility
        </label>
      </div>
      <div id="web_secondary" class="secondary">
        Accessibility support is enabled for web content.
      </div>

      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="text"
                   aria-describedby="text_secondary">
          </span>
          Text metrics
        </label>
      </div>
      <div id="text_secondary" class="secondary">
        Enables support for querying line breaks and the bounding
        box of arbitrary character ranges.
      </div>

      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="screenreader"
                   aria-describedby="screenreader_secondary">
          </span>
          Screen reader support
        </label>
      </div>
      <div id="screenreader_secondary" class="secondary">
        Exposes accessibility APIs typically needed only by
        screen readers.
      </div>

      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="html"
                   aria-describedby="html_secondary">
          </span>
          HTML
        </label>
      </div>
      <div id="html_secondary" class="secondary">
        Exposes HTML tag names and attributes via accessibility APIs.
      </div>

    </div>
    <div class="column">
      <h2>Accessibility tree viewing options:</h2>
      <div class="api-type-wrapper">
        <label>API type shown in the tree:
          <select id="apiType">
            <option>Error: Not able to load options</option>
          </select>
          <label>
      </div>
      <h3>Filters:</h3>
      <p>
        Use filters to match the attributes and attribute values you want
        included in the output. Filters can contain simple wildcards (*) only,
        they're not regular expressions. Attributes are separated by spaces.
      </p>

      <div>
        <label for="filter-allow">
          Allow:
        </label>
        <input id="filter-allow" aria-describedby="allow_secondary">
      </div>
      <div id="allow_secondary" class="secondary">
        Include these attributes. Empty attributes are skipped.
      </div>

      <div>
        <label for="filter-allow-empty">
          Allow empty:
        </label>
        <input id="filter-allow-empty"
               aria-describedby="allow-empty_secondary">
      </div>
      <div id="allow-empty_secondary" class="secondary">
        Include these attributes, even if they are empty.
      </div>

      <div>
        <label for="filter-deny">
          Deny:
        </label>
        <input id="filter-deny" aria-describedby="deny_secondary">
      </div>
      <div id="deny_secondary" class="secondary">
        Exclude these attributes.
      </div>
    </div>
  </div>

  <div class="columns">
    <div class="column">
      <h2>
        Locking the accessibility mode from being changed by other
        applications:
      </h2>
      <p>
        Accessibility features in Chrome are off by default and enabled
        automatically on-demand. Changes to these modes only take effect
        until the next time Chrome is restarted.
      </p>
      <div class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="locked"
                   aria-describedby="locked_secondary">
          </span>
          Lock the current accessibility mode from being changed
          except by this page.
        </label>
      </div>
      <p>
        To force accessibility to be enabled at launch, run Chrome with this
        flag:
        <pre>--force-renderer-accessibility</pre>
      </p>
      <p>
        To force the accessibility AXMode to one of the three predefined bundles
        (basic, form-controls, or complete), run Chrome with the
        --force-renderer-accessibility flag and optional argument:
        <pre>--force-renderer-accessibility=[basic|form-controls|complete]</pre>

        If the optional parameter is absent, the AXMode bundle will default to
        complete.
      </p>
      <p>
        To disable accessibility, run Chrome with this flag:
        <pre>--disable-renderer-accessibility</pre>
      </p>
    </div>
  </div>

  <h2>Chrome Native UI:</h2>
  <div id="browsers" class="list">
    <label for="native-ui-delay">
      Set a delay, in milliseconds, before getting the native accessibility
      tree:
    </label>
    <div></div>
    <input id="native-ui-delay" type="number" value="0"> ms
  </div>

  <h2>Pages:</h2>
  <div id="pages" class="list"></div>

  <h2 id="widgets-header">Top Level Windows:</h2>
  <p id="widgets-not-supported" class="hidden">
    Top Level Window support is not available on this platform.
  </p>
  <div id="widgets" class="list"></div>
</body>
</html>