Accessibility in a photo gallery context

[adh32]

I have a couple of questions about a photo gallery page that contains little more than an H1 (i.e. Photo Gallery), images (with good alt descriptions, of course), captions, and anchors. Apart from that, it's just the usual main nav, footer, and skip links.

Is it a good idea to add some off-screen content, just a brief description, that outlines the purpose of the page or informs users that the anchors will open images in a modal overlay?

Is there anything else that I should do to make the type of content clear?

I would say that the title makes it obvious, as does the anchor text that leads to this page, but I never like to assume. It's surely conceivable that screen reader users could visit this page, even if it is unintentionally.

Even though the modal overlay does not contain text, forms, or interactive content, should it have ARIA attributes? I have so far struggled to understand that part of the ARIA guidelines, so I only really know about the landmark roles in HTML (which I have already implemented).

[rguy84]

My first question would be why are you doing alt text and captions? I would advocate that you should set alt="" for the picture. If the alt and caption are basically the same, somebody will get the same thing read to them twice, which may get annoying. Also, an alt text is to show the importance of the image, a caption (underneath) or the longdesc attribute is used to write about it in detail.

Is it a good idea to add some off-screen content, just a brief description, that outlines the purpose of the page or informs users that the anchors will open images in a modal overlay?

No offense, people with disabilities are not generally less smart than your average person, so if you feel you need to explain something, it probably would be better to write it in plain text so everybody sees it. Remember the saying: if you have a question, at least one other person has it also.

I would say that the title makes it obvious, as does the anchor text that leads to this page, but I never like to assume. It's surely conceivable that screen reader users could visit this page, even if it is unintentionally.

When a page loads, the text between the <title> tag always reads first, so putting photo gallery in there should make it known. You can slap an <h1> on the page too if you wish (good idea).

[adh32]

Thanks for replying.

I couldn't manage without a caption, really. Each gallery's content would not be very obvious to anyone. Nor would I be able to easily display an image count. I'll show the HTML so that you can see what I referred to:

<div class="thumbnail" id="gallery1">
<a class="img" rel="gallery1" href="----"><img src="thumbnails/coast.jpg" alt="A pebble beach after dusk with street lights reflected in the water"></a>
<div><span class="title">Coast</span><span class="img-count">5 images</span></div> <!-- that is the caption -->
</div>

I didn't mean to imply that anyone with a disability is any less intelligent. I'm in a position to be offended by that if anyone suggested it to me. But since starting to develop my own site, usability has been high on my list of things to study, and I wouldn't want any user to struggle with something because of an omission on my part.

As I mentioned, the page has an H1.

What about the ARIA attributes? Any thoughts?

[Stomme poes]

Looking at your HTML, your caption seems to be similar to "tagging" (this photo is "tagged" under the subject "Coast" and there are x other images also so tagged), so I think those are good.

Nothing pops into my head immediately regarding ARIA with a simple photo gallery even with the modal dialogue... maybe because if it's a CSS/Javascript setup then the focus generally automatically goes to that modal box (which would contain, what, the picture title if there is one? The image. The image caption. Next and prev anchors, and a close/exit button). Depending on the setup, simply keeping keyboard navigation and text wherever there are images (if next, prev and close buttons are images for example) would be enough.

I'm going to dig around for the article I read about a specific issue with the Back button and usability/accessibility. If I find it I will post it here.

*edit it might have been this one The Trouble with Lightbox (and its Variants) - Monday By Noon

Depending on what kind of gallery this is and how you think most users will expect it to function (does hitting Back bring you back to the gallery page or the previous image?), choose that type of functionality and then...

Is it a good idea to add some off-screen content, just a brief description, that outlines the purpose of the page or informs users that the anchors will open images in a modal overlay?

here you'd have, as Ryan suggested, some ON-screen info that basically states how the images are best navigated. It doesn't need to be more than a sentence or two (esp since many people visiting already have experience with lightboxy-type things) and so long as it's keyboard-accessible and text-available you shouldn't need to explain how the rest works. Because your links in the modal box are... links, I don't see this as something that needs ARIA widget-attributes. That's more for using elements who were meant to do one thing (like spans) as widget tools to do something else (turn span into a scroller-thingie).

Of course, make sure it all works as expected for those not getting the modal box (no JS)... and I just mean this in general, not screen reader users (who like everyone else, often/usually have JS enabled).

Some more points: Building a Better Lightbox | habdas.org

[rguy84]

I couldn't manage without a caption, really. Each gallery's content would not be very obvious to anyone. Nor would I be able to easily display an image count. I'll show the HTML so that you can see what I referred to: <Snip>

I am going to disagree with Stomme a tad. The code you posted looks like a "view all albums" type page, versus actually in the album. That being said, I would give the alt tag a bit different context, "Album cover for Coast, image of the coastline with nearby lights reflecting".

II didn't mean to imply that anyone with a disability is any less intelligent. I'm in a position to be offended by that if anyone suggested it to me. But since starting to develop my own site, usability has been high on my list of things to study, and I wouldn't want any user to struggle with something because of an omission on my part.

