Keyboard Accessibility

epoc · Mon Aug 26, 2013 1:58 am

I have a client who want his Tours to be keyboard accessible.

1) It seems the keyboard controls are not accessible unless the Tour is clicked on by a mouse. Can this be overcome?
2) Can point hotspots be accessed using the keyboard?

Thank-you,
Epoc

Mon Aug 26, 2013 2:49 am

Sort of OFF TOPIC

I used this keyboard to write this comment.

Here is a picture of our keyboard and touch controls

: 27 inch touch control screen complete with on screen keyboard; 27touch.jpg (80.83 KiB) Viewed 4410 times

Don · Mon Aug 26, 2013 6:59 pm

epoc wrote:1) It seems the keyboard controls are not accessible unless the Tour is clicked on by a mouse. Can this be overcome?

Really? My keyboard controls ARE accessible so long as the tour's tab/window has focus, such as immediately after the web page is loaded. The controls become inaccessible when the keyboard's Tab key is pressed and the tour's tab/window loses focus. Keep tabbing until focus returns to the tour.

epoc wrote:2) Can point hotspots be accessed using the keyboard?

Yes, if you are comfortable with javascript, i.e. get which key is pressed, then execute a specific hotspot's javascript function.
http://stackoverflow.com/questions/6504 ... which-keys

epoc · Mon Sep 09, 2013 2:29 am

Thanks Don,

This seems to work OK in IE, but not in Firefox.

epoc · Mon Sep 09, 2013 6:51 am

I just tested this in Firefox and Chrome. It DOES NOT work like it does in IE. Does anyone have a solution for this keyboard accessibility solution so it works in Firefox and Google Chrome??

Don · Wed Sep 11, 2013 6:23 pm

For html5 panos: testing today shows keyboard navigation works immediately after onload in IE10, Firefox23 and Chrome25. Html5 testing was done on a PC with a pano2vr beta 4.5 html5 pano.

For flash panos: keyboard navigation does not work immediately after onload in IE10, Firefox23 or Chrome25. Flash testing was done on a PC with a pano2vr 4.1 flash pano.

Here is a Flash pano keyboard navigation immediately after onload solution:

Step #1. Add this javascript within the <head></head> tag of your html page:

Code: Select all

<script type="text/javascript">
   function setFocus() {
      window.document.getElementById('pano').tabIndex = 0;
      window.document.getElementById('pano').focus();
   }
</script>

Step #2. Call the setFocus function in your html page body onload event, like this:

Code: Select all

<body onload="setFocus();">

Step #3. Set wmode = opaque for the swf embedded in your html page. Like this, except change your swf name:

Code: Select all

<script type="text/javascript">
<!--
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        params.base = ".";
        params.wmode = "opaque";

        var attributes = {};
        attributes.id = "pano";
        attributes.name = "pano";
        attributes.align = "middle";
        swfobject.embedSWF(
        "Test16.swf", "flashContent", 
        "640", "480", 
        "9.0.0", "expressInstall.swf", 
        flashvars, params, attributes);
//-->
</script>

If you have an html5 pano with flash fallback, then experiment and tweak the above so the keyboard navigation works for the flash, but ignores the html5, because the html5 keyboard navigation works as-is without additional code.

REFERENCES
A. Search the Internet for, "onload swf focus firefox chrome".
B. Lots of search results, but this sums it up:
http://www.flexjunk.com/2010/12/30/mana ... -browsers/

-

epoc · Thu Sep 12, 2013 12:16 am

Thank-you for your help Don. I will experiment with this over the next few days and see how I go. There may be a few more questions along the way if I get stuck. Hopefully I'll get it worked out.

Cheers,
Epoc

epoc · Fri Sep 13, 2013 2:22 am

Hi Don,
PM sent.