diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index 0b633a5b408..0d4025f35b6 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -42,18 +42,27 @@ class Item extends PureComponent {
 
   state = {
     loaded: false,
+    keyPlay: false,
   };
 
+  handlePlay = (e) => {
+    e.target.play();
+  }
+
+  handlePause = (e) => {
+    e.target.pause();
+    e.target.currentTime = 0;
+  }
+
   handleMouseEnter = (e) => {
     if (this.hoverToPlay()) {
-      e.target.play();
+      this.handlePlay(e);
     }
   };
 
   handleMouseLeave = (e) => {
     if (this.hoverToPlay()) {
-      e.target.pause();
-      e.target.currentTime = 0;
+      this.handlePause(e);
     }
   };
 
@@ -71,8 +80,7 @@ class Item extends PureComponent {
 
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
       if (this.hoverToPlay()) {
-        e.target.pause();
-        e.target.currentTime = 0;
+        this.handlePause(e)
       }
       e.preventDefault();
       onClick(index);
@@ -81,6 +89,21 @@ class Item extends PureComponent {
     e.stopPropagation();
   };
 
+  handleKeyPress = (e) => {
+    const child = e.target.children[0]
+    if (e.code === "Space" || e.code === "Enter"){
+      this.keyPlay = !this.keyPlay;
+      if (this.keyPlay) {
+        this.handlePlay({target: child});
+      } else {
+        this.handlePause({target: child});
+      }
+    } else if (e.code === "Tab"){
+      this.keyPlay = false;
+      this.handlePause({target: child});
+    }
+  }
+
   handleImageLoad = () => {
     this.setState({ loaded: true });
   };
@@ -162,8 +185,9 @@ class Item extends PureComponent {
       badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
 
       thumbnail = (
-        <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
+        <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })} tabIndex={autoPlay ? '-1' : '0'} onKeyDown={this.handleKeyPress}>
           <video
+            tabIndex='-1'
             className='media-gallery__item-gifv-thumbnail'
             aria-label={description}
             title={description}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f0380de5bf8..edd989f3e9b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -6296,7 +6296,8 @@ a.status-card {
 .media-gallery {
   box-sizing: border-box;
   margin-top: 8px;
-  overflow: hidden;
+
+  // overflow: hidden;
   border-radius: 8px;
   position: relative;
   width: 100%;
@@ -6363,6 +6364,11 @@ a.status-card {
   overflow: hidden;
   position: relative;
   width: 100%;
+
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+    outline-offset: -2px;
+  }
 }
 
 .media-gallery__item-gifv-thumbnail {