Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/interactiveaccessibility.com--keyboard-trap-example.html

Created March 8, 2021 16:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/3f5c994da5d46bbb08c9b2fc8e7b5491 to your computer and use it in GitHub Desktop.
Save nfreear/3f5c994da5d46bbb08c9b2fc8e7b5491 to your computer and use it in GitHub Desktop.
Download ZIP
Interactive Accessibility -- Keyboard traps
Raw
interactiveaccessibility.com--keyboard-trap-example.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
SOURCE :~ https://interactiveaccessibility.com/education/training/ex7.1.html
-->
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Training Examples - Keyboard Traps</title>
<link rel="stylesheet" href="css/formee-structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/formee-style.css" type="text/css" media="screen" />
</head>
<body>
<div class="topbar">
<h1><a href="index.html">Interactive Accessibility - Training Examples</a></h1>
</div>
<div class="container">
<div class="intro">
<h2>Keyboard Traps</h2>
<p>Test these forms in both Internet Explorer and Firefox. Unplug or put your mouse aside. Use tab and shift-tab keys to navigate through the form. </p>
</div>
<h3>Example with setting focus</h3>
<!-- formee-->
<form class="formee" action="" method="post">
<fieldset>
<legend>Tax Liability Details</legend>
<div class="grid-12-12">
<label for="lastname">Last Name</label>
<input id="lastname" type="text" value="">
</div>
<div class="grid-12-12">
<label for="lastfour">Last 4 digits of your Tax ID</label>
<input id="lastfour" type="text" value="" class="trap" onblur="this.focus();">
</div>
<div class="grid-12-12">
<label for="statetax">State Tax Amount</label>
<input id="statetax" type="text" value="">
</div>
<div class="grid-12-12">
<input class="right" type="submit" title="Submit" value="Submit" />
</div>
</fieldset>
</form>
<!-- formee-->
</div>
<div class="footer">&copy;2013 Interactive Accessibility</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment