diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js
index 3ef10ca2..98c67c04 100644
--- a/cypress/integration/1.simple.spec.js
+++ b/cypress/integration/1.simple.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel, checkGuttersAriaValueTexts } from '../support/splitUtils'
 
 context('Simple split example page tests', () => {
   const W = 1076
@@ -14,6 +14,8 @@ context('Simple split example page tests', () => {
   it('Display initial state', () => {
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
+    checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views')
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])
   })
 
   it('Change direction', () => {
@@ -24,55 +26,125 @@ context('Simple split example page tests', () => {
   })
 
   it('Move gutter horizontally', () => {
-    moveGutter('.ex-percent .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5])
 
-    moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])
   })
 
   it('Change direction & move gutter vertically', () => {
     cy.get('.btns > .btn').click()
 
-    moveGutter('.ex-percent .as-split-gutter', 0, 0, 60)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 60)
     checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [146.6875, 142.296875])
 
-    moveGutter('.ex-pixel .as-split-gutter', 0, 0, 60)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 60)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [180, 0, 100])
   })
 
   it('Move gutter horizontally and move it back', () => {
-    moveGutter('.ex-percent .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5])
 
-    moveGutter('.ex-percent .as-split-gutter', 0, -280, 0)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, -280, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
 
-    moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])
 
-    moveGutter('.ex-pixel .as-split-gutter', 0, -280, 0)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -280, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
   })
 
   it('Move gutter horizontally to max, change direction', () => {
-    moveGutter('.ex-percent .as-split-gutter', 0, -1000, 0)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, -1000, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065])
 
-    moveGutter('.ex-pixel .as-split-gutter', 0, -1000, 0)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -1000, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [0, 894, 160])
 
     cy.get('.btns > .btn').click()
 
     checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
-    moveGutter('.ex-percent .as-split-gutter', 0, 0, 1000)
+    moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 1000)
 
     checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 118, 160])
-    moveGutter('.ex-pixel .as-split-gutter', 0, 0, 1000)
+    moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 1000)
 
     cy.get('.btns > .btn').click()
 
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [1065, 0])
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [278, 776, 0])
   })
+
+  it('Move gutter horizontally by using keyboard', () => {
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'leftarrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [269.5, 795.5])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['25 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'rightarrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent'])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'leftarrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [70, 824, 160])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'rightarrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [620, 274, 160])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['620 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])
+  })
+
+  it('Move gutter vertically by using keyboard', () => {
+    cy.get('.btns > .btn').click()
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'downarrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [136.703125, 152.296875])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'uparrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.703125, 202.28125])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [289, 0])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['100 percent'])
+
+    moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
+    checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent'])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'downarrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [170, 0, 110])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'uparrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [120, 48, 110])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 168, 110])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['0 pixel', null])
+
+    moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [278, 0, 0])
+    checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['278 pixel', null])
+  })
 })
diff --git a/cypress/integration/2.minmax.spec.js b/cypress/integration/2.minmax.spec.js
index 35936662..6edbcff3 100644
--- a/cypress/integration/2.minmax.spec.js
+++ b/cypress/integration/2.minmax.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGuttersAriaValueTexts } from '../support/splitUtils'
 
 context('Min & max splits example page tests', () => {
   const W = 1070
@@ -31,7 +31,7 @@ context('Min & max splits example page tests', () => {
   })
 
   it('Move gutters having restrictMove off [PERCENT MODE]', () => {
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 0, 200, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, 200, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -40,7 +40,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [204.796875, 506.390625, 304.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -49,7 +49,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -58,7 +58,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 1, 100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, 100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 508, 204.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -67,7 +67,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 408, 304.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -76,7 +76,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 308, 404.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -85,7 +85,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [206.390625, 304.796875, 504.796875])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -94,7 +94,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
+    moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
     checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508])
 
     checkAreasClasses('.ex-percent > as-split > .as-split-area', [
@@ -105,7 +105,7 @@ context('Min & max splits example page tests', () => {
   })
 
   it('Move gutters having restrictMove off [PIXEL MODE]', () => {
-    moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0)
+    moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])
 
     checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
@@ -115,7 +115,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: ['as-min'], notHaveTo: ['as-max'] },
     ])
 
