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

Post a Comment

Popular posts from this blog

Articulate 360 - Storyline

Image
I've kept it fairly quiet but I've been looking for a new job for a few months now. Not that my old job isn't great, but I've always wanted to specialise more in e-learning and my main aim has been to get into content creation. E-learning is a growing industry, so there are many jobs out there. Of course, the vast majority are in London and I have no desire to move back there at all. The other sticking point though is a piece of software, that I have no experience of and is very expensive to acquire. Nearly all e-learning jobs want experience in Articulate 360 and specifically in Storyline. What is it? Storyline is a bit like PowerPoint in some ways. You have slides and you can combine different kinds of content with transitions and animations. However, in the words of one of my favourite films, "It is so much more than just" PowerPoint. You can bring in a whole level of user interaction that PowerPoint doesn't even begin to touch. When your project is...
Read more

Padlet

Image
I can't remember when I discovered Padlet but it has rapidly become one of my favourite tools for planning, thinking, mind-mapping, or whatever you prefer to call that. So here's a quick overview of Padlet and how to use it. Getting started Like most other free tools, you need to create an account and log in to create and access all your stuff. Then start creating. There are several different layouts, so have a play with them to see what you like.I find some better for certain tasks than others. In the top right corner, click on this sign to start a new Padlet. Then choose your template... My favourites are Canvas for mind-mapping and Shelf for categorising things. Then, you need to go through this set up guide. It appears on the right side of your screen. Depending on your choices, it can be really quick or quite laborious but when you've done, it will all look really good. If you want to change settings later, you can. I generally go for a calm, unclut...
Read more

Finding and using images online

Image
In my last post, I briefly touched on this subject. There are so many jobs where we may find ourselves searching for images online, that we want to include in some piece of work. When I was teaching, and making learning resources for my class, I frequently needed images to bring content to life. Can you imagine teaching children about life in Kenya without showing them any photographs or images of Kenya? Similarly, when preparing a PowerPoint presentation for a business meeting, you might want icons, logos, images or other graphical content. How do we do this in a way that is legal and ethical? Whilst there is a lot of information out there, most of it is not licenced for reuse and if we just help ourselves to it and use it for our own purposes, that is a big no-no! Creative Commons The Creative Commons (CC) licencing system enables photographers and artists to upload their work and have control over how others can use it. There is a lot of information on their website and it is de...
Read more