{"id":9365,"date":"2022-10-06T05:08:37","date_gmt":"2022-10-06T05:08:37","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9365"},"modified":"2022-10-06T05:08:37","modified_gmt":"2022-10-06T05:08:37","slug":"html-accesskey-attribute","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/html-accesskey-attribute\/","title":{"rendered":"HTML accesskey Attribute"},"content":{"rendered":"\n<p>The HTML&nbsp;accesskey&nbsp;attribute is a global attribute and specifies a shortcut key for activating\/focusing a specific element. The attribute value should consist of one printable character.<\/p>\n\n\n\n<p>In HTML4.1, the\u00a0accesskey\u00a0attribute can be only used with the following elements:\u00a0&lt;a>,\u00a0&lt;area>,\u00a0&lt;button>,\u00a0&lt;input>,\u00a0&lt;label>,\u00a0&lt;legend>, and\u00a0&lt;textarea>.<\/p>\n\n\n\n<p>In HTML5, this attribute can be used with any element.<\/p>\n\n\n\n<p>The way of accessing the shortcut key varies from browser to browser.<\/p>\n\n\n\n<p>When there is more than one element having the same accesskey, the behavior of the browser differs:<\/p>\n\n\n\n<ul><li>Google Chrome and Safari: The last element having the accesskey will be activated.<\/li><li>Opera: The first element having the accesskey will be activated.<\/li><li>Mozilla Firefox: The next element having the accesskey will be activated.<\/li><\/ul>\n\n\n\n<p>Besides poor browser support, there are other concerns with the&nbsp;accesskey&nbsp;attribute:<\/p>\n\n\n\n<ul><li>An accesskey value may cause some problems connected with assistive technology functionality, or a system and browser keyboard shortcut.<\/li><li>Some accesskey value may be missing on some keyboards, in particular when there is a matter of internationalization.<\/li><li>An accesskey value consisting of numbers may be unclear to those with cognitive concerns.<\/li><\/ul>\n\n\n\n<p>For these reasons, it\u2019s recommended not to use accesskey for multi-purpose websites and web apps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"syntax-4\">Syntax<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;tag accessKey=\"single_character\"&gt;&lt;\/tag&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-of-the-html-span-class-attribute-accesskey-span-attribute-6\">Example of the HTML&nbsp;accesskey&nbsp;attribute:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Title of the document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;a href=\"https:\/\/www.w3docs.com\/learn-html.html\" accesskey=\"h\"&gt;HTMLonline tutorial&lt;\/a&gt;\n    &lt;br\/&gt;\n    &lt;a href=\"https:\/\/www.w3docs.com\/learn-css.html\" accesskey=\"c\"&gt;CSS online tutorial&lt;\/a&gt;\n    &lt;br\/&gt;\n    &lt;a href=\"https:\/\/www.w3docs.com\/learn-git.html\" accesskey=\"g\"&gt;GIT online tutorial&lt;\/a&gt;\n    &lt;br\/&gt;\n    &lt;p&gt;Chrome, Safari, Opera 15+: &#91;ALT] + &lt;strong&gt;accesskey&lt;\/strong&gt;&lt;\/p&gt;\n    &lt;p&gt;Firefox: &#91;ALT] &#91;SHIFT] + &lt;strong&gt;accesskey&lt;\/strong&gt;&lt;\/p&gt;\n    &lt;p&gt;Opera prior version 15: &#91;SHIFT] &#91;ESC] + &lt;strong&gt;accesskey&lt;\/strong&gt;&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The HTML&nbsp;accesskey&nbsp;attribute is a global attribute and specifies a shortcut key for activating\/focusing a specific element. The attribute value should consist of one printable character. In HTML4.1, the\u00a0accesskey\u00a0attribute can be only used with the following elements:\u00a0&lt;a>,\u00a0&lt;area>,\u00a0&lt;button>,\u00a0&lt;input>,\u00a0&lt;label>,\u00a0&lt;legend>, and\u00a0&lt;textarea>. In HTML5, this attribute can be used with any element. The way of accessing the shortcut key varies [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9365"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9365"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9365\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}