-    moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0)
+    moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250])
 
     checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
@@ -125,7 +125,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: ['as-min'], notHaveTo: ['as-max'] },
     ])
 
-    moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0)
+    moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250])
 
     checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
@@ -135,7 +135,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: ['as-min'], notHaveTo: ['as-max'] },
     ])
 
-    moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0)
+    moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 386, 150, 350])
 
     checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
@@ -145,7 +145,7 @@ context('Min & max splits example page tests', () => {
       { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
     ])
 
-    moveGutter('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0)
+    moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0)
     checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 336, 150, 400])
 
     checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
@@ -159,6 +159,95 @@ context('Min & max splits example page tests', () => {
   it('Move gutters having restrictMove on [PERCENT MODE]', () => {})
 
   it('Move gutters having restrictMove on [PIXEL MODE]', () => {})
+
+  it('Move gutters having restrictMove off by keyboard [PERCENT MODE]', () => {
+    moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'leftarrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [254.796875, 456.390625, 304.796875])
+    checkAreasClasses('.ex-percent > as-split > .as-split-area', [
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+    ])
+    checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['25 percent', '45 percent'])
+
+    moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875])
+    checkAreasClasses('.ex-percent > as-split > .as-split-area', [
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] },
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+    ])
+    checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '50 percent'])
+
+    moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875])
+    checkAreasClasses('.ex-percent > as-split > .as-split-area', [
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+    ])
+    checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '40 percent'])
+
+    moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'leftarrow')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 356.390625, 354.796875])
+    checkAreasClasses('.ex-percent > as-split > .as-split-area', [
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+    ])
+    checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '35 percent'])
+
+    moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'pagedown')
+    checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508])
+    checkAreasClasses('.ex-percent > as-split > .as-split-area', [
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] },
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] },
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+    ])
+    checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '30 percent'])
+  })
+
+  it('Move gutters having restrictMove off by keyboard [PIXEL MODE]', () => {
+    moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'leftarrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [150, 436, 150, 250])
+    checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: ['as-min', 'as-max'], notHaveTo: [] },
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] }
+    ])
+    checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['150 pixel', null, '150 pixel'])
+
+    moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])
+    checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: ['as-min', 'as-max'], notHaveTo: [] },
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] }
+    ])
+    checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])
+
+    moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 1, 2, 'leftarrow')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 286, 150, 350])
+    checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: ['as-min', 'as-max'], notHaveTo: [] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] }
+    ])
+    checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])
+
+    moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 2, 1, 'pageup')
+    checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])
+    checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
+      { haveTo: ['as-max'], notHaveTo: ['as-min'] },
+      { haveTo: [], notHaveTo: ['as-min', 'as-max'] },
+      { haveTo: ['as-min', 'as-max'], notHaveTo: [] },
+      { haveTo: ['as-min'], notHaveTo: ['as-max'] }
+    ])
+    checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])
+  })
 })
 
 function checkAreasClasses(sel, all) {
diff --git a/cypress/integration/3.nested.spec.js b/cypress/integration/3.nested.spec.js
index b645470d..fc2b5514 100644
--- a/cypress/integration/3.nested.spec.js
+++ b/cypress/integration/3.nested.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
 
 context('Nested splits example page tests', () => {
   const W = 1070
@@ -33,21 +33,21 @@ context('Nested splits example page tests', () => {
   })
 
   it('Move gutter horizontally 3 times and until maximum', () => {
-    moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, 280, 0)
 
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [706, 358.984375])
 
-    moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, -80, 0)
 
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [626.015625, 438.984375])
 
-    moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-gutter', 0, 700, 0)
 
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1065, 0])
   })
 
   it('Move nested split 1 multiple times', () => {
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'vertical',
@@ -57,7 +57,7 @@ context('Nested splits example page tests', () => {
       [186.015625, 65.984375, 125.984375],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'vertical',
@@ -68,7 +68,7 @@ context('Nested splits example page tests', () => {
     )
 
     // Move space smaller than gutter > move
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'vertical',
@@ -79,7 +79,7 @@ context('Nested splits example page tests', () => {
     )
 
     // Move space same as gutter > move
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'vertical',
@@ -90,7 +90,7 @@ context('Nested splits example page tests', () => {
     )
 
     // Move space bigger than gutter > move
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'vertical',
@@ -102,7 +102,7 @@ context('Nested splits example page tests', () => {
   })
 
   it('Move nested split 2 multiple times', () => {
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(2) > as-split',
       'vertical',
@@ -112,7 +112,7 @@ context('Nested splits example page tests', () => {
       [389, 0],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(2) > as-split',
       'vertical',
diff --git a/cypress/integration/4.sync.spec.js b/cypress/integration/4.sync.spec.js
index 64f88bb6..7c9ae5d0 100644
--- a/cypress/integration/4.sync.spec.js
+++ b/cypress/integration/4.sync.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
 
 context('Sync splits example page tests', () => {
   const W = 1076
@@ -40,7 +40,7 @@ context('Sync splits example page tests', () => {
   })
 
   it('Move gutter first split horizontally and check if others splits follow', () => {
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
@@ -66,7 +66,7 @@ context('Sync splits example page tests', () => {
       [546.25, 518.75],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
@@ -92,7 +92,7 @@ context('Sync splits example page tests', () => {
       [1065, 0],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
@@ -120,7 +120,7 @@ context('Sync splits example page tests', () => {
   })
 
   it('Move gutter second split horizontally and check if others splits follow', () => {
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
@@ -146,7 +146,7 @@ context('Sync splits example page tests', () => {
       [546.25, 518.75],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
@@ -172,7 +172,7 @@ context('Sync splits example page tests', () => {
       [1065, 0],
     )
 
-    moveGutter('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0)
+    moveGutterByMouse('.split-example > as-split > .as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0)
     checkSplitDirAndSizes(
       '.split-example > as-split > .as-split-area:nth-child(1) > as-split',
       'horizontal',
diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js
index 003b0395..2b716464 100644
--- a/cypress/integration/5.style.spec.js
+++ b/cypress/integration/5.style.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
 
 context('Custom split style example page tests', () => {
   const W = 1070
diff --git a/cypress/integration/7.click.spec.js b/cypress/integration/7.click.spec.js
index 6f029026..c8f0ed88 100644
--- a/cypress/integration/7.click.spec.js
+++ b/cypress/integration/7.click.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
 
 function checkEventCount({ dragStartCount, dragEndCount, gutterClickCount, gutterDblClickCount, transitionEndCount }) {
   if (dragStartCount !== undefined) {
@@ -70,7 +70,7 @@ context('Gutter click example page tests', () => {
 
   it('Mix gutter click and dragging', () => {
     // Try move gutter event if disabled
-    moveGutter('.as-split-gutter', 0, -100, 0)
+    moveGutterByMouse('.as-split-gutter', 0, -100, 0)
     // gutterClick should be fired same as normal click event since dragging is disabled.
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [264, 528, 264])
 
@@ -78,7 +78,7 @@ context('Gutter click example page tests', () => {
     cy.get('.btns button').eq(1).click()
 
     // Move gutter1
-    moveGutter('.as-split-gutter', 0, -100, 0)
+    moveGutterByMouse('.as-split-gutter', 0, -100, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [164, 628, 264])
     cy.wait(10)
 
@@ -101,7 +101,7 @@ context('Gutter click example page tests', () => {
     checkEventCount({ dragStartCount: 1, dragEndCount: 1, gutterClickCount: 2, transitionEndCount: 2 })
 
     // Move gutter2 to enlarge area3
-    moveGutter('.as-split-gutter', 1, -20, 0)
+    moveGutterByMouse('.as-split-gutter', 1, -20, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1036, 20])
 
     checkEventCount({ dragStartCount: 2, dragEndCount: 2, gutterClickCount: 2, transitionEndCount: 2 })
diff --git a/cypress/integration/9.geek.spec.js b/cypress/integration/9.geek.spec.js
index 10314fc5..43c92e47 100644
--- a/cypress/integration/9.geek.spec.js
+++ b/cypress/integration/9.geek.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
 
 context('Geek demo example page tests', () => {
   const W = 1076
@@ -79,30 +79,30 @@ context('Geek demo example page tests', () => {
       [27.875, 27.875, 27.875, 27.875, 27.875, 27.875, 27.875, 27.875],
     )
 
-    moveGutter('.as-split-gutter', 0, 0, -200)
-    moveGutter('.as-split-gutter', 1, 0, -200)
-    moveGutter('.as-split-gutter', 2, 0, -200)
-    moveGutter('.as-split-gutter', 3, 0, -200)
-    moveGutter('.as-split-gutter', 4, 0, -200)
-    moveGutter('.as-split-gutter', 5, 0, -200)
-    moveGutter('.as-split-gutter', 6, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 0, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 1, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 2, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 3, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 4, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 5, 0, -200)
+    moveGutterByMouse('.as-split-gutter', 6, 0, -200)
     checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 0, 223])
 
-    moveGutter('.as-split-gutter', 0, 0, 100)
-    moveGutter('.as-split-gutter', 1, 0, 100)
-    moveGutter('.as-split-gutter', 2, 0, 100)
-    moveGutter('.as-split-gutter', 3, 0, 100)
-    moveGutter('.as-split-gutter', 4, 0, 100)
-    moveGutter('.as-split-gutter', 5, 0, 100)
-    moveGutter('.as-split-gutter', 6, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 0, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 1, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 2, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 3, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 4, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 5, 0, 100)
+    moveGutterByMouse('.as-split-gutter', 6, 0, 100)
     checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 100, 123])
 
-    moveGutter('.as-split-gutter', 5, 0, 150)
-    moveGutter('.as-split-gutter', 4, 0, 150)
-    moveGutter('.as-split-gutter', 3, 0, 150)
-    moveGutter('.as-split-gutter', 2, 0, 150)
-    moveGutter('.as-split-gutter', 1, 0, 150)
-    moveGutter('.as-split-gutter', 0, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 5, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 4, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 3, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 2, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 1, 0, 150)
+    moveGutterByMouse('.as-split-gutter', 0, 0, 150)
     checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [100, 0, 0, 0, 0, 0, 0, 123])
 
     cy.get('.opts-prop .btn').contains('horizontal').click()
@@ -235,7 +235,7 @@ context('Geek demo example page tests', () => {
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263.5, 527, 263.5])
 
     // Move gutter 5px > move 5px
-    moveGutter('.split-example .as-split-gutter', 0, 5, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 5, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [268.484375, 522, 263.5])
 
     ///////////////////////////////////
@@ -243,19 +243,19 @@ context('Geek demo example page tests', () => {
     cy.get('.opts-prop').contains('Gutter step:').parent().contains('10').click()
 
     // Move gutter 5px > no move
-    moveGutter('.split-example .as-split-gutter', 0, 5, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 5, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [268.484375, 522, 263.5])
 
     // Move gutter 6px > move 10px
-    moveGutter('.split-example .as-split-gutter', 0, 6, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 6, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [278.5, 511.984375, 263.5])
 
     // Move gutter 15px > move 10px
-    moveGutter('.split-example .as-split-gutter', 0, 15, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 15, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [288.515625, 501.984375, 263.5])
 
     // Move gutter 16px > move 20px
-    moveGutter('.split-example .as-split-gutter', 0, 16, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 16, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5])
 
     ///////////////////////////////////
@@ -263,15 +263,15 @@ context('Geek demo example page tests', () => {
     cy.get('.opts-prop').contains('Gutter step:').parent().contains('50').click()
 
     // Move gutter 20px > nomove
-    moveGutter('.split-example .as-split-gutter', 0, 20, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 20, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5])
 
     // Move gutter 25px > nomove
-    moveGutter('.split-example .as-split-gutter', 0, 25, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 25, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [308.515625, 481.984375, 263.5])
 
     // Move gutter 26px > move 50px
-    moveGutter('.split-example .as-split-gutter', 0, 26, 0)
+    moveGutterByMouse('.split-example .as-split-gutter', 0, 26, 0)
     checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [358.515625, 431.96875, 263.5])
   })
 })
diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js
index 92cb3ede..01bfe9f2 100644
--- a/cypress/support/splitUtils.js
+++ b/cypress/support/splitUtils.js
@@ -1,4 +1,4 @@
-export function moveGutter(gutters, num, x, y) {
+export function moveGutterByMouse(gutters, num, x, y) {
   cy.get(gutters)
     .eq(num)
     .trigger('mousedown', { which: 1, clientX: 0, clientY: 0 })
@@ -13,6 +13,38 @@ export function moveGutter(gutters, num, x, y) {
   cy.wait(10)
 }
 
+export function moveGutterByKeyboard(gutters, num, numKeyPresses, keySequence) {
+  for (let i = 0; i < numKeyPresses; i++) {
+    cy.get(gutters)
+      .eq(num)
+      .focus()
+      .type(`{${keySequence}}`)
+    cy.wait(10)
+  }
+}
+
+export function checkGutterAriaLabel(gutters, num, ariaLabel) {
+  cy.get(gutters)
+    .eq(num)
+    .should('have.attr', 'aria-label')
+    .and('equal', ariaLabel)
+}
+
+export function checkGuttersAriaValueTexts(gutters, ariaValueTexts) {
+  cy.get(gutters)
+    .each(($gutter, index) => {
+      const ariaValueText = ariaValueTexts[index]
+      if (ariaValueText === null) {
+        cy.wrap($gutter)
+          .should('not.have.attr', 'aria-valuetext')
+      } else {
+        cy.wrap($gutter)
+          .should('have.attr', 'aria-valuetext')
+          .and('equal', ariaValueTexts[index])
+      }
+    })
+}
+
 //////////////////////////////////////////
 
 export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {
diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss
index 451b5325..74f850a8 100644
--- a/projects/angular-split/src/lib/component/split.component.scss
+++ b/projects/angular-split/src/lib/component/split.component.scss
@@ -8,6 +8,7 @@
   height: 100%;
 
   & > .as-split-gutter {
+    border: none;
     flex-grow: 0;
     flex-shrink: 0;
     background-color: #eeeeee;
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
index d2d1a39e..910a60da 100644
--- a/projects/angular-split/src/lib/component/split.component.ts
+++ b/projects/angular-split/src/lib/component/split.component.ts
@@ -19,7 +19,15 @@ import {
 import { Observable, Subscriber, Subject } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 
-import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes, IDefaultOptions } from '../interface'
+import {
+  IArea,
+  IPoint,
+  ISplitSnapshot,
+  IAreaSnapshot,
+  IOutputData,
+  IOutputAreaSizes,
+  IDefaultOptions,
+} from '../interface'
 import { SplitAreaDirective } from '../directive/split-area.directive'
 import {
   getInputPositiveNumber,
@@ -32,8 +40,9 @@ import {
   isUserSizesValid,
   pointDeltaEquals,
   updateAreaSize,
+  getKeyboardEndpoint,
 } from '../utils'
-import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token'
+import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token'
 
 /**
  * angular-split
@@ -71,17 +80,26 @@ import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token'
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: [`./split.component.scss`],
   template: ` <ng-content></ng-content>
-    <ng-template ngFor [ngForOf]="displayedAreas" let-index="index" let-last="last">
+    <ng-template ngFor [ngForOf]="displayedAreas" let-area="$implicit" let-index="index" let-last="last">
       <div
+        role="slider"
+        tabindex="0"
         *ngIf="last === false"
         #gutterEls
         class="as-split-gutter"
         [style.flex-basis.px]="gutterSize"
         [style.order]="index * 2 + 1"
-        (mousedown)="startDragging($event, index * 2 + 1, index + 1)"
-        (touchstart)="startDragging($event, index * 2 + 1, index + 1)"
+        (keydown)="startKeyboardDrag($event, index * 2 + 1, index + 1)"
+        (mousedown)="startMouseDrag($event, index * 2 + 1, index + 1)"
+        (touchstart)="startMouseDrag($event, index * 2 + 1, index + 1)"
         (mouseup)="clickGutter($event, index + 1)"
         (touchend)="clickGutter($event, index + 1)"
+        [attr.aria-label]="gutterAriaLabel"
+        [attr.aria-orientation]="direction"
+        [attr.aria-valuemin]="area.minSize"
+        [attr.aria-valuemax]="area.maxSize"
+        [attr.aria-valuenow]="area.size"
+        [attr.aria-valuetext]="getAriaAreaSizeText(area.size)"
       >
         <div class="as-split-gutter-icon"></div>
       </div>
@@ -188,6 +206,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
   @Input() gutterClickDeltaPx = 2
 
+  @Input() gutterAriaLabel: string
+
   get gutterDblClickDuration(): number {
     return this._gutterDblClickDuration
   }
@@ -530,7 +550,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
   }
 
-  public startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
+  public startKeyboardDrag(event: KeyboardEvent, gutterOrder: number, gutterNum: number) {
+    if (this.disabled === true || this.isWaitingClear === true) {
+      return
+    }
+
+    const endPoint = getKeyboardEndpoint(event, this.direction)
+    if (endPoint === null) {
+      return
+    }
+    this.endPoint = endPoint
+    this.startPoint = getPointFromEvent(event)
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.setupForDragEvent(gutterOrder, gutterNum)
+    this.startDragging()
+    this.drag()
+    this.stopDragging()
+  }
+
+  public startMouseDrag(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
     event.preventDefault()
     event.stopPropagation()
 
@@ -539,6 +580,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       return
     }
 
+    this.setupForDragEvent(gutterOrder, gutterNum)
+
+    this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
+    this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
+    this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))
+
+    this.ngZone.runOutsideAngular(() => {
+      this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.mouseDragEvent.bind(this)))
+      this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.mouseDragEvent.bind(this)))
+    })
+
+    this.startDragging()
+  }
+
+  private setupForDragEvent(gutterOrder: number, gutterNum: number) {
     this.snapshot = {
       gutterNum,
       lastSteppedOffset: 0,
@@ -580,23 +636,16 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) {
       return
     }
+  }
 
-    this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)))
-    this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)))
-    this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)))
-
-    this.ngZone.runOutsideAngular(() => {
-      this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)))
-      this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)))
-    })
-
+  private startDragging() {
     this.displayedAreas.forEach((area) => area.component.lockEvents())
 
     this.isDragging = true
     this.isWaitingInitialMove = true
   }
 
-  private dragEvent(event: MouseEvent | TouchEvent): void {
+  private mouseDragEvent(event: MouseEvent | TouchEvent): void {
     event.preventDefault()
     event.stopPropagation()
 
@@ -615,6 +664,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
       return
     }
 
+    this.drag()
+  }
+
+  private drag() {
     if (this.isWaitingInitialMove) {
       if (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
         this.ngZone.run(() => {
@@ -825,4 +878,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     }
     this.updateArea(comp, false, false)
   }
+
+  public getAriaAreaSizeText(size: number | null): string {
+    if (size === null) {
+      return null
+    }
+
+    return size.toFixed(0) + ' ' + this.unit
+  }
 }
diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts
index 3a45ffed..0ea95d8f 100644
--- a/projects/angular-split/src/lib/utils.ts
+++ b/projects/angular-split/src/lib/utils.ts
@@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core'
 
 import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface'
 
-export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
+export function getPointFromEvent(event: MouseEvent | TouchEvent | KeyboardEvent): IPoint {
   // TouchEvent
   if ((<TouchEvent>event).changedTouches !== undefined && (<TouchEvent>event).changedTouches.length > 0) {
     return {
@@ -17,6 +17,14 @@ export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
       y: (<MouseEvent>event).clientY,
     }
   }
+  // KeyboardEvent
+  else if ((<KeyboardEvent>event).currentTarget !== undefined) {
+    const gutterEl = event.currentTarget as HTMLElement
+    return {
+      x: gutterEl.offsetLeft,
+      y: gutterEl.offsetTop,
+    }
+  }
   return null
 }
 
@@ -24,6 +32,72 @@ export function pointDeltaEquals(lhs: IPoint, rhs: IPoint, deltaPx: number) {
   return Math.abs(lhs.x - rhs.x) <= deltaPx && Math.abs(lhs.y - rhs.y) <= deltaPx
 }
 
+export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal' | 'vertical'): IPoint | null {
+  // Return null if direction keys on the opposite axis were pressed
+  if (direction === 'horizontal') {
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'PageUp':
+      case 'PageDown':
+        break
+      default:
+        return null
+    }
+  }
+  if (direction === 'vertical') {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'PageUp':
+      case 'PageDown':
+        break
+      default:
+        return null
+    }
+  }
+
+  const gutterEl = event.currentTarget as HTMLElement
+  const offset = event.key === 'PageUp' || event.key === 'PageDown' ? 50 * 10 : 50
+  let offsetX = gutterEl.offsetLeft,
+    offsetY = gutterEl.offsetTop
+  switch (event.key) {
+    case 'ArrowLeft':
+      offsetX -= offset
+      break
+    case 'ArrowRight':
+      offsetX += offset
+      break
+    case 'ArrowUp':
+      offsetY -= offset
+      break
+    case 'ArrowDown':
+      offsetY += offset
+      break
+    case 'PageUp':
+      if (direction === 'vertical') {
+        offsetY -= offset
+      } else {
+        offsetX += offset
+      }
+      break
+    case 'PageDown':
+      if (direction === 'vertical') {
+        offsetY += offset
+      } else {
+        offsetX -= offset
+      }
+      break
+    default:
+      return null
+  }
+
+  return {
+    x: offsetX,
+    y: offsetY,
+  }
+}
+
 export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number {
   const rect = (<HTMLElement>elRef.nativeElement).getBoundingClientRect()
 
diff --git a/src/app/examples/simple-split/simple-split.component.ts b/src/app/examples/simple-split/simple-split.component.ts
index 60b91068..1b01ffed 100644
--- a/src/app/examples/simple-split/simple-split.component.ts
+++ b/src/app/examples/simple-split/simple-split.component.ts
@@ -25,7 +25,13 @@ import { AComponent } from '../../ui/components/AComponent'
       <sp-example-title [type]="exampleEnum.SIMPLE"></sp-example-title>
       <h5>Percent mode:</h5>
       <div class="split-example ex-percent">
-        <as-split unit="percent" [direction]="direction" (dragEnd)="dragEnd('percent', $event)" #split="asSplit">
+        <as-split
+          unit="percent"
+          [direction]="direction"
+          gutterAriaLabel="adjustable divider between two views"
+          (dragEnd)="dragEnd('percent', $event)"
+          #split="asSplit"
+        >
           <as-split-area size="30" #area1="asSplitArea">
             <h5>Initial size: <b>30%</b></h5>
             <h5>