{"id":114,"date":"2014-05-03T14:08:58","date_gmt":"2014-05-03T08:38:58","guid":{"rendered":"http:\/\/blog.wnohang.net\/?p=114"},"modified":"2014-05-03T18:43:21","modified_gmt":"2014-05-03T13:13:21","slug":"annoying-access-keys-web-pages","status":"publish","type":"post","link":"https:\/\/blog.wnohang.net\/index.php\/2014\/05\/03\/annoying-access-keys-web-pages\/","title":{"rendered":"Annoying access keys on web pages"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span><p><a href=\"http:\/\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/5463604427_8e7998ddcc_b.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/5463604427_8e7998ddcc_b.jpg\" alt=\"5463604427_8e7998ddcc_b\" width=\"1024\" height=\"683\" class=\"aligncenter size-full wp-image-123\" srcset=\"https:\/\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/5463604427_8e7998ddcc_b.jpg 1024w, https:\/\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/5463604427_8e7998ddcc_b-300x200.jpg 300w, https:\/\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/5463604427_8e7998ddcc_b-449x300.jpg 449w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><br \/>\nHTML access keys were introduced to improve web accessibility and<br \/>\nthey still seem to serve that purpose. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Access_key\">Wikipedia<\/a> defines them<br \/>\nas <em>&#8220;In a web browser, an access key or accesskey allows a computer user to<br \/>\nimmediately jump to a specific part of a web page via the keyboard.&#8221;<\/em> If you<br \/>\nview hover over the link, it should show up in tooltip; for a wikipedia page,<br \/>\nfor instance, the &#8216;view history&#8217; is mapped to &#8216;alt-shift-h&#8217; by default. In HTML<br \/>\nsource, you can see them as accesskey attribute.<\/p>\n<p>Having said that, they can be <strong>really<\/strong> annoying many a time. This is true<br \/>\nprimarily when you have bound that access key to a mapping in the browser or in<br \/>\na plugin or even to a global binding (say, with xbindkeys). What makes it even<br \/>\nmore worse is that on almost every site it is impossible to disable them.<br \/>\n<!--more--><\/p>\n<p>I use <a href=\"http:\/\/5digits.org\">Pentadactyl<\/a> and have a couple of key bindings for<br \/>\nvarious purposes. On pages like wordpress edit page, Jira issues page or a<br \/>\nwikipedia page, these access keys make my life hard.<\/p>\n<p>One specific key to note, from recent experience is <code>Ctrl-i<\/code>. I use it to invoke<br \/>\nexternal editor on forms. It is bound to italic function in wordpress text editor,<br \/>\nso <code>Ctrl-i<\/code> fails.<\/p>\n<p>Now, I didn&#8217;t want to change my dactyl bindings for this. To fix this, I reused<br \/>\nanother method I normally use to remove annoying junk from web pages (or many<br \/>\na time to remove content I don&#8217;t want to see normally). Pentadactyl allows<br \/>\none to specify custom stylesheets with <code>\"style -name...\"<\/code> command. More on that<br \/>\n<a href=\"http:\/\/5digits.org\/help\/pentadactyl\/styling.xhtml\">here<\/a>.<\/p>\n<p>Following is an example I use for imdb: <script\nsrc=\"https:\/\/gist.github.com\/ronin13\/564e0ed380d3344703b2.js\"><\/script><\/p>\n<p>What makes this solution good is that I can easily toggle styles without<br \/>\nreloading with something akin to <code>\"styletoggle -group style -name custom\"<\/code> where<br \/>\n<code>custom<\/code> is the name I gave for style. I have mapped that command to <code>A-s<\/code><br \/>\n(Alt-s) key.<\/p>\n<p>So, I think you can guess the solution probably now. I use similar CSS to hide<br \/>\nthe elements which have the accesskey attribute. If and when I want them I can<br \/>\neasily toggle them back.<\/p>\n<p>For my wordpress blog I have:<\/p>\n<pre><code class=\"css\">@-moz-document domain(blog.wnohang.net) {\n   #ed_toolbar input { display: none !important; }\n}\n<\/code><\/pre>\n<p>This allows me to write blog posts by invoking external editor without being<br \/>\ninterrupted by the access key. Note that, there may be an easier way to do this<br \/>\n(I am not a CSS\/HTML person!), but this is what I use since I tend to use custom<br \/>\nstylesheeets for many sites.<\/p>\n<p>There is another solution for this, it is to use a greasemonkey script. You can<br \/>\ncheck out an example <a href=\"https:\/\/blog.nelhage.com\/2010\/06\/disable-wordpress-edit-shortcuts\/\">here<\/a>. But I don&#8217;t use greasemonkey<br \/>\nand I don&#8217;t want to install another addon just for this (Firefox doesn&#8217;t scale<br \/>\nwith addons!).<\/p>\n<p><a href=\"https:\/\/www.flickr.com\/photos\/chintho\/5463604427\">Photo Credit<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes<\/span><\/span>HTML access keys were introduced to improve web accessibility and they still seem to serve that purpose. Wikipedia defines them as &#8220;In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific part of a web page via the keyboard.&#8221; If you view hover over the link, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.wnohang.net\/index.php\/2014\/05\/03\/annoying-access-keys-web-pages\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Annoying access keys on web pages&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[31,33,32,36,34,35,30],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-accesskey","tag-firefox","tag-html","tag-mapping","tag-pentadactyl","tag-stylesheet","tag-web"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3AlYV-1Q","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":11,"url":"https:\/\/blog.wnohang.net\/index.php\/2013\/05\/16\/org2blog\/","url_meta":{"origin":114,"position":0},"title":"Org2Blog","author":"Raghavendra","date":"May 16, 2013","format":false,"excerpt":"I finally installed wordpress on my site, replacing the old home-brewed 'blog'. The next question being why wordpress. Yes, there are many, and yes, Wordpress has a history of vulnerabilities. But, I went for Wordpress because I felt it was more feature complete and it didn't require more work from\u2026","rel":"","context":"In &quot;g-rant&quot;","block_context":{"text":"g-rant","link":"https:\/\/blog.wnohang.net\/index.php\/category\/g-rant\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294,"url":"https:\/\/blog.wnohang.net\/index.php\/2020\/05\/09\/haiku-and-muffin-top\/","url_meta":{"origin":114,"position":1},"title":"Haiku and Muffin Top","author":"Raghavendra","date":"May 9, 2020","format":false,"excerpt":"My interest in haikus was recently rekindled by James May\u2019s Our Man in Japan series in which he frequently bookends the episodes with a haiku of his own. Accordingly, I started searching for a haiku ebook on Libby (which if you are not using, you should give it a try!)\u2026","rel":"","context":"In &quot;musings&quot;","block_context":{"text":"musings","link":"https:\/\/blog.wnohang.net\/index.php\/category\/musings\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Haiku-and-the-muffin-top-e1588958394533.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Haiku-and-the-muffin-top-e1588958394533.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Haiku-and-the-muffin-top-e1588958394533.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":59,"url":"https:\/\/blog.wnohang.net\/index.php\/2014\/04\/30\/saving-form-data\/","url_meta":{"origin":114,"position":2},"title":"Saving form data in firefox","author":"Raghavendra","date":"April 30, 2014","format":false,"excerpt":"When commenting on sites, I have sometimes, seen that the commenting system just swallows the comment, or there is a browser crash, or a system one. In these cases it would be great if you can recover it somehow, particularly when you typed quite a bit. There are plugins for\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":126,"url":"https:\/\/blog.wnohang.net\/index.php\/2014\/05\/03\/twitter-setup\/","url_meta":{"origin":114,"position":3},"title":"My twitter setup","author":"Raghavendra","date":"May 3, 2014","format":false,"excerpt":"I have been using Twitter for a while under the handle randomsurfer. I tend to use web interface sometimes, but regularly I use the command-line\/ncurses interface. There are two main clients that I use regularly. One is ttytter which is a nice command-line client which offers advanced functionality such as\u2026","rel":"","context":"In \"bitlbee\"","block_context":{"text":"bitlbee","link":"https:\/\/blog.wnohang.net\/index.php\/tag\/bitlbee\/"},"img":{"alt_text":"2014-05-03-150028_1920x1060_scrot","src":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/2014-05-03-150028_1920x1060_scrot-1024x565.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/2014-05-03-150028_1920x1060_scrot-1024x565.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2014\/05\/2014-05-03-150028_1920x1060_scrot-1024x565.png?resize=525%2C300 1.5x"},"classes":[]},{"id":349,"url":"https:\/\/blog.wnohang.net\/index.php\/2022\/12\/11\/weekend-with-chatgpt\/","url_meta":{"origin":114,"position":4},"title":"Weekend with ChatGPT","author":"Raghavendra","date":"December 11, 2022","format":false,"excerpt":"A few days ago, OpenAI released a chat-based model called\u00a0ChatGPT\u00a0and provided an interface for users to interact with. ChatGPT is a form of conversational AI where you can ask questions or have a conversation with a bot backed by a model. As per the announcement - The dialogue format makes\u2026","rel":"","context":"In \"ai\"","block_context":{"text":"ai","link":"https:\/\/blog.wnohang.net\/index.php\/tag\/ai\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-11-at-20.11.10.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":334,"url":"https:\/\/blog.wnohang.net\/index.php\/2020\/05\/22\/gossips-in-distributed-systems-physalia\/","url_meta":{"origin":114,"position":5},"title":"Gossips in Distributed Systems:  Physalia","author":"Raghavendra","date":"May 22, 2020","format":false,"excerpt":"I often take notes and jot down observations when I read academic\/industry papers. \u00a0 Thinking of a name for this series \u2018Gossips in Distributed Systems\u2019 seemed apt to me, inspired by the gossip protocol with which peers in these systems communicate with each other which mimics the spread of ideas\u2026","rel":"","context":"In \"availability\"","block_context":{"text":"availability","link":"https:\/\/blog.wnohang.net\/index.php\/tag\/availability\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-22-at-4.40.40-PM.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-22-at-4.40.40-PM.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-22-at-4.40.40-PM.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-22-at-4.40.40-PM.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/blog.wnohang.net\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-22-at-4.40.40-PM.png?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":12,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":130,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions\/130"}],"wp:attachment":[{"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wnohang.net\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}