diff --git a/common/lib/xmodule/xmodule/css/videoalpha/display.scss b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
index 3b40809fa3..15ed6fb3b0 100644
--- a/common/lib/xmodule/xmodule/css/videoalpha/display.scss
+++ b/common/lib/xmodule/xmodule/css/videoalpha/display.scss
@@ -133,7 +133,6 @@ div.videoalpha {
             line-height: 46px;
             padding: 0 lh(.75);
             text-indent: -9999px;
-            @include transition(background-color 0.75s linear 0s, opacity 0.75s linear 0s);
             width: 14px;
             background: url('../images/vcr.png') 15px 15px no-repeat;
             outline: 0;
@@ -150,7 +149,7 @@ div.videoalpha {
             &.play {
               background-position: 17px -114px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
@@ -158,7 +157,7 @@ div.videoalpha {
             &.pause {
               background-position: 16px -50px;
 
-              &:hover {
+              &:hover, &:focus {
                 background-color: #444;
               }
             }
@@ -382,7 +381,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:active, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -403,7 +402,7 @@ div.videoalpha {
           @include transition(none);
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -432,7 +431,7 @@ div.videoalpha {
           -webkit-font-smoothing: antialiased;
           width: 30px;
 
-          &:hover {
+          &:hover, &:focus {
             background-color: #444;
             color: #fff;
             text-decoration: none;
@@ -442,9 +441,9 @@ div.videoalpha {
             opacity: 0.7;
           }
 
-          background-color: #444;
-          color: #fff;
-          text-decoration: none;
+          background-color: inherit;
+          color: #797979;
+          text-decoration: inherit;
         }
       }
     }
@@ -513,12 +512,6 @@ div.videoalpha {
       z-index: 1;
     }
 
-    article.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
-        background-color: inherit;
-        color: #797979;
-        text-decoration: inherit;
-    }
-
     article.video-wrapper div.video-player-pre, article.video-wrapper div.video-player-post {
         height: 0px;
     }
diff --git a/lms/templates/videoalpha.html b/lms/templates/videoalpha.html
index 682c299e10..e0e0a6c0d9 100644
--- a/lms/templates/videoalpha.html
+++ b/lms/templates/videoalpha.html
@@ -1,82 +1,86 @@
 <%! from django.utils.translation import ugettext as _ %>
 
 % if display_name is not UNDEFINED and display_name is not None:
-  <h2> ${display_name} </h2>
+    <h2> ${display_name} </h2>
 % endif
 
 <div
-  id="video_${id}"
-      class="videoalpha"
+    id="video_${id}"
+    class="videoalpha"
 
-  % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
-  data-streams="${youtube_streams}"
-  % endif
+    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
+        data-streams="${youtube_streams}"
+    % endif
 
-  ${'data-sub="{}"'.format(sub) if sub else ''}
-      ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
-  % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
-  ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
-  ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
-  ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
-  % endif
+    ${'data-sub="{}"'.format(sub) if sub else ''}
+    ${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
 
-  data-caption-data-dir="${data_dir}"
-  data-show-captions="${show_captions}"
-  data-start="${start}"
-  data-end="${end}"
-  data-caption-asset-path="${caption_asset_path}"
-  data-autoplay="${autoplay}"
+    % if not settings.MITX_FEATURES['STUB_VIDEO_FOR_TESTING']:
+        ${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
+        ${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
+        ${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
+    % endif
+
+    data-caption-data-dir="${data_dir}"
+    data-show-captions="${show_captions}"
+    data-start="${start}"
+    data-end="${end}"
+    data-caption-asset-path="${caption_asset_path}"
+    data-autoplay="${autoplay}"
 >
-<div class="tc-wrapper">
-  <article class="video-wrapper">
-        <div class="video-player-pre"></div>
-    <section class="video-player">
-      <div id="${id}"></div>
-    </section>
-        <div class="video-player-post"></div>
-        <section class="video-controls">
-          <div class="slider"></div>
-            <div>
-                <ul class="vcr">
-                    <li><a class="video_control" href="#" title="${_('Play')}"></a></li>
-                    <li><div class="vidtime">0:00 / 0:00</div></li>
-                </ul>
-                <div class="secondary-controls">
-                    <div class="speeds">
-                        <a href="#">
-                            <h3>${_('Speed')}</h3>
-                            <p class="active"></p>
-                        </a>
-                        <ol class="video_speeds"></ol>
-                    </div>
-                    <div class="volume">
-                        <a href="#"></a>
-                        <div class="volume-slider-container">
-                            <div class="volume-slider"></div>
+    <div class="tc-wrapper">
+        <article class="video-wrapper">
+            <div class="video-player-pre"></div>
+
+            <section class="video-player">
+                <div id="${id}"></div>
+            </section>
+
+            <div class="video-player-post"></div>
+
+            <section class="video-controls">
+                <div class="slider" tabindex="0" title="Video position"></div>
+
+                <div>
+                    <ul class="vcr">
+                        <li><a class="video_control" href="#" tabindex="0" title="${_('Play')}"></a></li>
+                        <li><div class="vidtime">0:00 / 0:00</div></li>
+                    </ul>
+                    <div class="secondary-controls">
+                        <div class="speeds">
+                            <a href="#" tabindex="0" title="Speeds">
+                                <h3>${_('Speed')}</h3>
+                                <p class="active"></p>
+                            </a>
+                            <ol class="video_speeds"></ol>
                         </div>
+                        <div class="volume">
+                            <a href="#" tabindex="0" title="Volume"></a>
+                            <div class="volume-slider-container">
+                                <div class="volume-slider"></div>
+                            </div>
+                        </div>
+                        <a href="#" class="add-fullscreen" tabindex="0" title="${_('Fill browser')}">${_('Fill browser')}</a>
+                        <a href="#" class="quality_control" tabindex="0" title="${_('HD')}">${_('HD')}</a>
+
+                        <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
                     </div>
-                    <a href="#" class="add-fullscreen" title="${_('Fill browser')}">${_('Fill browser')}</a>
-                    <a href="#" class="quality_control" title="${_('HD')}">${_('HD')}</a>
-
-                    <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">Captions</a>
                 </div>
-            </div>
-        </section>
-  </article>
+            </section>
+        </article>
 
-      <ol class="subtitles"><li></li></ol>
-
-</div>
+        <ol class="subtitles" tabindex="0" title="Captions"><li></li></ol>
+    </div>
 </div>
 
 % if sources.get('main'):
-<div class="video-sources">
-  <p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
-</div>
+    <div class="video-sources">
+        <p>${_('Download video <a href="%s">here</a>.') % sources.get('main')}</p>
+    </div>
 % endif
 
 % if track:
-<div class="video-tracks">
-  <p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
-</div>
+    <div class="video-tracks">
+        <p>${_('Download subtitles <a href="%s">here</a>.') % track}</p>
+    </div>
 % endif