diff --git a/aio/src/app/custom-elements/contributor/contributor.component.ts b/aio/src/app/custom-elements/contributor/contributor.component.ts
index 95e9c144a85..8cb18d60dd1 100644
--- a/aio/src/app/custom-elements/contributor/contributor.component.ts
+++ b/aio/src/app/custom-elements/contributor/contributor.component.ts
@@ -14,7 +14,7 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
             <div class="contributor-image"
                  [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
                  <div class="contributor-info">
-                     <a *ngIf="person.bio" mat-button class="info-item">
+                     <a *ngIf="person.bio" mat-button class="info-item" tabindex="0">
                          View Bio
                      </a>
                      <a *ngIf="person.twitter" mat-icon-button class="info-item icon"
@@ -30,7 +30,8 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
             </div>
         </div>
 
-        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)" (keyup.enter)="flipCard(person)">
+        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)" (keyup.enter)="flipCard(person)"
+             tabindex="0">
             <h3>{{person.name}}</h3>
             <p class="contributor-bio">{{person.bio}}</p>
         </div>
diff --git a/aio/src/styles/2-modules/contributor/_contributor.scss b/aio/src/styles/2-modules/contributor/_contributor.scss
index ecd9a3e3da0..15f10fd9f69 100644
--- a/aio/src/styles/2-modules/contributor/_contributor.scss
+++ b/aio/src/styles/2-modules/contributor/_contributor.scss
@@ -26,6 +26,7 @@ aio-contributor {
   transition: all .3s;
 
   @media (hover) {
+    &:focus-within,
     &:hover {
       transform: translate3d(0,-3px,0);
       box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);