in reply to Better keyboard-driven navigation, any?

I looked into adding keyboard shortcuts to PM, but the main problem was that these shortcuts conflicted with browser-specific shortcuts. The only shortcut keys possibly available seem to be the digits 0 to 9.

I haven't investigated if it is possible to add keyboard shortcuts by using JavaScript. If that's possible, then it would be possible to have a set of prepared hotkey-adders depending on the browser and language the user uses.

The one site I'm aware of which uses hotkeys (https://banking.postbank.de) uses Alt-1 etc. as hotkeys, so I assume there is no better cross-browser, cross-language way.

If somebody comes up with sensible mappings for the numbers and items they'd like to have alt keys for, these are very welcome if only as starting points for those who have the JavaScript ability but lack the keyboard usage.

Replies are listed 'Best First'.
Re^2: Better keyboard-driven navigation, any?
by clinton (Priest) on Jul 22, 2008 at 11:34 UTC

    The access key shortcut in FF3 on linux is Alt-Shift-KEY (see Access key for info about other browsers), and this is configurable in the about:config keys ui.key.*, (see the mozilla docs for more), so there should be no conflict with browser-specific shortcuts.

    Adding access keys is as simple as adding accesskey="$char" (for instance accesskey="Y" or accesskey="&")on any of these elements: A, AREA, BUTTON, INPUT, LABEL, LEGEND, and TEXTAREA.

    Update Added example with an entity as suggested by ysth

      Thank you for pointing out that recent versions of FireFox allow one to change the quite stupid default of having "access" keys conflict with the "menu" access navigation (Alt) that I use very frequently (Win32). I find it funny (in a sad way) that these "ui" settings have such an impressively bad UI (you have to read a separate document to find that the cryptic integer values can be looked up on yet another page where they are in hex so you have to convert the hex to decimal and then type it in).

      My personal CSS puts red striped borders around "access key" navigation items just so I'm likely to notice them since they mostly serve to trip up my normal keyboard navigation techniques (so I'm certainly not a fan of their use so far).

      I wish I knew a similar trick for IE as I still use IE for PerlMonks even though I use FireFox for most other surfing (IE has key features that make it much nicer for surfing PerlMonks for me than FF, though FF 3 finally caught up on soft hyphen support after a decade of IE following the standard so that is one less key PerlMonks feature once FF 3 stabilizes).

      I don't see how your suggested navigation features fit PerlMonks. What is "next post"? You must be navigating via some more specific scheme that you don't explain for "next post" to make sense in your mind. There is no general concept of "next post" at PerlMonks so offering such a navigation option so prominently would most likely just confuse a large fraction of monks who don't or just currently aren't reading PerlMonks in the manner you are assuming.

      "Vote ++"? Most places at PerlMonks present more than one node to vote on so a "Vote ++" navigation doesn't make much sense to me.

      Perhaps you are thinking of scrolling within a thread, but I don't think access keys can be used that way (without doing a lot of JavaScript...).

      For navigating between voting buttons, I've found that several browsers already have decent keyboard navigation for that. The voting buttons are often "adjacent" form elements so "go to next form input control" (etc.) often works well for selecting vote buttons.

      I have used Opera and it does define some nice keyboard navigation shortcuts. So I encourage you to try it. You can also configure FireFox to "search when you type" which makes it fast to jump to navigation links via a keyboard.

      So, your suggestions for navigation keys reinforces my impression that for them to be useful, people need to be able to customize them (there are only so many keys and there are lots of ways to navigate PerlMonks).

      I also think that, with browser defaults mostly stupid with regard to access keys, it is best to have few if any access keys by default (such as only numeric ones, as Corion mentioned). Users who have made the effort to change the stupid defaults should be allowed to make the effort to define where they want access keys (I am disappointed that this isn't just natively supported in browsers -- part of the point of browsers and HTML was supposed to be to give the client control over presentation and navigation, despite so many web "designers" seemingly thinking nearly the opposite these days).

      Perhaps the best next step would be to look for places where you want an accesss key and see if the HTML makes it easy or hard to use JavaScript to attach such for your own use. Suggesting specific things like adding a specific id="..." to a specific navigation point would allow such customization to become easier.

      - tye        

        "Vote ++"? Most places at PerlMonks present more than one node to vote on so a "Vote ++" navigation doesn't make much sense to me.

        That's the key. Why not? if you are reading a specific reply, you know which vote checkbox to press with the mouse to mark a vote, and you don't get confused by the other voting tokens on the page. Mouse navigation allows you to select the appropriate items directly according to the visual context.

        Key driven navigation is not so difficult. You can have a keystroke for voing (++, 0, --), but a previous keystroke has to establish the context for it, and that keystroke should scroll the context into view. Not that difficult with javascript.

        Browsers do have (customizable) keystrokes for elements, but "they" don't "know" about the layout of a page and about the contexts therein. So, links are stuffed into a single flat list which can be navigated via <Tab> - not a suitable navigation scheme, if you are way down a page reading replies and have to issue oodles of <Tab> strokes to finally get at the checkbox you want to address. There's no way I know of to select items which are not links.

        Luckily, PerlMonks pages are organized in a pretty consistent way, so it is easy to define contexts to which to navigate, and with javascript recording the current context, navigation inside that context is easy also. Which brings me back to your question further up:

        What is "next post"?

        Well, that depends on context ;) PerlMonks pages are divided into a header (links to sections a.k.a monkbar, introductory words to a page or the OP in a thread), a collection of items (links to nodes contained in sections, or actually posts a.k.a. replies to the OP in the header) and nodelets. Inside the collection of items is the "next post", which is a thing that is already on display but not selectable via a link (the "next post" in Newest Nodes would be the next section); and inside that "post" there may be a link collection which can be navigated with default browser keys.

        I think you get the idea... I've started to implement key navigation, and currently I'm looking at PM in terms of establishing contexts, sub-contexts and navigation. Viewing things that way might also reveal opportunities to unify and simplify things.

        --shmem

        _($_=" "x(1<<5)."?\n".q·/)Oo.  G°\        /
                                      /\_¯/(q    /
        ----------------------------  \__(m.====·.(_("always off the crowd"))."·
        ");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}
Re^2: Better keyboard-driven navigation, any?
by blazar (Canon) on Jul 22, 2008 at 14:47 UTC
    I haven't investigated if it is possible to add keyboard shortcuts by using JavaScript. If that's possible, then it would be possible to have a set of prepared hotkey-adders depending on the browser and language the user uses.

    I personally believe... err, no: I'm quite sure, a priori, that it's possible. They do every sort of freaking thing with JS! ;) But more precisely, I suspect that at least some amount of JS would be required to go beyond the bare functionality of the accesskey attribute: AIUI it only applies to some elements to the effect of simulating, say, a click on them; which is fine: the most notable example being the activation of a link or the selection of a checkbox. But one may want the pressing of a hotkey to be associated with e.g. the appropriate positioning of a box (a div) or somesuch, as in the examples I mention hereafter.

    The one site I'm aware of which uses hotkeys (https://banking.postbank.de) uses Alt-1 etc. as hotkeys, so I assume there is no better cross-browser, cross-language way.

    You should really try the aforementioned GR: I used too to read it mostly with the mouse. (Incidentally I think that amongst the many fundamentally useless "innovations" of modern popular pc machinery, one of the few actually useful ones is the mouse wheel.) But then I had that bed-Eee-mousepad difficulties and I started using keyboad shortcuts: you have e.g. "j" and "k" for next and previous article respectively, and "v" to open an article in a separate window/tab. If you're in a collapsed view, articles get open in sequence and positioned at the top of the view window... it's much like a specific client running on your computer. (As of the OP, I'm not asking PM that much...) I don't know how much of that is portable, but I'm confident that hardly can Google have made it incompatible with most major browsers...

    --
    If you can't understand the incipit, then please check the IPB Campaign.
Re^2: Better keyboard-driven navigation, any?
by shmem (Chancellor) on Jul 23, 2008 at 20:38 UTC
    I looked into adding keyboard shortcuts to PM, but the main problem was that these shortcuts conflicted with browser-specific shortcuts. The only shortcut keys possibly available seem to be the digits 0 to 9.

    No need to use keys with modifiers, so no conflict. The only thing one must be caring of is turning off the document.onkeypress callback whenever a text entry field or textarea gets focus -as far as javascript is involved,that is.

    Simple paging keys, say h,j,k,l and then some for sections, would do.

    update: I've put a prototype on my scratchpad. I know you have more JS fu than I and would appreciate a review :)

    --shmem

    _($_=" "x(1<<5)."?\n".q·/)Oo.  G°\        /
                                  /\_¯/(q    /
    ----------------------------  \__(m.====·.(_("always off the crowd"))."·
    ");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}

      If Opera key binding flexibility is not enticing enough, there is also a "Vimperator" plug-in for Firefox (to get vi-like key bindings). Modifier keys being eaten by Gtk and/or Firefox (GNU/Linux) UI did not let me enjoy the plug-in late last year.

      Often I find myself failing to get the effect of my Opera (home) key bindings in Firefox (work). Of course.

      (If I am complaining, perhaps I should try once more to customize the installed version of Opera at work ... mmm ... I see, installation is broken):

        I personally believe -to be completely fair- that I should mention that the first reaction to my root node was a /msg from moritz partially acknowledged in a reply of mine. "Partially," because he actually mentioned Vimperator too. For completeness, the pertinent part of my private reply to him was along the lines of: "quite funnily, I've just sent a mail to some 'friendmins' mentioning that I'm neither a {vi*,emacs}-ite, but a strange beast called a JEDer [...]" All in all, and again for completeness it's good that you eventually mentioned Vimperator in this thread.

        --
        If you can't understand the incipit, then please check the IPB Campaign.