1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: :focus pseudo-class - adjacent sibling selector</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/html4/interact/forms.html#h-17.11">
10 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">
11 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors">
12 <link rel="bookmark" href="http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/C15.html#C15-examples">
13 <meta name="flags" content="interact">
14 <meta name="assert" content="An HTML 4 radio button must receive focus state when clicking on it or when selecting it with the keyboard. The :focus pseudo-class applies to a radio button while it has the focus (accepts keyboard events or other forms of input).">
15
16 <style type="text/css">
17 input[type="radio"]
18 {
19 height: 20px;
20 width: 60px;
21 }
22
23 input[type="radio"]:focus + label
24 {
25 background-color: yellow;
26 color: black;
27 }
28 </style>
29
30 </head>
31
32 <body>
33
34 <p>With the pointing device (like a mouse left-button click) or with the keyboard (with the tab key or with the "T" accesskey), activate the radio button below. The words "Text sample" on its right-hand side should then have become highlighted in yellow. In order to pass this test, the tester should not have to move the pointing device out of the radio button in order to see the yellow highlighting.</p>
35
36 <div>
37 <input type="radio" id="test" accesskey="T"> <label for="test">Text sample</label>
38 </div>
39
40 </body>
41 </html>