Question

Is there a way to add keyboard navigation to links with just css3, without js or any js library? specifically, I have created a pure css3 lightbox effect with a bunch of images but I want to navigate between images using left and right keys without clicking anywhere on the screen and use escape to get the effect of “cancel” button (similar to Close)

Answer 1

What you are asking for is literally impossible with Cascading Style Sheets , You can animate your sequences for timing or do stuff like animating , transitions with CSS but you cannot do what you want to do with CSS only!.

Reasons

1. Cascading Style Sheets were made for making the visual elements of the page and not the UX
2. Css has no method for interaction with Keyboard.

You can either add a little bit of javascript for making this happen . But as you don’t wanna use javascript you are stuck !

Checkbox hack

With checkbox radio box something like this is attainable but then again the focus initially
requires to be brought . which can be done using autofocus attribute ..

So this fiddle should solve your issue.

http://jsfiddle.net/darkyen/NUtnX/

But i want to warn you before hand any “blur” will cause this to fail. so the better javascript code varient is listed below

JavaScript Code

The javascript code for achieving what you want will contain very minimal javascript
Say your markup is

So you can simply assign a lil javascript

(function(){
 var slide = 0,  // Current slide 
     max   = 10, // Maximum Number of slides
 ele = document.getElementById("show");
     document.addEventListener('keydown',function(e){
          e.preventDefault();
          e.stopPropagation(); // To stop more event stuff and default behaviour
          key = e.keyCode; // To find out what key is this 
          if( key === 39 ){
              // Right arrow 
              // Aha we incremented the value!
              slide++;
              slide %= (max+1);
              // Increase the value of slide by 1 and keep em in limits
          }else if( key === 37){
              slide = (--slide >= 0)?slide: ( slide + max );
              // Will decrement the slide value by 1 and if they are less then 0 then   will cycle it to the last slide 
          }  

          ele.className.replace(/slide[0-9]/gi,'slide'+slide);                 
          // wasn't hard now was it ?     
     });
 })();

The minimal javascript above will do the task of changing your slides or you can always see the source code of impress.js