2.1.1 Keyboard

For this guideline, I am going to use my own website. I have been revamping my porfolio website to update it but also to provide more examples of my work and some better functionality. I recently updated my colour scheme and (obviously) checked that it all met WCAG guidelines. 

The most recent piece of work, has been to develop some photography pages. These are organised by theme. Although I have ensured that all of the prior content meets WCAG guidelines, I have just checked the photography pages and they fail this guideline. 

Keyboard Guideline

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

So, if you visit one of my photography pages and try to tab through, using the keyboard, you will soon spot the problem. You will notice that as you hit the TAB key, the different links on the page change colour. They get a brown background and a darker border around them. This is deliberate, to show kepboard users where they are in the tabbing process.

I assume you found that you could tab through the menu items but you never got to the photos, the next/previous buttons or the thumbnails, even though they are all hyperlinks and you should be able to tab to them and then click enter (to achieve what a mouse would do by clicking). 

What should I do?

Well, the first thing, which may be obvious, is that this is an web development issue, so it's going to involve html, css and perhaps Javascript knowledge. So if that isn't your thing... sorry. This may not be one for you.

I'm going to lay out my plan and then publish this post. Then I'll try to fix the issue, and then do a brief follow-up post. 

Why?

From talking to clients who are trying to get this WCAG stuff right (which makes my day) I get the feeling, they think I have some kind of magical knowledge and that all this just comes naturally to me. This is not true. I have to learn about this, just like you. The bits that hit my daily work, have now become dead easy, but some things, like this one, I don't know why it isn't working. I'm going to have to look into it... learn something... persevere. 

I want to show how that learning and problem-solving plays out. It's not just about WCAG (although this is) but it's about anything, where you want something to work and don't know why it won't. You either pay a lot of money to get an expert in or you learn to fix it yourself. Neither is right or wrong (unless gas or electricity are involved - pay for an expert!) but if it is something that might come up often, learning to do it yourself could save you a lot of hassle in the future.

My Plan

1. Check my html and css and ensure that they follow a logical order.
2. Find out whether the Javascript could be the issue (this might need me to actually learn some Javascript, instead of just stealing chunks of code).
3. Access the page with my Dragon software to find out whether the command "Show links" works with the photos. If it does, then it will probably be something really simple that needs changing. If it doesn't I may be stumped!
4. Google it! Have other developers encountered this issue? I'll look at discussion forums to see if anyone else has a solution.
5. If all else fails, and I can't fix it... this is really important! I will get rid of it and find a completely different way. 

The last point is the key message in all of this WCAG stuff. If something fails, and you can't fix it, do not ignore it and pretend the problem doesn't exist. Start again and do it differently. Access is more important than it looking nice for me.

But I don't think it will come to that...

...I'll let you know next time.