wcag/working-examples/aria-labelledby-time-out-input-concatenated-label/index.html at e338c8fd80cbe11f354c2adc3a7648e1827b439c · w3c/wcag · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aria-labelledby example 1: Extend time-out: WCAG 2</title>
<style>
    body{
        background:#fff;
        color:#000;
        font:100% / 1.5 sans-serif;
    }
</style>
</head>
<body>

<h1><code>aria-labelledby</code> example 1: Extend time-out</h1>

<form>
<p><span id="timeout-label"><label for="timeout-duration">Extend time-out to</label></span>
<input type="text" size="3" id="timeout-duration" value="20"
    aria-labelledby="timeout-label timeout-duration timeout-unit">
<span id="timeout-unit"> minutes</span></p>
</form>


<p>(Adapted from <a href="https://www.marcozehe.de/easy-aria-tip-2-aria-labelledby-and-aria-describedby/">Easy ARIA tip #2: aria-labelledby and aria-describedby</a>, an example put together by Marco Zehe in 2008)</p>
</body>
</html>