I didn't mean to imply that you were doing that. I was showing how if you needed all of that hidden content, there may be usuability issues with the design as a whole. Of course, since there hasn't been a link posted, I cannot provide any feedback.

What about the ARIA attributes? Any thoughts?

I agree with Stomme, there isn't really anything popping in my head about ARIA.

[adh32]

I'm not sure what you mean by tagging. Do you mean like categories or something? The captions are just gallery titles, i.e. thumnbail images with a snappy title below them, styled as polaroids in this case. I've since found that caption can have specific meanings in the context of HTML, so I may have caused some misunderstanding. Sorry if that's the case.

I should add that the links to the other images in each gallery are below the span at the bottom of each division, and hidden off-screen by jQuery's add class thing, so that they appear when JS is not available. I missed them off when I copied my HTML snippet. (As a web user, sites that don't work without JS is a personal pet peeve.)

I'm using Fancybox at the moment, which has keyboard access. I wanted to use the ARIA lightbox, but can't figure that out.

I've seen the Monday by Noon article before. It was very interesting, but not something that I could ever implement myself. Beyond amateur level, I think.

Oh, and I can't provide a link to the gallery: there's nothing to link to yet.

[Stomme poes]

I'm not sure what you mean by tagging. Do you mean like categories or something? The captions are just gallery titles, i.e. thumnbail images with a snappy title below them, styled as polaroids in this case. I've since found that caption can have specific meanings in the context of HTML, so I may have caused some misunderstanding. Sorry if that's the case.

I may have misunderstood what your code was representing. I thought it was a thumbnail with a link to the larger image, and that "5 images" meant there were 5 others in the (single) gallery that also were called "Coast". What you really have, then, is a thumbnail linking to a gallery? So this is a page with like a list of galleries?

For some reason I don't like alt text of images that are "random" thumbs which would take me to a place with more thumbs, but that's me. I dunno what most users would prefer. I like my links-that-go-somewhere to be pretty clean and save my alt text for the thumbs-that-link-to-single-full-sized-images (or maybe even just the full-sized image itself). Or, Rguy84 seemed to have understood the code better than I so his alt text makes more sense.

(As a web user, sites that don't work without JS is a personal pet peeve.)

Same here.

I wanted to use the ARIA lightbox, but can't figure that out.

Could you link to that? Is it by Filament group?

I've never used anything beyond Lightbox2 so I'm not familiar with Fancybox.

Oh, and I can't provide a link to the gallery: there's nothing to link to yet.

Maybe after you've built something demo, you could link to that here later on and people can go through it to see where improvements, if any, could be made.

[rguy84]

Maybe after you've built something demo, you could link to that here later on and people can go through it to see where improvements, if any, could be made.

I agree, part of accessibility is contextual.

[adh32]

No, you were pretty much correct in your interpretation about the HTML, Stomme. I'm representing six galleries with a thumbnail in a div for each, but they don't link out to another page. e.g. if my Coast gallery has 5 images, that means four offscreen anchors with text and one thumbnail img with anchor around it, which launches Fancybox and then all five images can be clicked through.

I could have just one big gallery, but my rationale was that many visitors will only view some of the galleries and so this is more flexible for them. The full-size images are actually coming from my Zenfolio account, because it's easier for me and reduces bandwidth issues a lot.

The ARIA lightbox is at https://github.com/fnagel/jQuery-Accessible-RIA/. I have a thread about it in the JS forum, but haven't had any responses yet. Fancybox is at Fancybox.net.

[Acmeous]

After all these, I think the best idea is to test with the JAWS. You will get many practical ideas instantly . ARIA guidelines are always good when it comes to AJAX, but as already suggested by Stomme, we should also go for checking how it performs without JS. It may not have all those presentational beauties, but basic functions must work with JS or even CSS also.

[adh32]

I can only test with NVDA, which I'm about to tackle. Professionals might be able to afford JAWS, or even justify it; I cannot.

[Acmeous]

You can always test with any screen reader and of course to start with we prefer to go by the free and open source tools. They really helps.
But JAWS being the most popular and widely used screen reader we also should test on JAWS. It sometimes gives more features also which we should test on.
And btw, JAWS also has the demo version, just with a slight problem... you need to restart your machine after every 40 mins of using JAWS .

[Stomme poes]

I can only test with NVDA, which I'm about to tackle. Professionals might be able to afford JAWS, or even justify it; I cannot.

NVDA does ARIA better than JAWS it seems... esp with FF4 out (with some new "native" roles in place).

But JAWS is indeed the IE of readers. I use versions of the 40 minute demo (couldn't get my employer to shell out the 1000 euros it costs to get the real thing), though Freedom Scientific warns the demo is not to be used for developer testing.

I find the quick keys and basic navigation between JAWS and NVDA to be very similar, so switching between the two shouldn't be too confusing. JAWS sounds way better though : )

[Stomme poes]

omg lawlz: WebAIM screen reader faceoff (PDF)