How to Display Keyboard Shortcuts on a Web Page in Firefox

Using keyboard shortcuts or hotkeys can save you lot of time while navigating between and within open applications, dialog boxes, access menu items or while performing simple tasks like copy, paste etc.

Keyboard shortcuts also come in handy while browsing the internet. Lots of web pages showcase their shortcuts well while others go unnoticed. If you are using Firefox, a small CSS tweak can show which links on a web page have keyboard shortcuts.

Follow these simple steps to get the job done:

1. Hit “Start”  > “Run”.

2. Type %appdata%\Mozilla\Firefox\Profiles and press “OK”.

A new window showing the folder of your current profile will appear.

3. Open that folder and head into the folder named “chrome”.

4. Rename the file “userContent-example.css” to “userContent.css”.

5. Open the file in your favorite text editor and add the following code:

a[accesskey]:after,

button[accesskey]:after,

input[accesskey]:after,

label[accesskey]:after,

legend[accesskey]:after,

textarea[accesskey]:after

{

margin-left: 0.3em;

content: “[" attr(accesskey) "]“;

}

6. Save it and close the editor and then the window. Restart Firefox.

The code we just added will check the web page for all the HTML elements having an access key attribute and, if found, will display them beside the corresponding element.

Following two screenshots will make it clear. Before editing the codes, the Wikipedia page containing search result for the word ‘Google’ was like below. You can only see the keyboard shortcuts when you hover the mouse pointer on the HTML element.

But, after the CSS editing, all the keyboard shortcuts are shown as below.

Try this trick and experience smart and efficient browsing.