Posted by mgifford on March 23, 2011 at 4:39am
4 followers
| Project: | Views Slideshow |
| Version: | 7.x-3.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
| Issue tags: | accessibility |
Issue Summary
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.
Comments
#1
I dont really know how the screenreader would affect the slider, never worked with any, so Im afraid i cant really assist with that.
#2
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'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's front page" /></div>
</div> </div>
</div>
</div>
There should be links around the image.
#3
Hmm this seems to be a views slideshow issue, not really slider related, so moving the issue there.
#4
Thanks for moving it to the right issue queue.
#5
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.#6
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.
#7
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.
#8
I could easily wrap the thumbnails in a tags. What's the best way to describe what the a tag does? title?
#9
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?
#10
This patch just got committed. Sorry for the long delay.
#11
Thanks!
#12
Automatically closed -- issue fixed for 2 weeks with no activity.