Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Keyboard navigation for accessability help please

Posted by: tk=lm2408 Jan 31 2017, 03:23 AM

Hi,

I'm trying to help out a friend that has special needs and would like an internet home page with her favorite links easily accessible. I have started building a page that uses the arrow keys to navigate and I'm trying to get the enter key to follow the links the same as if you were left clicking the links.

I have the arrow keys working fine, but it doesn't seem to focus the link that it's on. I can move to the link I want, but pressing the enter key doesn't work. If i press tab then enter the links work, but I'm trying to avoid the extra key press. She's happy with the layout, but I need to fix the enter key issue.

Below is the html, css and js. Any help would be most appreciated.

Html

CODE

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="style.css">

<script src="spatial_navigation.js"></script>

<script src="test.js"></script>

</head>
<body>

<div class="topbar">
stuff
</div>

<div id="container">
<div id="leftbox">
<ul tabindex="0">

<li class="focusable" tabindex="-1">
<a href="java script:history.go(-1)"> Go Back </a></li>

<li class="focusable" tabindex="-1">
<a href="search">Search Engines </a></li>

<li class="focusable" tabindex="-1">
<a href="time table">Time Table </a></li>
</ul>

</div>

<div id="rightbox">

<ul>
<li class="focusable" tabindex="-1">
<img src="google.ico" class="ico">
<a href="Google.com">Google</a></li>


<li class="focusable" tabindex="-1">
<img src="yahoo.ico" class="ico">
<a href="Yahoo">Yahoo</a></li>


<li class="focusable" tabindex="-1">
<img src="bookstore.ico" class="ico">
<a href="book store">Book Store</a></li>


<li class="focusable" tabindex="-1">
<img src="Music.ico" class="ico">
<a href="folder2/index.html">Music</a></li>


<li class="focusable" tabindex="-1">
<img src="videos.ico" class="ico">
<a href="videos">Videos</a></li>
</ul>

</div>
</div>

</body>
</html>




css
CODE

@charset "utf-8";

BODY
{background-color: #cacaca;  background-image: url("background.jpg");}


.leftbox .focusable, .focusable {
width: 200px;
  height: 50px; line-height: 50px;}

.rightbox .focusable {



}

.focusable:focus a:link {

color : #ffffff;
background: linear-gradient(to bottom,#52b152 33%,#008a00 67%);
}

.focusable:focus a:hover {

color : #ffffff;
background: linear-gradient(to bottom,#52b152 33%,#008a00 67%);
}

.topbar {height: 60px;}
.ico {width: 28px; float: left; padding-right: 10px; padding-left: 10px; padding-bottom: 0px; padding-top: 10px}


/* --------------------- */
#leftbox {
width : 20%;
font-size : 14px;
float: left;
}

#leftbox ul {
font-size: 26px;
list-style : none;
margin : 0;
padding : 0;
border : none;
}

#leftbox li {
padding-bottom: 4px;
margin : 0;
font-family: "sans serif";
}

#leftbox li a {
display : block;
border-radius: 10px;
background-color : #4c607f;
color : #ffffff;
text-decoration : none;
width : 100%;
padding-left: 10px;
}

#leftbox li a:hover {
background : #262626;
color : #ffffff;
}

/* --------------------- */
#rightbox {
width : 70%;
font-size : 26px;
float: right;
height: 400px;
overflow: auto;
margin-right: 70px;
white-space: nowrap;
overflow-x: hidden;
background:rgba(0,0,0, 0.3);

border: solid 1px #000000;
overflow: -moz-scrollbars-none;
}

#rightbox ul {
list-style : none;
margin : 0;
padding : 0px;
border : none;
}

#rightbox li {
margin: 0;
font-family: "sans serif";
font-size: 28px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
border-bottom: solid 1px #000;
}

#rightbox li a {
display : block;
color : #eeeeee;
text-decoration : none;
width : 100%;
padding-left: 10px;

}



and the javascript that is supposed to make it all happen is available online at:
https://github.com/luke-chang/js-spatial-navigation/blob/master/spatial_navigation.js

Thank you for your time and any help you can provide.
Greg

