diff --git a/src/featherlight.gallery.css b/src/featherlight.gallery.css
index 71a75ecd..97840409 100644
--- a/src/featherlight.gallery.css
+++ b/src/featherlight.gallery.css
@@ -37,9 +37,10 @@
 }
 
 
-.featherlight-next span,
-.featherlight-previous span {
-	display: none;
+.featherlight-next a,
+.featherlight-previous a {
+	display: inline-block;
+	opacity: 0.3;
 	position: absolute;
 
 	top: 50%;
@@ -60,16 +61,19 @@
 	font-style: normal;
 	font-weight: normal;
 }
-.featherlight-next span {
+.featherlight-next a {
 	right: 5%;
 	left: auto;
 }
 
-
-.featherlight-next:hover span,
-.featherlight-previous:hover span {
-	display: inline-block;
-}
+.featherlight-next:hover a,
+.featherlight-previous:hover a,
+.featherlight-next a:focus,
+.featherlight-previous a:focus,
+.featherlight-next a:active,
+.featherlight-previous a:active {
+	opacity: 1;
+ }
 
 .featherlight-swipe-aware .featherlight-next,
 .featherlight-swipe-aware .featherlight-previous {
@@ -94,8 +98,8 @@
 	.featherlight-previous:hover {
 		background: none;
 	}
-	.featherlight-next span,
-	.featherlight-previous span {
+	.featherlight-next a,
+	.featherlight-previous a {
 		display: block;
 	}
 }
@@ -114,8 +118,8 @@
 		right: 85%;
 	}
 
-	.featherlight-next span,
-	.featherlight-previous span {
+	.featherlight-next a,
+	.featherlight-previous a {
 		margin-top: -30px;
 		font-size: 40px;
 	}
diff --git a/src/featherlight.gallery.js b/src/featherlight.gallery.js
index 70ca5919..f7c4910d 100644
--- a/src/featherlight.gallery.js
+++ b/src/featherlight.gallery.js
@@ -62,8 +62,8 @@
 					}
 
 					self.$instance.find('.'+self.namespace+'-content')
-						.append(self.createNavigation('previous'))
-						.append(self.createNavigation('next'));
+						.prepend(self.createNavigation('previous'))
+						.prepend(self.createNavigation('next'));
 
 					return _super(event);
 			},
@@ -148,10 +148,10 @@
 
 		createNavigation: function(target) {
 			var self = this;
-			return $('<span title="'+target+'" class="'+this.namespace+'-'+target+'"><span>'+this[target+'Icon']+'</span></span>').click(function(evt){
+			return $('<span title="'+target+'" class="'+this.namespace+'-'+target+'"><a href="#" aria-label="' + target + '">'+this[target+'Icon']+'</a></span>').on('click keypress', (function (evt) {
 				$(this).trigger(target+'.'+self.namespace);
 				evt.preventDefault();
-			});
+			}));
 		}
 	});
 
diff --git a/src/featherlight.js b/src/featherlight.js
index e4e093de..44f5c9d3 100644
--- a/src/featherlight.js
+++ b/src/featherlight.js
@@ -590,7 +590,7 @@
 					return $(elem).attr('tabindex');
 				});
 
-				this._$previouslyWithTabIndex.add(this._$previouslyTabbable).attr('tabindex', -1);
+				this._$previouslyWithTabIndex.add(this._$previouslyTabbable).not("[title='previous'] a").not("[title='next'] a").attr('tabindex', -1);
 
 				if (document.activeElement.blur) {
 					document.activeElement.blur();