Links that open new windows are not great for the accessibility of your site, but if you want to create the effect of opening content in a new window, you can use a javascript slideshow application. But using javascript/AJAX brings its own accessibility issues. This article explains how to make one of the best slideshow applications I’ve seen - HighSlide - more accessible for your users.
What are slideshow applications?
Slideshow applications - also known as thumbnail viewers or lightboxes - use client-side scripting (e.g. javascript, AJAX) to open content in a ‘pseudo window’ (looks like a new window, but doesn’t actually create a new browser window). They are commonly used to build sleek looking image galleries, but some applications allow you to open all kinds of different content, including Flash, multimedia and even content from other web pages.
There are many frameworks that you can download and start using on your site with just a little bit of configuration. The best one I have found is HighSlide JS ![[external link]](/images/exLink.gif){kind=small}
, from Norwegian developer Torstein Hønsi.
Why HighSlide?
- HighSlide JS has been built with flexibility in mind, and there are a mind-boggling number of ways to configure it to suit your needs;
- The styling of the application is done through a set of javascript parameters in the
<head>of your pages and through CSS, so you don’t have to go digging around in the source files to change anything; - The application is well documented, with each configuration option explained and an example of the end result given (plus there’s a handy HighSlide configurator );
- There’s also an excellent HighSlide support forum , which is regularly checked by Torstein. You never have to wait too long for an answer to a query you’ve got.
Tips for making your HighSlide image gallery more accessible
I recently used HighSlide to build a photo gallery for the South Norfolk Council website , and then had the application tested by disabled users at the Shaw Trust . The following advice on using HighSlide to build a more accessible image gallery is based on the feedback I got from the testers.
1. Make sure it works when javascript is disabled
It doesn’t have to look slick or cool, but your image gallery should still function when javascript is turned off. It’s a common misconception that screenreader software doesn’t understand javascript, but users sometimes choose to disable it (often when it’s giving them issues with a particular site), so it’s important your application works with it switched off.
HighSlide has a neat ‘fallback’ solution to allow your image gallery to work nicely when javascript is disabled. Unfortunately though, it’s not the method used by default when you download HighSlide so you’ll have some changes to make.
By default, the link for the thumbnail looks something like this:
<a id="thumb1" class="highslide" onclick="return hs.expand (this)" href=”full1.jpg”>
<img src=”/images/thumb1.jpg” alt=”Sunset over central London” width=”70″ height=”70″ />
</a>
Note that the path of the anchor points directly to the full size image. With javascript enabled, HighSlide intervenes when the link is followed and opens the full size image in the pseudo window. If javascript is disabled (or the user has a device that doesn’t understand javascript), then the full size image opens in the browser window.
While not exactly broken (you do at least get the full size image), it isn’t pretty or particularly accessible. A more helpful solution is to have a web page that holds the full size image, so if javascript isn’t available then at least the user is taken to a proper web page where you can have a link back to choose another image.
The thumbnail link would look exactly the same, except for the path of the anchor:
<a id="thumb1" class="highslide" onclick="return hs.expand (this)" href=”/images/gallery/gallery.php?id=1″>
<img src=”/images/thumb1.jpg” alt=”Sunset over central London” width=”70″ height=”70″ />
</a>
How you create the fallback page will depend on how big your image gallery is. If you’ve only got a few images you want to open with HighSlide, then manually creating the fallback pages won’t be too much of a problem.
If your gallery is bigger and new images are being added regularly, then you could build a template for your fallback page using a query (if the gallery is database-driven), or use some PHP to store details of each image in an array, then pass a variable with the link (as in the example above).
2. Don’t ‘hide’ content in the HighSlide window
The accessibility testing raised an issue in HighSlide to do with focus. When the HighSlide window is opened, focus is not given to the content inside it, but remains ‘outside’ the expanded HighSlide window.
You’ll see what I mean if you take a look at the gallery on the South Norfolk Council website . Use the tab key to get down to the first thumbnail image, then open it using the Return/Enter key - the full size image will expand. From here, you would expect to tab through the four navigation links in the top right corner of the HighSlide window. Instead, if you tab you’ll see that focus has stayed on the thumbnail link you opened, and you start to go through the remaining thumbnail links behind the expanded image.
From an accessibility point of view, this means:
- Screenreader users cannot access any content in the HighSlide window, so the navigation links and the image caption are hidden;
- Keyboard-only/switch users cannot access the gallery navigation links by using the tab key.
You’ll see from the comments by the Shaw Trust’s blind tester how confusing this is:
“When I select an Image from the Graphics List, nothing seems to happen with JAWS even though they are Link Graphics. A colleague informed me that an enlarged version of the Image had opened up but JAWS is not able to get into focus, I can only assume that JAWS and javascript are having problems interacting when an Image is enlarged.”
With this in mind, it’s clear that ‘hiding’ content (where it can only be found in the expanded window) makes the web page inaccessible to screenreader users. With an image gallery, this is perhaps less of an issue. If you are using HighSlide solely to show full size versions of thumbnail images, I would recommend doing the following to help with accessibility:
- Use the expanded window to show only the larger image (and navigation buttons for sighted users) - don’t put any other content in there.
- If you are using an image caption, use exactly the same text as you are using in the ‘alt’ of the thumbnail image. This text is already accessible to screenreader users, so they can at least find out what the image is. To set the caption to match the thumbnail image’s alt text, set the following variable in the HighSlide javascript in the
<head>of your page:hs.captionEval = 'this.thumb.alt'. - Put some notes on your web page to explain to screen reader users that they will find no further information by clicking on any of the thumbnail links (see below).
3. Write some helpful notes for Assistive Technology (AT) users
While screenreader users cannot get at the content in a HighSlide window, the application is in fact accessible for users of other types of ATs, though not perhaps in the way they are most familiar with.
The HighSlide application is fully keyboard accessible (another very good reason to use it), which means that you can navigate between images using the left and right arrow keys, and close the pseudo window using the Esc key. This means that keyboard-only/switch users, while unable to tab through the navigation links, can at least navigate by using these keys.
It also makes a HighSlide image gallery accessible for voice-activated ATs, such as Dragon. When a web page loads, Dragon assigns each link on the page a number, and displays that number on-screen next to the corresponding link. Users simply have to call out the number of the link they wish to follow.
Because the HighSlide window’s navigation links are hidden at the point the page first loads, and are shown only through DOM scripting when the HighSlide window is opened, Dragon can’t assign them a number. The screenshot below shows how the application looks with Dragon when the HighSlide window is open. The thumbnails have been assigned numbers, but not the links inside the pseudo window:
To a Dragon user it seems as if the navigation links aren’t accessible, but since the software has a corresponding voice command for every keyboard key, they can use it by calling out the commands for the left, right and Esc keys. The only thing they won’t be able to do is move the image around the screen, which requires a pointing device to click and drag the window.
Because it is not immediately obvious to Dragon, keyboard-only and switch users that they can navigate around the image gallery, it’s important to have a helpful note on your site to explain things to them. It doesn’t need to be a huge paragraph of text, just a simple statement pointing out that the gallery can be navigated using the keyboard alone.
This is the text I used on the South Norfolk Council site. This bit goes in before the first thumbnail on the page:
Click on a photo to open the slideshow, then use the Left and Right arrow keys to move between images. Notes for users with assistive technologies.
The last sentence is a hyperlink to the second piece of text, which I put underneath the set of thumbnails:
Screenreader users: clicking on a photo thumbnail will only show a larger version of the image. There is no further information other than what is already in the image’s ‘Alt’ text.
Keyboard & voice-activation AT users: Use the Left and Right arrow keys to move between photos, and the Esc key to close the slideshow. Voice-activation AT users won’t see the navigation links numbered, but calling out the voice commands for the keys will allow you to move between the images.
At the end of this I put a hyperlink back to the first thumbnail image, so after reading the guidance, screen reader, keyboard-only & switch users can open the first gallery image.
Personally I’m not keen on having to recommend to screen reader users that they shouldn’t follow a link. It seems all wrong, but in the case of this image gallery there’s no advantage for them in following the link, and doing so will only cause them confusion.
HighSlide for other types of content
The notes here explain how you can help make an image gallery powered by HighSlide more accessible for your users. You only have to take a glance at the support forum to see that many developers are using HighSlide to display dynamic content such as Flash, movies, audio and even whole chunks of content from other web pages.
Given that focus is not given to the content inside the HighSlide window, you have to conclude that all of these implementations are not accessible to many web users, particularly those using screen reader software. Opening a single image in a HighSlide window is just about accessible - but imagine a HighSlide window that contains a lot of text, movies, or an entire Flash application with multiple links. Unless your web page includes a link for people to view the same content outside of the HighSlide window, it will be hard to use for those with assistive technologies, and completely hidden from screen readers.
Future developments
When I had HighSlide tested by the Shaw Trust, I posted some feedback on the forum (which I used as the basis for this post). Torstein Hønsi responded to my post and said he would look at the focus issue for a future release of HighSlide.
This is excellent news. If focus can be passed to the content inside a HighSlide window, then there’s a chance it can be made far more accessible to a variety of assistive technology users, and safe to use for other things as well basic image slideshows.
The guys at Shaw Trust said they’d yet to see an AJAX application made fully accessible, so Torstein’s got his work cut out. All I can say is best of luck!
Summary
- For a simple image slideshow, HighSlide can be made more accessible for assistive technology users, because your images can be navigated using only the keyboard;
- If you use HighSlide for a slideshow, make sure it works if the user has disabled javascript. This is best done by using a proper fallback web page, which is not a huge task to set up.
- If you use captions for your full size images, use the same text as you put in the Alt for the thumbnail image.
- HighSlide is currently not accessible for screen reader users because focus is not given to the content in the pseudo window when it opens. If you use HighSlide to display content such as Flash, movies or content from other web pages, make sure you provide links for users to see the content outside of your HighSlide application.
- An image gallery in HighSlide can be navigated by keyboard, switch & voice-activated AT users, but you’ll need to put some notes on your page to explain how they should use the relevant keyboard keys to do so.
The screen reader used by the Shaw Trust tester was JAWS, and the voice-activated software was Dragon. If anyone has tested a HighSlide installation with different software and had different results, I’d be grateful if you could post a response about it.
I’d also be interested to hear from anyone who knows whether it’s possible to manually set link numbers for the Dragon voice-activated software. This would certainly help to make the HighSlide navigation bar accessible.