Posted by: pandy Jan 31 2017, 04:06 AM

How does the config part of the script you actually use look?

I move this to the client side scripting forum.

Posted by: tk=lm2408 Jan 31 2017, 04:18 AM

QUOTE(pandy @ Jan 31 2017, 07:06 PM) *

How does the config part of the script you actually use look?

I move this to the client side scripting forum.


This is at the top of the spatial navigation script:

CODE

  /************************/
  /* Global Configuration */
  /************************/
  // Note: an <extSelector> can be one of following types:
  // - a valid selector string for "querySelectorAll" or jQuery (if it exists)
  // - a NodeList or an array containing DOM elements
  // - a single DOM element
  // - a jQuery object
  // - a string "@<sectionId>" to indicate the specified section
  // - a string "@" to indicate the default section
  var GlobalConfig = {
    selector: '',           // can be a valid <extSelector> except "@" syntax.
    straightOnly: false,
    straightOverlapThreshold: 0.5,
    rememberSource: false,
    disabled: false,
    defaultElement: '',     // <extSelector> except "@" syntax.
    enterTo: '',            // '', 'last-focused', 'default-element'
    leaveFor: null,         // {left: <extSelector>, right: <extSelector>,
                            //  up: <extSelector>, down: <extSelector>}
    restrict: 'self-first', // 'self-first', 'self-only', 'none'
    tabIndexIgnoreList:
      'a, input, select, textarea, button, iframe, [contentEditable=true]',
    navigableFilter: null
};

  /*********************/
  /* Constant Variable */
  /*********************/
  var KEYMAPPING = {
    '37': 'left',
    '38': 'up',
    '39': 'right',
    '40': 'down'
  };

  var REVERSE = {
    'left': 'right',
    'up': 'down',
    'right': 'left',
    'down': 'up'
  };

  var EVENT_PREFIX = 'sn:';
  var ID_POOL_PREFIX = 'section-';

  /********************/
  /* Private Variable */
  /********************/
  var _idPool = 0;
  var _ready = false;
  var _pause = false;
  var _sections = {};
  var _sectionCount = 0;
  var _defaultSectionId = '';
  var _lastSectionId = '';
  var _duringFocusChange = false;






Does that help? Unfortunately I know just enough javascript to get myself into trouble, but not enough to get out of it again. smile.gif

Posted by: pandy Jan 31 2017, 04:37 AM

It's above my head too, but aren't you supposed to fill things in, for example here.

CODE
selector: '',           // can be a valid <extSelector> except "@" syntax.


The script doesn't do a thing for me. No arrow keys. But if I tab to the links ENTER works as usual.

Is there any documentation for this script? I didn't find any.

Posted by: pandy Jan 31 2017, 04:40 AM

Yes there is. But I'm not sure I understand it. unsure.gif
https://github.com/luke-chang/js-spatial-navigation/blob/master/README.md#configuration

Posted by: tk=lm2408 Jan 31 2017, 04:59 AM

QUOTE(pandy @ Jan 31 2017, 07:40 PM) *

Yes there is. But I'm not sure I understand it. unsure.gif
https://github.com/luke-chang/js-spatial-navigation/blob/master/README.md#configuration


I don't understand it either. I can navigate around the page with the cursor keys, but it's like it doesn't have focus. If I use the arrow keys to get to the link I want and then press tab and then enter it will work as expected, but if I just use the arrow keys and then enter it does nothing. Very confused. I thought this would be a whole lot easier. I'm going to have another look at the readme and try to figure out how it works. I would have thought there would be a rather simple js script to do this kind of thing.

Anyway thank you very much.
Greg

Ohh sorry my bad. I forgot the test.js. It should work with this either in the head or extrenal:

CODE

        window.addEventListener('load', function() {
        SpatialNavigation.init();
        SpatialNavigation.add({
          selector: 'li, .focusable'
        });
        SpatialNavigation.makeFocusable();
        SpatialNavigation.focus();
      });

Posted by: pandy Jan 31 2017, 05:09 AM

Let's see if someone else has a better understanding.

Posted by: Christian J Jan 31 2017, 08:57 AM

QUOTE(tk=lm2408 @ Jan 31 2017, 09:23 AM) *

