summaryrefslogtreecommitdiffstats
path: root/chromium/chrome/browser/resources/accessibility/accessibility.html
blob: 1d9b645429cd3f4d64312c9d96830ac688bbe1b2 (plain)
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<html lang="en">
<!--
Copyright (c) 2013 The Chromium Authors. All rights reserved.
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">
  <title>Accessibility Internals</title>
  <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
  <link rel="stylesheet" href="accessibility.css">
  <script src="chrome://resources/js/cr.js"></script>
  <script src="chrome://resources/js/action_link.js"></script>
  <script src="chrome://resources/js/util.js"></script>
  <script 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 class="checkbox-row">
        <label>
          <span class="checkbox-wrapper">
            <input type="checkbox" id="label_images"
                   aria-describedby="label_images_secondary">
          </span>
          Label images
        </label>
      </div>
      <div id="label_images_secondary" class="secondary">
        Automatically labels images.
      </div>

      <h2>Command line options:</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>
      <p>
        To force accessibility to be enabled at launch, run Chrome with this
        flag:
        <pre>--force-renderer-accessibility</pre>
      </p>
      <p>
        To disable accessibility, run Chrome with this flag:
        <pre>--disable-renderer-accessibility</pre>
      </p>

    </div>
    <div class="column">
      <h2>Accessibility tree viewing options:</h2>
      <div class="checkbox-row">
        <span class="checkbox-wrapper">
          <input type="checkbox" id="internal"
                 aria-describedby="internal_secondary">
        </span>
        <label for="internal">
          Internal
        </label>
      </div>
      <div id="internal_secondary" class="secondary">
        Show internal accessibility tree instead of native
      </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>

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

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