diff --git a/src/app/application.js b/src/app/application.js
index edd47ffd01..f9f1d0936f 100644
--- a/src/app/application.js
+++ b/src/app/application.js
@@ -817,27 +817,29 @@ dwv.App = function () {
       stage.getActiveLayerGroup().getActiveViewLayer().getViewController();
     var size = viewController.getImageSize();
     if (event.ctrlKey) {
-      if (event.keyCode === 37) { // crtl-arrow-left
-        if (size.moreThanOne(3)) {
-          viewController.decrementIndex(3);
-        }
-      } else if (event.keyCode === 38) { // crtl-arrow-up
-        if (viewController.canScroll()) {
-          viewController.incrementScrollIndex();
-        }
-      } else if (event.keyCode === 39) { // crtl-arrow-right
-        if (size.moreThanOne(3)) {
-          viewController.incrementIndex(3);
-        }
-      } else if (event.keyCode === 40) { // crtl-arrow-down
-        if (viewController.canScroll()) {
-          viewController.decrementScrollIndex();
+      if (event.shiftKey) {
+        if (event.key === 'ArrowLeft') { // crtl-shift-arrow-left
+          if (size.moreThanOne(3)) {
+            viewController.decrementIndex(3);
+          }
+        } else if (event.key === 'ArrowUp') { // crtl-shift-arrow-up
+          if (viewController.canScroll()) {
+            viewController.incrementScrollIndex();
+          }
+        } else if (event.key === 'ArrowRight') { // crtl-shift-arrow-right
+          if (size.moreThanOne(3)) {
+            viewController.incrementIndex(3);
+          }
+        } else if (event.key === 'ArrowDown') { // crtl-shift-arrow-down
+          if (viewController.canScroll()) {
+            viewController.decrementScrollIndex();
+          }
         }
-      } else if (event.keyCode === 89) { // crtl-y
+      } else if (event.key === 'y') { // crtl-y
         undoStack.redo();
-      } else if (event.keyCode === 90) { // crtl-z
+      } else if (event.key === 'z') { // crtl-z
         undoStack.undo();
-      } else if (event.code === 'Space') { // crtl-space
+      } else if (event.key === ' ') { // crtl-space
         for (var i = 0; i < stage.getNumberOfLayerGroups(); ++i) {
           stage.getLayerGroup(i).setShowCrosshair(
             !stage.getLayerGroup(i).getShowCrosshair()
diff --git a/src/tools/draw.js b/src/tools/draw.js
index 40aca13180..365370f2a1 100644
--- a/src/tools/draw.js
+++ b/src/tools/draw.js
@@ -387,8 +387,10 @@ dwv.tool.Draw = function (app) {
     }
     var konvaLayer;
 
-    // press delete key
-    if (event.keyCode === 46 && shapeEditor.isActive()) {
+    // press delete or backspace key
+    if ((event.key === 'Delete' ||
+      event.key === 'Backspace') &&
+      shapeEditor.isActive()) {
       // get shape
       var shapeGroup = shapeEditor.getShape().getParent();
       konvaLayer = shapeGroup.getLayer();
@@ -404,7 +406,7 @@ dwv.tool.Draw = function (app) {
     }
 
     // escape key: exit shape creation
-    if (event.keyCode === 27 && tmpShapeGroup !== null) {
+    if (event.key === 'Escape' && tmpShapeGroup !== null) {
       konvaLayer = tmpShapeGroup.getLayer();
       // reset temporary shape group
       tmpShapeGroup.destroy();
diff --git a/tests/pacs/viewer.js b/tests/pacs/viewer.js
index 5856698b63..a49a6164be 100644
--- a/tests/pacs/viewer.js
+++ b/tests/pacs/viewer.js
@@ -541,7 +541,7 @@ function setupToolsCheckboxes() {
       if (!event.ctrlKey &&
         !event.altKey &&
         !event.shiftKey &&
-        event.keyCode === char) {
+        event.key === char) {
         input.click();
       }
     };
@@ -568,7 +568,8 @@ function setupToolsCheckboxes() {
     toolsDiv.appendChild(label);
 
     // keyboard shortcut
-    window.addEventListener('keydown', getKeyCheck(key.charCodeAt(0), input));
+    console.log('key', key, key[0]);
+    window.addEventListener('keydown', getKeyCheck(key[0].toLowerCase(), input));
   }
 }