| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>scrollable div and focus</title> |
|---|
| 5 | <style type="text/css"> |
|---|
| 6 | |
|---|
| 7 | html{ |
|---|
| 8 | |
|---|
| 9 | } |
|---|
| 10 | |
|---|
| 11 | *, *:before, *:after { |
|---|
| 12 | -webkit-box-sizing: border-box; |
|---|
| 13 | box-sizing: border-box; |
|---|
| 14 | } |
|---|
| 15 | |
|---|
| 16 | body { |
|---|
| 17 | margin: 0; |
|---|
| 18 | padding: 0; |
|---|
| 19 | } |
|---|
| 20 | |
|---|
| 21 | a { |
|---|
| 22 | text-decoration: none; |
|---|
| 23 | color: darkblue; |
|---|
| 24 | } |
|---|
| 25 | |
|---|
| 26 | .wrapper { |
|---|
| 27 | max-width: 600px; |
|---|
| 28 | margin: 0 auto; |
|---|
| 29 | padding: 50px 50px 2000px; |
|---|
| 30 | background: lightblue; |
|---|
| 31 | } |
|---|
| 32 | .scrollable { |
|---|
| 33 | max-height: 200px; |
|---|
| 34 | overflow: auto; |
|---|
| 35 | } |
|---|
| 36 | |
|---|
| 37 | :focus { |
|---|
| 38 | outline: 2px solid red; |
|---|
| 39 | } |
|---|
| 40 | |
|---|
| 41 | </style> |
|---|
| 42 | |
|---|
| 43 | </head> |
|---|
| 44 | <body> |
|---|
| 45 | |
|---|
| 46 | <div class="wrapper"> |
|---|
| 47 | |
|---|
| 48 | <p> |
|---|
| 49 | Use the Tab key to navigate through the focusable elements in this page. |
|---|
| 50 | </p> |
|---|
| 51 | |
|---|
| 52 | <h2>with tabindex="0"</h2> |
|---|
| 53 | |
|---|
| 54 | <p> |
|---|
| 55 | <a href="https://wordpress.org">some link</a> |
|---|
| 56 | </p> |
|---|
| 57 | |
|---|
| 58 | <div class="scrollable" tabindex="0"> |
|---|
| 59 | </p><strong>Once focused with Tab key, you can scroll with up and down arrow keys.</strong></p><p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just flocked up to quiz and vex him. Adjusting quiver and bow, Zompyc killed the fox. My faxed joke won a pager in the cable TV quiz show. Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. Big July earthquakes confound zany experimental vow. Foxy parsons quiz and cajole the lovably dim wiki-girl. Have a pick: twenty six letters - no forcing a jumbled quiz! Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.</p> |
|---|
| 60 | </div> |
|---|
| 61 | |
|---|
| 62 | <p> |
|---|
| 63 | <a href="https://wordpress.org">some link</a> |
|---|
| 64 | </p> |
|---|
| 65 | |
|---|
| 66 | <h2>without tabindex="0"</h2> |
|---|
| 67 | |
|---|
| 68 | <p> |
|---|
| 69 | <a href="https://wordpress.org">some link</a> |
|---|
| 70 | </p> |
|---|
| 71 | |
|---|
| 72 | <div class="scrollable"> |
|---|
| 73 | <p><strong>Firefox is the only browser to give focus to this div when tabbing with the keyboard. With other browsers, you first must click inside the div then you can use up and down arrow keys to scroll.</strong></p><p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack!" my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just flocked up to quiz and vex him. Adjusting quiver and bow, Zompyc killed the fox. My faxed joke won a pager in the cable TV quiz show. Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. Big July earthquakes confound zany experimental vow. Foxy parsons quiz and cajole the lovably dim wiki-girl. Have a pick: twenty six letters - no forcing a jumbled quiz! Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag.</p> |
|---|
| 74 | </div> |
|---|
| 75 | |
|---|
| 76 | <p> |
|---|
| 77 | <a href="https://wordpress.org">some link</a> |
|---|
| 78 | </p> |
|---|
| 79 | |
|---|
| 80 | |
|---|
| 81 | <p> |
|---|
| 82 | <a href="http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex">About tabindex, if given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. →</a> |
|---|
| 83 | </p> |
|---|
| 84 | |
|---|
| 85 | <p> |
|---|
| 86 | <a href="https://wordpress.org" tabindex="1">first focusable element, for testing (has tabindex="1")</a> |
|---|
| 87 | </p> |
|---|
| 88 | |
|---|
| 89 | <p> |
|---|
| 90 | <a href="https://wordpress.org">some link</a> |
|---|
| 91 | </p> |
|---|
| 92 | |
|---|
| 93 | |
|---|
| 94 | </div> |
|---|
| 95 | </body> |
|---|
| 96 | </html> |
|---|