I have started building a page that uses the arrow keys to navigate and I'm trying to get the enter key to follow the links the same as if you were left clicking the links.

The "classic" Opera browser (only version 12.x and older) had this functionality built in, so it could be used on all web pages. Hold down Shift and the Arrow keys to move around freely between links, and press Enter to open the link.

The Vivaldi browser has something similar, I don't know how well it works yet but you may want to check it out: https://vivaldi.com/ (I can't find anything in their own documentation, but it's also known as Spatial Navigation).

Posted by: pandy Jan 31 2017, 10:04 AM

QUOTE(tk=lm2408 @ Jan 31 2017, 10:59 AM) *

Ohh sorry my bad. I forgot the test.js. It should work with this either in the head or extrenal:

CODE

        window.addEventListener('load', function() {
        SpatialNavigation.init();
        SpatialNavigation.add({
          selector: 'li, .focusable'
        });
        SpatialNavigation.makeFocusable();
        SpatialNavigation.focus();
      });



Sorry from me too. I didn't notice you posted that. Yeah, with that it works as you say.

I notice the links still work with ENTER if I tab to them. But not when I've used the arrow keys. Are you sure it's supposed to work with ENTER?

Posted by: Christian J Jan 31 2017, 12:44 PM

QUOTE
SpatialNavigation.add({
selector: 'li, .focusable'
});

The above seems to make LI elements focusable, not links. If you change it back to

CODE
SpatialNavigation.add({
selector: 'a, .focusable'
});

and change the HTML to

CODE
<li>
<a href="search" class="focusable" tabindex="-1">Search Engines </a></li>

(and so on), and the CSS to

CODE
a.focusable:focus {
color : #ffffff;
background: linear-gradient(to bottom,#52b152 33%,#008a00 67%);
}

a.focusable:hover {
color : #ffffff;
background: linear-gradient(to bottom,#52b152 33%,#008a00 67%);
}

(perhaps with some more tweaks in the CSS) it seems to work.

Posted by: tk=lm2408 Feb 1 2017, 12:21 AM

Hi Chrisitan,

Perfect thank you so much!!!! It's working now.
Thank you to you and Pandy for your time and the help. You've made my day.

Greg

Posted by: pandy Feb 1 2017, 04:33 AM

Hm. Wonder how it's intended to work though. blink.gif

Posted by: Christian J Feb 1 2017, 08:07 AM

QUOTE(tk=lm2408 @ Feb 1 2017, 06:21 AM) *

Hi Chrisitan,

Perfect thank you so much!!!! It's working now.
Thank you to you and Pandy for your time and the help. You've made my day.

Greg

You're welcome!

Posted by: Christian J Feb 1 2017, 08:16 AM

QUOTE(pandy @ Feb 1 2017, 10:33 AM) *

Hm. Wonder how it's intended to work though. blink.gif

The same as Vivaldi (I think) and classic Opera. Don't tell me you still haven't tried this superb feature? blink.gif

The script the OP uses only works on your own web pages, but you might be able to install it as a browser user script (through Greasemonkey in Firefox, IIRC) and make it work on all web pages. You also need to remove the ".focusable" selector in the script, since that doesn't exist on others' pages.

Posted by: pandy Feb 1 2017, 08:23 AM

I certainly have not. cool.gif

I meant how the script was supposed to work as it was before you edited it.

Posted by: Christian J Feb 1 2017, 10:51 AM

The sample in the documentation used links. No idea why the OP changed it to LI elements.

Posted by: pandy Feb 1 2017, 12:36 PM

Oh. I didn't notice that.

Posted by: tk=lm2408 Feb 2 2017, 02:11 AM

I used li simply because that's what I already had as scratch code for the page and stupidly it didn't even cross my mind to use standard links first to see how it worked.

I had been trying loads of different things before I asked here, but as Christian pointed out, it doesn't work with li's so not matter how much I mucked with it there's no way it would have worked.

It's working great now though. Thank you I really appreciate your time and effort smile.gif

Posted by: tk=lm2408 Feb 17 2017, 08:46 PM

Sorry I had a problem but I fixed it.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)