diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 8e893402d6292d..1ef192bdff041b 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -15,7 +15,7 @@
 		}
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		content: '';
 		position: absolute;
 		top: 0;
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
index c54cb535b8cb60..e42db735beb353 100644
--- a/components/toolbar/style.scss
+++ b/components/toolbar/style.scss
@@ -21,7 +21,7 @@
 		margin-left: 3px;
 	}
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		top: -4px;
 		right: -4px;
 		bottom: -4px;
diff --git a/editor/accessible-focus/index.js b/editor/accessible-focus/index.js
new file mode 100644
index 00000000000000..579b906bbd925b
--- /dev/null
+++ b/editor/accessible-focus/index.js
@@ -0,0 +1,24 @@
+// keyCodes for tab, space, left, up, right, down respectively
+const keyboardNavigationKeycodes = [ 9, 32, 37, 38, 39, 40 ];
+let keyboardNavigation = false;
+
+function accessibleFocus() {
+	document.addEventListener( 'keydown', function( event ) {
+		if ( keyboardNavigation ) {
+			return;
+		}
+		if ( keyboardNavigationKeycodes.indexOf( event.keyCode ) !== -1 ) {
+			keyboardNavigation = true;
+			document.documentElement.classList.add( 'has-accessible-focus' );
+		}
+	} );
+	document.addEventListener( 'mouseup', function() {
+		if ( ! keyboardNavigation ) {
+			return;
+		}
+		keyboardNavigation = false;
+		document.documentElement.classList.remove( 'has-accessible-focus' );
+	} );
+}
+
+export default accessibleFocus;
diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
index 7a0757046e2f25..5e39b457aa9ce5 100644
--- a/editor/block-switcher/style.scss
+++ b/editor/block-switcher/style.scss
@@ -13,7 +13,7 @@
 	margin: 3px;
 	padding: 6px;
 
-	&:focus:before {
+	.has-accessible-focus &:focus:before {
 		top: -3px;
 		right: -3px;
 		bottom: -3px;
diff --git a/editor/index.js b/editor/index.js
index 892323312d4ee1..52797469db529e 100644
--- a/editor/index.js
+++ b/editor/index.js
@@ -10,6 +10,7 @@ import { Provider as SlotFillProvider } from 'react-slot-fill';
 import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';
+import accessibleFocus from './accessible-focus';
 
 /**
  * Initializes and returns an instance of Editor.
@@ -25,6 +26,8 @@ export function createEditorInstance( id, post ) {
 		blocks: wp.blocks.parse( post.content.raw ),
 	} );
 
+	accessibleFocus();
+
 	wp.element.render(
 		<ReduxProvider store={ store }>
 			<SlotFillProvider>