diff --git a/public/css/styles.css b/public/css/styles.css
index 4e313fc..6b4ce71 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -36,7 +36,7 @@ body {
       align-items: center;
       height: 100%;
       text-decoration: none; }
-      body div.carousel a:hover {
+      body div.carousel a:hover, body div.carousel a:focus {
         background: blueviolet;
         color: #f2eb8c; }
     body div.carousel div.promoted-tag, body div.carousel h3 {
@@ -124,6 +124,9 @@ body {
           text-decoration: none;
           text-overflow: ellipsis;
           margin-bottom: 30px; }
+          body div.page-contents div.description div.articles a:focus article, body div.page-contents div.description div.articles a:hover article {
+            background: blueviolet;
+            color: #f2eb8c; }
           body div.page-contents div.description div.articles a article {
             word-wrap: break-word;
             width: 90%;
@@ -208,7 +211,7 @@ body {
         text-decoration: none;
         color: #f2eb8c;
         margin: 0; }
-        body div.page-contents nav a:hover {
+        body div.page-contents nav a:hover, body div.page-contents nav a:focus {
           background: #f2eb8c;
           color: blueviolet; }
         body div.page-contents nav a.selected {
@@ -219,9 +222,9 @@ body {
         padding-bottom: 9px; }
         body div.page-contents nav a.menu-expand .open-menu-icon-hover {
           display: none; }
-        body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover {
+        body div.page-contents nav a.menu-expand:hover .open-menu-icon-hover, body div.page-contents nav a.menu-expand:focus .open-menu-icon-hover {
           display: block; }
-        body div.page-contents nav a.menu-expand:hover .open-menu-icon {
+        body div.page-contents nav a.menu-expand:hover .open-menu-icon, body div.page-contents nav a.menu-expand:focus .open-menu-icon {
           display: none; }
     body div.page-contents nav.mobile-shortcuts {
       position: fixed;
diff --git a/public/css/styles.scss b/public/css/styles.scss
index a552a1a..539c2f2 100644
--- a/public/css/styles.scss
+++ b/public/css/styles.scss
@@ -54,7 +54,7 @@ body {
         align-items: center;
         height: 100%;
         text-decoration: none;
-        &:hover {
+        &:hover,&:focus {
             background: $background_div;
             color: $color_div;
         }
@@ -171,14 +171,21 @@ body {
         }
 
         a {
-          min-height: 90%;
-          width: 100%;
-          display: block;
-          text-decoration: none;
-          text-overflow: ellipsis;
-          margin-bottom: 30px;
+           min-height: 90%;
+           width: 100%;
+           display: block;
+           text-decoration: none;
+           text-overflow: ellipsis;
+           margin-bottom: 30px;
 
-          article {
+           &:focus,&:hover {
+             //outline: red solid 3px;
+             article {
+               background: $background_div;
+               color: $color_div;
+             }
+           }
+           article {
             word-wrap: break-word;
             width: 90%;
             height: 90%;
@@ -314,7 +321,7 @@ body {
         color: $color_div;
         margin: 0;
 
-        &:hover {
+        &:hover,&:focus {
           background: $color_div;
           color: $background_div;
         }
@@ -333,7 +340,7 @@ body {
           display: none;
         }
 
-        &:hover {
+        &:hover,&:focus {
           .open-menu-icon-hover {
             display: block;
           }