File: screen_reader_only.css

package info (click to toggle)
chromium 139.0.7258.127-1
  • links: PTS, VCS
  • area: main
  • in suites:
  • size: 6,122,068 kB
  • sloc: cpp: 35,100,771; ansic: 7,163,530; javascript: 4,103,002; python: 1,436,920; asm: 946,517; xml: 746,709; pascal: 187,653; perl: 88,691; sh: 88,436; objc: 79,953; sql: 51,488; cs: 44,583; fortran: 24,137; makefile: 22,147; tcl: 15,277; php: 13,980; yacc: 8,984; ruby: 7,485; awk: 3,720; lisp: 3,096; lex: 1,327; ada: 727; jsp: 228; sed: 36
file content (40 lines) | stat: -rw-r--r-- 1,628 bytes parent folder | download | duplicates (6)
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
/* Copyright 2023 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style
 * #scheme=relative
 * #css_wrapper_metadata_end */

 /* Use this class to hide an element visually, it'll still be focusable by
  * the screen reader. Note that the size of the a11y focus highlighter will be
  * defined by the content of the hidden element. If you need to change the a11y
  * message of an existing/visible element consider using this class in
  * combination with "screen-reader-only-host-node", find its definition
  * below.
  */
.screen-reader-only {
  clip-path: inset(100%);
  position: fixed;
 }

/* These classes allow to substitute a specific node's screen reader message
 * with another one. Which could be useful in cases where some important part
 * of the interface cannot be conveyed by reading the text content only or it
 * may be presented in a better way, e.g. reading "Credit card ending in 1234",
 * is much friendlier than reading "**** 1234" verbatim.
 * Set the "screen-reader-only-host-node" class on the node which message
 * should be substituted (it is required to have the a11y focus on it) and set
 * the "screen-reader-only" class on the element inside with the substituting
 * content. Also consider hiding (aria-hidden="true") other elements inside
 * the host node if focusing them is nonsensical. */
.screen-reader-only-host-node {
  position: relative;
}
.screen-reader-only-host-node .screen-reader-only {
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}