diff --git a/css/styles.scss b/css/styles.scss
index dc5e7b629..8e7dfd55e 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -9,15 +9,23 @@
 	padding: 10px;
 	opacity: .6;
 
-	&,
-	img {
-		cursor: pointer;
-	}
-
-	&.hasNotifications,
 	&:hover,
 	&:focus {
+		opacity: 1;
+	}
+
+	&.hasNotifications {
 		opacity: 1 !important;
+
+		&:hover,
+		&:focus {
+			opacity: .6 !important;
+		}
+	}
+
+	&,
+	img {
+		cursor: pointer;
 	}
 }
 
diff --git a/src/App.vue b/src/App.vue
index 1b890e7ee..c4309988e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,9 @@
 <template>
 	<div v-if="!shutdown" class="notifications">
-		<div class="notifications-button menutoggle" ref="button" :class="{ hasNotifications: notifications.length }">
+		<div class="notifications-button menutoggle" ref="button" :class="{ hasNotifications: notifications.length }"
+			tabindex="0" role="button"
+			aria-label="t('notifications', 'Notifications')"
+			aria-haspopup="true" aria-controls="notification-container" aria-expanded="false">
 			<img class="svg" alt="" ref="icon" :title="t('notifications', 'Notifications')" :src="iconPath">
 		</div>
 		<div class="notification-container"  ref="container">