The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Keyboard navigation for accessability help please
tk=lm2408
post Jan 31 2017, 03:23 AM
Post #1


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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:
Spatial navigation

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

This post has been edited by tk=lm2408: Jan 31 2017, 03:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2017, 04:06 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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

I move this to the client side scripting forum.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Jan 31 2017, 04:18 AM
Post #3


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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

This post has been edited by tk=lm2408: Jan 31 2017, 04:26 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2017, 04:37 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2017, 04:40 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



Yes there is. But I'm not sure I understand it. unsure.gif
https://github.com/luke-chang/js-spatial-na...d#configuration
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Jan 31 2017, 04:59 AM
Post #6


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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-na...d#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();
      });


This post has been edited by tk=lm2408: Jan 31 2017, 05:06 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2017, 05:09 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



Let's see if someone else has a better understanding.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 31 2017, 08:57 AM
Post #8


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 31 2017, 10:04 AM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 31 2017, 12:44 PM
Post #10


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 1 2017, 12:21 AM
Post #11


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2017, 04:33 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



Hm. Wonder how it's intended to work though. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 1 2017, 08:07 AM
Post #13


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 1 2017, 08:16 AM
Post #14


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2017, 08:23 AM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



I certainly have not. cool.gif

I meant how the script was supposed to work as it was before you edited it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 1 2017, 10:51 AM
Post #16


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



The sample in the documentation used links. No idea why the OP changed it to LI elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 1 2017, 12:36 PM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,772
Joined: 9-August 06
Member No.: 6



Oh. I didn't notice that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 2 2017, 02:11 AM
Post #18


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tk=lm2408
post Feb 17 2017, 08:46 PM
Post #19


Newbie
*

Group: Members
Posts: 19
Joined: 31-January 17
Member No.: 26,289



Sorry I had a problem but I fixed it.

This post has been edited by tk=lm2408: Feb 17 2017, 09:32 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th December 2017 - 07:19 PM