nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Keyboard Navigation '-' key not working

JoanneMcGraw

On ArcGIS Online (and my own application unfortunately), make the map element active. You will find that most of the keyboard navigation is working as documented but the '-' button in the main part of the keyboard to zoom out is not. On the Numeric keypad, the '+', '-' and arrow keys work as documented. In the main part of the keyboard, the '+' and arrow keys work, but the '-' key doesn't. This is problematic when working on a keyboard without a Numeric keypad as my colleague does (and really the only reason we noticed this).

Cheers,
jtm

Finde mehr Beiträge mit dem Tag

Accepted answers

JoanneMcGraw

Here in Canada, all federal government web sites are required to provide keyboard access to web pages. See http://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines "The landmark 2010/2012 Jodhan decision has caused the Canadian Federal government to require all online web pages, documents and videos available externally and internally to meet the accessibility requirements of WCAG 2.0." One of those requirements is the ability to navigate the components in a page with only the keyboard.

To address this, we've implemented our own handler for the Shift-'+' and '-' on the main keyboard for the two browsers we are required to support (IE and FF). It provides the necessary "Accessibility" standards to pass our legal responsibilities in this respect.

My colleague's keyboard, btw, is a wireless Logitech for his desktop. There are no little numbers printed next to the letters on the appropriate keys as one would typically see on a laptop, unfortunately.

It should be noted that the keyCode to listen for is different in different browsers for the same symbol/character, among other things including those noted by geos_rfleet above. There's a good article that talks about keyboard events at: "http://unixpapa.com/js/key.html" (http://unixpapa.com/js/key.html). It's not 100% correct but certainly identifies some of the things that need to be thought about if anyone out there has a mind to implement same.

Cheers
jtm

All comments

JoanneMcGraw

__Rich_

Numlock would only be available if the user has a numeric keypad on their keyboard.

If they do not...? (and that is really the point of this question)...if they do not, how do they get access to keyboard navigation? And, really, why wouldn't the '+' and '-' keys in the main keyboard work by default anyway?

Having said all that, I'm not really that concerned about it. It's a good post to have kicking around, though, just in case anyone else thinks, as we did, that there was a problem with the JSAPI.

Cheers,
jtm

Was only partially serious...does anyone use a keyboard for anything other than text entry these days anyway? 😛

You'll find most (if not all??) laptops have a numlock button somewhere and if you look closely you'll see the little numbers printed next to the letters on the appropriate keys.

The key presses are probably being detected using the keycodes 107/109...pressing the minus key on the 'main' keyboard raises a different keycode...one that's not being checked for...detecting a plus on the 'main' keyboard is trickier (but not impossible) because, on some keyboards, it requires two keys to be used together.

JoanneMcGraw

Numlock would only be available if the user has a numeric keypad on their keyboard.

If they do not...? (and that is really the point of this question)...if they do not, how do they get access to keyboard navigation? And, really, why wouldn't the '+' and '-' keys in the main keyboard work by default anyway?

Having said all that, I'm not really that concerned about it. It's a good post to have kicking around, though, just in case anyone else thinks, as we did, that there was a problem with the JSAPI.

Cheers,
jtm

__Rich_

Isn't this a problem for people whose keyboard's don't have a numeric keyboard (like my colleague's)?

Use numlock?

JoanneMcGraw

We were working in Firefox 16 where we are able to simply use Shift-'+' to zoom in. I wasn't aware this was an anomaly, but have just checked IE9 and see that the Shift-'+' doesn't do the same trick there. Although, in both Firefox and IE9 both arrow keys do the trick (i.e., those in the numeric keypad and those in the main keyboard).

Isn't this a problem for people whose keyboard's don't have a numeric keyboard (like my colleague's)?

In those cases, there would be no keyboard navigation provided by default, contrary to the documentation which suggests users should be able to "Use + key to zoom in a level" and "Use - key to zoom out a level". How would they know that that is only the '+' or '-' key on the numeric keyboard and not the one they see on the main keyboard? Particularly if they don't have a numeric keypad on their keyboard? It would just seem like a bug...as it did to us.

Cheers,
jtm

JohnGravois

i ran a quick test in both Chrome and IE9 on my Windows 7 machine with the following test page and for me only the +/- on the numeric keypad can be used to zoom the map. even if i hold down SHIFT and click the +/= button on the main keyboard, the map does not zoom in.

how are you getting the map to zoom in using the + on the main keyboard?

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.