Now it could be that I'm just missing something, but in evaluating this module here http://openconcept.ca/portfolio I wasn't able to navigate it without a mouse.

I also had problems with the screenreader not knowing how to read anything other than the page that was being displayed when the screen reader got there.

Files: 
CommentFileSizeAuthor
#14 1102332-d7-2.patch638 bytesdshields
#10 1102332-d7-1.patch2.71 KBredndahead

Comments

I dont really know how the screenreader would affect the slider, never worked with any, so Im afraid i cant really assist with that.

No worries. You don't need to be an expert in accessibility and we can help test & evaluate this.

Looking at the code the problem seems to be that you have links that aren't links:

<div class="views-slideshow-controls-bottom clearfix">
      <div id="views_slideshow_controls_text_spotlight-block_1" class="views-slideshow-controls-text-render views_slideshow_controls_text">
  <span id="views_slideshow_controls_text_previous_spotlight-block_1" class="views-slideshow-controls-text-previous views_slideshow_controls_text_previous">Previous</span>
  <span id="views_slideshow_controls_text_pause_spotlight-block_1" class="views-slideshow-controls-text-pause views_slideshow_controls_text_pause">Pause</span>
  <span id="views_slideshow_controls_text_next_spotlight-block_1" class="views-slideshow-controls-text-next views_slideshow_controls_text_next">Next</span>
</div>
    </div>

There is no way for someone to get to this without a mouse. The behavior isn't quite right either.

Likewise with image navigation:

      <div class="views-slideshow-controls-bottom clearfix">
      <div id="widget_pager_bottom_portfolio_slideshow-page_1" class="views-slideshow-pager-fields-render widget_pager widget_pager_bottom views_slideshow_pager_field">
  <div id="views_slideshow_pager_field_item_portfolio_slideshow-page_1_0" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views_slideshow_active_pager_field_item views-row-odd">
  <div class="views-field-entity-id">
    <div class="views-content-entity-id">
    <div class="field field-name-field-screenshot field-type-image field-label-hidden">
        <div class="field-item even"><img typeof="foaf:Image" src="http://openconcept.ca/sites/openconcept.ca/files/styles/portfolio_gallery_full/public/uploaded-images/screen_shot_2011-02-16_at_11.41.29_am.png" alt="A view of Recognia&#039;s main page" /></div>
  </div>  </div>
</div>
</div>
<div id="views_slideshow_pager_field_item_portfolio_slideshow-page_1_1" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even">
  <div class="views-field-entity-id">
    <div class="views-content-entity-id">
    <div class="field field-name-field-screenshot field-type-image field-label-hidden">
        <div class="field-item even"><img typeof="foaf:Image" src="http://openconcept.ca/sites/openconcept.ca/files/styles/portfolio_gallery_full/public/uploaded-images/justvision_screenshot.jpg" alt="A view of Just Vision&#039;s front page" /></div>
  </div>  </div>
</div>
</div>

There should be links around the image.

Project:Views Slideshow Slider» Views Slideshow

Hmm this seems to be a views slideshow issue, not really slider related, so moving the issue there.

Thanks for moving it to the right issue queue.

Just adding an anchor tag helps make it accessible to keyboard only users. I haven't tested this solution with screen readers yet, but it is a step ahead:

views-slideshow-controls-text-next.tpl.php

<span id="views_slideshow_controls_text_next_<?php print $variables['vss_id']; ?>" class="<?php print $classes; ?>"><a href="#"><?php print t('Next'); ?></a></span>

views-slideshow-controls-text-pause.tpl.php

<span id="views_slideshow_controls_text_pause_<?php print $variables['vss_id']; ?>" class="<?php print $classes; ?>"><a href="#"><?php print $start_text; ?></a></span>

views-slideshow-controls-text-previous.tpl.php

<span id="views_slideshow_controls_text_previous_<?php print $variables['vss_id']; ?>" class="<?php print $classes; ?>"><a href="#"><?php print t('Previous'); ?></a></span>

EDIT: A similar change should be made to views-slideshow-pager-field-field.tpl.php, however I can't get the <a href="#"> close enough to the image to allow this to be linkable. I think it's probably in views_slideshow.theme.inc but I can't find it yet.

Thanks. I didn't quite think about screen readers when I made that change. Doh! Thanks for the heads up and a very legitimate reason for using links.

Cool. Great to hear. I'm not quite sure about how to do this for pages like http://openconcept.ca/portfolio which use the images to make the transition.

I could easily wrap the thumbnails in a tags. What's the best way to describe what the a tag does? title?

I'm quite certain it would need to be a link if it is going to work for keyboards & screen readers. It's about navigation as much or more than it is displaying data.

A link (even to #) around an image should be sufficient. What output were you thinking?

Status:Active» Fixed
StatusFileSize
new2.71 KB

This patch just got committed. Sorry for the long delay.

Thanks!

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Status:Closed (fixed)» Active

This must have been reverted at some point. It's back to using div's.

EDIT: Actually, I think it's just that only addresses some of the navigational elements and there are a few others that are defaulting still to div's.

Status:Active» Needs review
StatusFileSize
new638 bytes

Here is a patch that addresses this issue for using fields as the pager items.