Use <button type='button'> instead of <a href='#'> for accessibility issues

demo/demo.css

@@ -29,6 +29,19 @@ h2 {
   margin-bottom: 40px;
   }
 
+button {
+  border: 0;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  background: transparent;
+  }
+
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
 #wrapper {
   padding: 20px;
   }
@@ -62,7 +75,6 @@ p,h3,h4,pre {
   list-style: none;
   margin: 0 auto 50px;
   max-width: 540px;
-  padding: 10px 0;
   text-align: center;
   width: 100%;
   }
@@ -73,22 +85,18 @@ p,h3,h4,pre {
   margin-right: 1px;
   }
 
-.rslides_tabs a {
-  width: auto;
-  line-height: 20px;
+.rslides_tabs button {
   padding: 9px 20px;
-  height: auto;
-  background: transparent;
-  display: inline;
+  line-height: 20px;
+  color: #fff;
   }
 
 .rslides_tabs li:first-child {
   margin-left: 0;
   }
 
-.rslides_tabs .rslides_here a {
+.rslides_tabs .rslides_here button {
   background: rgba(255,255,255,.1);
-  color: #fff;
   font-weight: bold;
   }
 
@@ -207,21 +215,26 @@ h3 {
   right: 0;
   }
 
-#slider3-pager a {
-  display: inline-block;
+#slider3-pager {
+  padding: 9px;
 }
 
-#slider3-pager img {
-  float: left;
+#slider3-pager li {
+  display: inline;
+  padding: 0 6px;
 }
 
-#slider3-pager .rslides_here a {
+#slider3-pager button {
+  padding: 0;
+}
+
+#slider3-pager .rslides_here button {
   background: transparent;
   box-shadow: 0 0 0 2px #666;
 }
 
-#slider3-pager a {
-  padding: 0;
+#slider3-pager img {
+  vertical-align: bottom;
 }
 
 @media screen and (max-width: 600px) {

demo/demo.html

@@ -84,9 +84,9 @@ <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
 
     <!-- Slideshow 3 Pager -->
     <ul id="slider3-pager">
-      <li><a href="#"><img src="images/1_thumb.jpg" alt=""></a></li>
-      <li><a href="#"><img src="images/2_thumb.jpg" alt=""></a></li>
-      <li><a href="#"><img src="images/3_thumb.jpg" alt=""></a></li>
+      <li><button type="button"><img src="images/1_thumb.jpg" alt=""></button></li>
+      <li><button type="button"><img src="images/2_thumb.jpg" alt=""></button></li>
+      <li><button type="button"><img src="images/3_thumb.jpg" alt=""></button></li>
     </ul>
 
 

responsiveslides.css

@@ -20,12 +20,10 @@
 
 .rslides li:first-child {
   position: relative;
-  display: block;
   float: left;
   }
 
 .rslides img {
-  display: block;
   height: auto;
   float: left;
   width: 100%;

responsiveslides.js

@@ -185,7 +185,7 @@
             var n = i + 1;
             tabMarkup +=
               "<li>" +
-              "<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
+              "<button type='button' class='" + slideClassPrefix + n + "'>" + n + "</button>" +
               "</li>";
           });
           $pager.append(tabMarkup);
@@ -213,7 +213,7 @@
 
         // If we have a pager, we need to set up the selectTab function
         if (settings.pager || settings.manualControls) {
-          $tabs = $pager.find('a');
+          $tabs = $pager.find('button');
 
           // Select pager item
           selectTab = function (idx) {
@@ -271,7 +271,6 @@
         // Pager click event handler
         if (settings.pager || settings.manualControls) {
           $tabs.bind("click", function (e) {
-            e.preventDefault();
 
             if (!settings.pauseControls) {
               restartCycle();
@@ -308,8 +307,8 @@
         // Navigation
         if (settings.nav) {
           var navMarkup =
-            "<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
-            "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
+            "<button type='button' class='" + navClass + " prev'>" + settings.prevText + "</button>" +
+            "<button type='button' class='" + navClass + " next'>" + settings.nextText + "</button>";
 
           // Inject navigation
           if (options.navContainer) {
@@ -323,7 +322,6 @@
 
           // Click event handler
           $trigger.bind("click", function (e) {
-            e.preventDefault();
 
             var $visibleClass = $("." + visibleClass);