2.1.1 Keyboard problem solving

In this post, I'm going to explain how I solved the problem of my photography portfolio not working with keyboard navigation.

Previous/next buttons

If I was navigating by keyboard, I would expect the next tab after the menu to take me to the previous and then the next buttons that sit half way up my photo. So I had a look at the html for those and this is what I found:

<a class="prev" onclick="plusSlides(-1)">Prev</a>
<a class="next" onclick="plusSlides(1)">Next</a>

For those that don't speak fluent html, the <a> tag is what tells the internet browser that the text or image that follows is going to be a hyperlink. 

Initially, I just saw that they begin with an <a> tag and thought that should be fine but I did notice that the <a> tags don't have an href element and that is odd. Maybe that is the problem.

I wanted to be sure that this was the problem, so I googled it and found one of the top solutions took me to the W3 site, which I know to be a reliable source of information. I looked at example 1 and decided to try putting a blank href element in... so now my code looks like this:

<a class="prev" href="#" onclick="plusSlides(-1)">Prev</a>
<a class="next" href="#" onclick="plusSlides(1)">Next</a>

... and lo and behold... it worked.

At that point, I had a play with some of the css too, to make sure the hover and focus for those two buttons looked right and fitted with my overall theme. I decided to leave the hover as it was but change the focus so that it matched my other links. So now you can see that when I tab to the Next button, it highlights in brown so the user can see where they are. Now they can hit Enter and it will take them to the next image.

Screenshot of my portfolio with the next button highlighted in brown with a dark border, to show that the user has tabbed to it.

Thumbnail images

I thought this would also be easy to solve, as it was a similar issue. I went down my code to the thumbnail section and here is an example of my code:

<div class="column">
<img class="demo cursor" src="Images/Portfolio/Dog01.jpg" alt="Black Labrador lifting the foot plate of a stairlift. Her nose is under the plate, ready to flip it up." style="width: 100%;" onclick="currentSlide(1)"/>
</div>

I noticed straightaway, that there is no <a> tag at all. No wonder you can't tab to it. Currently, the Javascript is doing all the work. So I went with the obvious and popped an <a href="#"></a> around each thumbnail. It worked in terms of being able to tab through but when you clicked Enter, it didn't do anything. 

Whilst I was playing with this, I got irritated because after each click of the Next button, it went back to the beginning of the page. This made me think I should change tack.

Final solution

I decided that most people, especially if they are using keyboard navigation, are going to find it easier to navigate with the prev/next buttons, rather than the thumbnails, provided you stay within the gallery. So I decided to make that work better instead. The thumbnails are still there but not tabbable (is that even a word?)

So, to make the prev/next buttons stay within the gallery view, I tweaked the code a little. 

First, I added a bookmark id to the gallery div, like this:

<div class="gallery" id="gallery">

Then, I added the gallery bit to the #, like this:

<a class="prev" href="#gallery" onclick="plusSlides(-1)">Prev</a>
<a class="next" href="#gallery" onclick="plusSlides(1)">Next</a>

I tested it and it worked. I had a mini-panic, thinking I had ended up with a keyboard trap that got me stuck in the gallery, with no way out, but it was fine... you just keep tabbing past the next button and you go back to the top.

Now I'll go and fix that code in all the other pages and then make it live.

Comments

Popular posts from this blog

For anyone who's ever wondered what's inside a computer

Time for change

2.4.3 Focus order & 2.4.7 Focus visible