New Hotspot highlight appearance option

[JohnSmith-LT]

Hi @FayCross @ronm123

During testing of the hotspots and the tabindex issues and while we have the new Hotspot highlight appearance and with "Show Highlight" turned on, it's still hard or impossible to tell which highlight has been tabbed to.

My question is, am I overlooking something or should we have a "On Focus" option too? For example in this image the middle hotspot on the foot is active:

[ronm123]

@JohnSmith-LT @FayCross that's a good point John and more importantly I think I was testing the hotspot connector and hotspot image (and others) with a screenreader (nvda) and it might just be my lack of awareness of how to configure/use a screen reader but for instance I noticed the following differences:

1. using the hotspot image connector set to open pop-up content for each hotspot I can tab to each hotspot, hear the label or alt text, hit return or space to open the popup for each hotspot and the screen reader automatically reads the content of the popup followed by the close button so I can then hit return or space again to close the popup.

2. However with the normal hotspot image I can tab and hear each hotspot and hit return or space but the screen reader doesn't then focus on and read the info displayed for the selected hotspot. I'm not saying this is a new issue (I don't know if it is or not) and it may be that I just don't have nvda set up correctly to then read the info but I haven't found a keyboard combo to get to that info either. Similar issues exist with the annotated diagram and drag and drop labelling pages too. I was going to add all this somewhere either as github issues or possibly in one of the spreadsheets we have listing all the page types. We need to do this if the plan for a WCAG/VPAT statement is going to be of any value and so I think it falls under the heading of an updated accessibility audit. Julian and Alistair have both said they can find time to help with the statement and audit etc but not for a couple of weeks.

[JohnSmith-LT]

Yeah, when I tab to each hotspot it gives a brief flash (with no accessibility tech turned on) but that's it and then it's hard to see. If there are a lot of hotspots too then it's hard to see which one flashed.

[ronm123]

@JohnSmith-LT @FayCross sorry I forgot to add that I also think it's not just as simple as adding an on focus style or at least not if the learning design is such that the hotspots are not set to 'show highlight' and the interaction is set to click explore. e.g. in that scenario the learner is meant to click around in the image to find the hotspots. If they can simply use the tab key and see an on focus highlight I guess that kind of defeats the notion of click explore. On the other hand although not showing an on focus border is fine for a screen reader user because they hear the label or alt text for each hotspot what about a user who can't use a mouse so is using keyboard but not a screen reader? In that case the on focus border would obviously be needed. In which case do we need some king of user preference setting or prompt. Again I suspect this applies to other page types too.

[JohnSmith-LT]

Yes definitely, I would only want the on focus to take effect if the highlight was on. I think as an addition to what we have now, only when highlight is turned on, it would definitely be useful but as you say more so for people who can see and we should definitely take this all into consideration as part of the bigger picture...

[FayCross]

The ability to highlight on tab has been lost between 3.7(X) & 3.8. We're still on 3.7 at UoN & highlight still works on the three image hotspot pages:

Hotspot Image
Hotspot Image Connector
Drag & Drop Labelling

On 3.8 it only works on drag & drop. I assume it's related to the changes that have come in with the new flex hotspot code.

I'm sure we could do more to emphasise the highlight on tab where it is working though. It's done by shading the hotspot slightly which obviously works better on some images than others.

Hotspots definitely should highlight when tabbing through even if set to click explore. There are clues as to where hotspots are if you're using mouse & hovering (cursor change) so I don't think it's like people have to investigate really hard to find hotspots anyway.

[JohnSmith-LT]

Yes I thought it did and I can see the faint highlighting on the drag-drop page but it's far from obvious.

[ronm123]

@JohnSmith-LT @FayCross I'm just revisiting this having upgraded a test server to 3.8.4 and I must have missed this previously because I was focusing on the alt text and screen reader usage. Someone just reported that their hotspot connector isn't working and on testing it is working just isn't showing any hightlights on tab.

I think it's clear that we definitely want the hightlights to show clearly when tabbing around the hotspot connector page and I guess Fay's point is true too that having the mouse change on hover gives the game away and means there's little real value in not showing the hotspots on tab too even when set to click explore. What changed between 3.7 and 3.8 that stopped the tab highlights from working?

Regarding what thickness and what colour the highlights are should we add focus optional properties too?

[torinfo]

@ronm123 @JohnSmith-LT @FayCross

What changed between 3.7 and 3.8 is that 3.7 uses canvas to display the hotspots, and 3.8 uses image maps and an jquery plugin to render the imagemap boundaries.

[ronm123]

@torinfo @FayCross @JohnSmith-LT I was having a quick look at the plugin we are now using via http://www.outsharked.com/imagemapster/ and I can't find any examples of showing the hotspot highlight on focus. It's probably something stupid and really obvious that I'm missing but none of their demos show the hotspots on focus either but they do on hover. At the moment we have a situation where we've improved the accessibility with additional optional properties and so our versions image interactions should in theory work better for screen reader users but at the moment don't really work for keyboard only users. I'd like to fix this asap but I can't spot where or how?

[JohnSmith-LT]

Out of the box it doesn't appear to be something that they have considered or included: jamietre/ImageMapster#150

However one of the examples works for me (http://jsfiddle.net/PerWiklander/NRADk/7/) so I think it's definitely something that we can add in using some script.

[ronm123]

@JohnSmith-LT good to know there's a possible solution.

[ronm123]

@JohnSmith-LT @FayCross @torinfo
I was hoping to get this cracked today and from what I can see the bit added in the example John found is the script at the end e.g.
`mapHover = function () {
if (typeof $.mapster === 'undefined') {
return;
}

/* This bit highlights the map with js following the map polygon, which means we have to hack the color of the footer in here (try another fillColor to see why).
Not pretty, I know. The alternative is to use hover images for each region. Switch to that approach if nececcary. (There's an altImage option to use.)
*/
$('#sweden-map').mapster({
    wrapClass: true,
    render_highlight: {
        fillColor: 'e0e0e0',
        fillOpacity: 0.25,
        stroke: false
    },
    render_select: {
        fillColor: 'e0e0e0',
        fillOpacity: 0.5,
        stroke: false
    },
    fadeInterval: 100,
    singleSelect: true,
    scaleMap: false
});

var areas = $("#sweden-map-map area");
var map = $("#sweden-map-map");

areas.focus(function () {
    $(this).mapster('highlight');
});

areas.blur(function () {
    $('#sweden-map').mapster('highlight', false);
});

//Handle sticky bits
areas.on("click", function (e) {
    var area = $(this);
    setTimeout(function () {
        area.focus();
    }, 50);
});

};`

However I can't work out how or where we need to adapt that for our purposes.