{"id":32,"date":"2008-08-04T10:13:38","date_gmt":"2008-08-04T14:13:38","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/2008\/08\/04\/how-to-set-up-and-use-access-keys\/"},"modified":"2012-08-26T07:46:23","modified_gmt":"2012-08-26T11:46:23","slug":"how-to-set-up-and-use-access-keys","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2008\/08\/04\/how-to-set-up-and-use-access-keys\/","title":{"rendered":"How to Set Up and Use Access Keys"},"content":{"rendered":"<p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Access_keys\" target=\"_blank\">Access keys<\/a> allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples use of your website.<\/p>\n<h3>Example HTML Code<\/h3>\n<p>The code involved to adding access keys to your website is very simple, you just have to add one extra piece of code to the links as shown below.<\/p>\n<p>&lt;li id=&#8221;about&#8221;\u009d&gt;&lt;a href=&#8221;about.html&#8221;\u009d <strong>ACCESSKEY=&#8221;1&#8243;<\/strong> tabindex=&#8221;300&#8243;\u009d&gt;About&lt;\/li&gt;<\/p>\n<p><a title=\"Download Internet Explorer (IE)\" href=\"http:\/\/www.microsoft.com\/windows\/downloads\/ie\/getitnow.mspx\">Internet Explorer(IE)<\/a>, <a title=\"Download Firefox 3.0\" href=\"http:\/\/www.mozilla.com\/en-US\/firefox\/\">Firefox<\/a>, <a title=\"Download Opera\" href=\"http:\/\/www.opera.com\/download\/\">Opera<\/a>, and <a title=\"Downlaod Safari\" href=\"http:\/\/www.apple.com\/safari\/\">Safar<\/a>i each have their own way of using access keys. In most web browsers, the user uses the access key by pressing &#8220;<strong>ALT<\/strong>&#8220;\u009d (on PC) or &#8220;<strong>CTRL<\/strong>&#8220;\u009d (on MAC) simultaneously with the appropriate character on the keyboard.<\/p>\n<p>The following are the different ways to use the access key function combinations broken by PC or MAC and then browser type.<\/p>\n<h3>PC<\/h3>\n<ul>\n<li><strong>IE<\/strong> &#8211; press the &#8220;<strong>ALT<\/strong>&#8220;\u009d key + access key and then press the <strong>&#8220;ENTER<\/strong>&#8220;\u009d key to active the action.<\/li>\n<li><strong>Firefox 2.0<\/strong> &#8211; <strong>&#8220;ALT<\/strong>&#8220;\u009d + &#8220;<strong>SHIFT<\/strong>&#8220;\u009d and access key.<\/li>\n<li><strong>Firefox 3.0<\/strong> &#8211; <strong>&#8220;ALT<\/strong>&#8220;\u009d + &#8220;<strong>SHIFT<\/strong>&#8220;\u009d + access key and the<strong>&#8220;ENTER&#8221;<\/strong>\u009d key are required. I finally personally tested Firefox 3.o on Vista Basic and sometimes you need to hit &#8220;<strong>ENTER<\/strong>&#8220;\u009d and other times you don&#8217;t. (<strong>UPDATED<\/strong>)<\/li>\n<li><strong>Opera<\/strong> &#8211; the user presses &#8220;<strong>SHIFT<\/strong>&#8220;\u009d + &#8220;<strong>ESC<\/strong>&#8220;\u009d followed by the access key (without &#8220;<strong>ALT<\/strong>&#8220;\u009d). Doing this will display the list of access keys over the current web page.<\/li>\n<\/ul>\n<h3>MAC<\/h3>\n<ul>\n<li><strong>Firefox 2.0<\/strong> -&#8220;<strong>CTRL<\/strong>&#8220;\u009d + access key.<\/li>\n<li><strong>Firefox 3.0<\/strong> &#8211; this has been changed so that the key combination only focuses on the link, &#8220;<strong>CTRL<\/strong>&#8220;\u009d + access key and an &#8220;<strong>ENTER<\/strong>&#8221; is required after the access key combo. I have not personally tested Firefox 3.o as of yet.<\/li>\n<li><strong>Opera<\/strong> -&#8220;<strong>SHIFT<\/strong>&#8220;\u009d + &#8220;<strong>ESC<\/strong>&#8220;\u009d followed by the access key (without &#8220;<strong>ALT<\/strong>&#8220;\u009d). Doing this will display the list of access keys over the current web page.<\/li>\n<li><strong>Safari<\/strong> &#8211; &#8220;<strong>CNTL<\/strong>&#8220;\u009d + access key.<\/li>\n<\/ul>\n<h3>Example Key Combinations<\/h3>\n<p>Here is an example of three access key combinations you can use for IE:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.jfciii.com\/img\/textsize.jpg\" alt=\"Text sizing buttons with Small (S), Medium (M), and Large (L) options.\" \/><\/p>\n<ul>\n<li>&#8220;<strong>ALT<\/strong>&#8220;\u009d + &#8220;<strong>S<\/strong>&#8220;\u009d to change to small text<\/li>\n<li>&#8220;<strong>ALT<\/strong>&#8220;\u009d + &#8220;<strong>M<\/strong>&#8220;\u009d to change to medium text<\/li>\n<li>&#8220;<strong>ALT<\/strong>&#8220;\u009d + &#8220;<strong>L<\/strong>&#8220;\u009d to change to large text<\/li>\n<li>Finally you must click or press the &#8220;Enter &#8220;\u009d button.<\/li>\n<\/ul>\n<p>These key combinations are for IE on the PC and are used to set the text sizes that you want. You can make the text larger or smaller based on your preferences. This is what we have set up on my work website.<\/p>\n<p>From some of the reading I have done I noticed that people that are creating mobile websites and applications, when doing so they are using just the numbers to make it easier for their users to navigate the website and application.<\/p>\n<p>Please give these a try on your websites. I have access keys set up on <a title=\"John F Croston III website with access key examples\" href=\"http:\/\/jfciii.com\">my website<\/a>, so please try using them with different browsers. If you have any issues please leave a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Access keys allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples &hellip; <a href=\"http:\/\/www.jfciii.com\/blog\/2008\/08\/04\/how-to-set-up-and-use-access-keys\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140,23,141,92,40,30,21,25,42,41,26,89,87,27,20],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-access-key","category-accessibility","category-accesskey","category-adpative-technology","category-best-practices","category-content","category-css","category-design","category-design-patterns","category-design-principles","category-development","category-firefox","category-html","category-programming","category-web-standards"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":2,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":230,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions\/230"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}