<thscope="row"><?php_e('Highlight selected elements on theme?','keyboard-navigation')?></th>
<td>
<label>
<inputtype="checkbox"
name="kbnav[highlight]"
value="yes"
<?phpecho$options['highlight']?"checked":""?> />
<em><?php_e('(overlay yellow boxes on selected theme elements, and show missing selector alerts in Firebug console or in alert dialogs)','keyboard-navigation')?></em>
<h3><?php_e('How does this work?','keyboard-navigation')?></h3>
<p>
<?php_e('<strong>Keyboard Navigation</strong> uses CSS Selectors to find the hyperlinks on the page that define the previous and next links on the page,','keyboard-navigation')?>
<?php_e('and then uses JavaScript to assign the act of hitting the left and right arrow keys on the keyboard to clicking those links.','keyboard-navigation')?>
<?php_e('This is exactly the same approach that you would use to style a specific element on the page:','keyboard-navigation')?>
</p>
<divclass="image-holder">
<imgsrc="<?php echo $plugin_dir_url ?>/images/keyboard-navigation-next-page-id.png"alt="<?php _e('Firebug display of a simple targeting procedure', 'keyboard-navigation') ?>"/>
<div>
<p>
<?php_e('Targeting the <a href="next-page"> on this page is quite easy — provide the CSS selector for the id of the element:','keyboard-navigation')?>
</p>
<blockquote>
<strong>a#next-link</strong>
</blockquote>
<p>
<?php_e('If the <a href> does not have an id, but does have a class, or is the only child of a particular element, you can use syntax like:','keyboard-navigation')?>
</p>
<blockquote>
<strong>div.navdiv#next-link-holder a</strong>
</blockquote>
</div>
<brclass="clear"/>
</div>
<p>
<?php_e('<strong>Keyboard Navigation</strong> extends this slightly so that, if the target element is not a <a href> tag,','keyboard-navigation')?>
<?php_e('Keyboard Navigation will move up through the tree from the found element until an <a href> is found:','keyboard-navigation')?>
</p>
<divclass="image-holder">
<imgsrc="<?php echo $plugin_dir_url ?>/images/keyboard-navigation-next-page-traverse.png"alt="<?php _e('Firebug display of a more complicated targeting procedure', 'keyboard-navigation') ?>"/>
<div>
<p>
<?php_e('You have two approaches for identifying the <a href="next-page"> tag:','keyboard-navigation')?>
</p>
<ul>
<li>
<?php_e('Using CSS 3 selectors, you can use <code>nth-child</code>:','keyboard-navigation')?>
<blockquote>
<strong>div#menunav a:nth-child(2)</strong>
</blockquote>
</li>
<li>
<?php_e('Using more familiar CSS syntax, target the <span class="next"> element, and <strong>Keyboard Navigation</strong> will move up through the DOM tree until it finds <a href="next-page">:','keyboard-navigation')?>
<blockquote>
<strong>div#menunav a span.next</strong>
</blockquote>
</li>
</ul>
</div>
<brclass="clear"/>
</div>
<p>
<?php_e('<strong>Keyboard Navigation</strong> requires that the visitor have JavaScript enabled. This plugin uses','keyboard-navigation')?>
<?php_e('the Prototype JavaScript library, and including it will increase the size of your total site download. Additionally,','keyboard-navigation')?>
<?php_e('if other plugins <strong>load their own copies of the Prototype library</strong>, both plugins <strong>will break</strong>.','keyboard-navigation')?>