hello.

I am using swftools on a custom cck node of type ppodcast. I have used just cck, filefield, and swftools, and it is working fine. the site's audience are mostly blind people who use a screen reader with a keyboard to navigate websites. I notice that imbeding jw-media player inside drupal doesn't make the controls like play, pause, stop, etc accessible. you can't tap to reach them, and you can't press alt+p to click the play button.

however, if I try to navigate a standard html page with embeded media with the same player, it's totally accessible. to illustrate, go to www.nattiq.com/flash_media_player/readme.html (the default file that you download with jw-media player), it's very accessible. press alt+p and it should take you to the play button. you can even use your tab key to navigate to it.

now go to www.nattiq.com/en/test_podcast, (cck with swftools and the same jw-player). see how you can't do anything with the keyboard. the media plays fine, the player shows. so it's the same player but doesn't behave the same way.

can anybody please help?

Comments

mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented

here are more details on how I set this up:

CCK with a filefield called field_mp3_file

SWFTools currently using the swfobject2 method, although I tried others and they make no difference.

jw-media player.

I have a custom contemplate template in which I have:

<?php print $node->content['body']['#value'] ?>
<a href="<?php print $node->field_mp3_file[0]['filepath']?>"><?php print t('Download this podcast') ?></a>
<div class="player">
<?php print swf($node->field_mp3_file[0]['filepath'], array('params' => array('width' => '400', 'height' => '200'))); ?>
</div>

for the class player I have only this in my css:

player {
  margin: 0 auto;
  padding: 0;
  align:center;
}

as you can see in the above urls, everything shows as expected. it's just that in the drupal page the flash player can't be navigated using the keyboard.

there may be something visual that I can't recognize because I am blind. other than that, I hope I gave enough details to help whoever is going to help me track the source of the problem.

again, any help would be greatly appreciated.

Stuart Greenfield’s picture

Stuart Greenfield commented

This is a really interesting issue - I have to admit I have never actually considered accessibility of players. It would be great if we could make this work, so please leave it with me to investigate. In principle it can't be too difficult to fix since if it can be accessible outside of Drupal it must just be a case of embedding the player in the right way.

I'll post again when I have some progress.

mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented

hi stuart!

as you can see from the discription that I gave earlier I am judging from how the player works as a stand alone, and how it displays when embedded in drupal. would be really nice if you or any other user, give me urls to sites using swftools so that I can check if the players in their specific setups are not accessible too.

I am saying this because I know you may have no way to determine if the player is displayed in an accessible way or not, because you don't have access to a screen reader. of course, the other methods that I described should be doable without a screen reader, right?

my hat is off for your interest in this issue! thank you.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +Accessibility

Adding accessibility tag

Stuart Greenfield’s picture

Stuart Greenfield commented

The ability to "tab" in to the player looks like it is an IE feature and isn't supported in other browsers.

I've done some searches on Google and that turned up a page at LongTail Video about making players accessible - specifically http://www.longtailvideo.com/support/tutorials/Making-Video-Accessible.

When you read the page carefully it says that there are some "hidden" links that allow a screen reader to access hyperlinks that control the player. These links let you play/pause, mute/unmute, and rewind/stop the player.

The code is basically a little bit of JavaScript to target the player. To test the concept I manually added the code to a page to make visible links by adding

<ol>
<li><a href="javascript:document.getElementById('swfply').sendEvent('PLAY');">play/pause the video</a></li>
<li><a href="javascript:document.getElementById('swfply').sendEvent('MUTE');">mute/unmute the video</a></li>
<li><a href="javascript:document.getElementById('swfply').sendEvent('STOP');">rewind and stop the video</a></li>
</ol>

This works perfectly - I get a set of links just below the player that I can click on to control the player.

Would this sort of approach meet what you'd like to do on your site?

I need to think about how we implement it - it may simply be a case of providing a toggle on the settings page to say "Make player accessible" - then the SWF Object embedding code could react to that add attach the appropriate script (either visible or hidden). Again, maybe a toggle on the settings page to choose.

I'd love to put something in place to help you out here, so please post again to see if we can work up a solution.

Stuart Greenfield’s picture

Stuart Greenfield commented
Status: Active » Needs review

I decided to go ahead and implement this in any case - having described the solution it was very quick to implement a quick fix. The code could probably be a little neater, but it's sufficient to let you try the mechanism, and it's certainly usable (and hopefully accessible!)

I just committed the code on branch DRUPAL-6--2.

You'll find a new "Accessibility" section on the Wijering 4 settings page where you can enable the accessible controls, and choose if they are visible or hidden.

If you enable the controls you will get three links underneath the player to let you operate it. If you also choose "hidden" then the controls won't display, but they're there on the page.

The method relies on JavaScript, and it needs to know the object id, so at the moment it requires you to use the SWF Object 2 embedding method. That's one of the preferred methods anyway, so I don't see that as an issue.

Because the links are now rendered on the regular page they are accessible using the tab key, or any other pointing device.

Please let me know if this is a good solution - as I said originally, I've never implemented stuff for the purposes of accessibility before. If you can suggest any improvements then let me know!

I hope this helps you out! This has been a really nice issue to work on :-)

mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented
Status: Needs review » Needs work

hey steve,

thanks alot for your wonderful work. your solution certainly offers a very nice work around and is very usable. however I have few comments on the new code:

1. I suggest the links to read

    Play/pause
    Mute/unmute
    Rewind and stop

because the content might not be a video, we offer a podcast on our website.

2. as you noticed, I prefer that we use unnumbered lists.

3. could we make the link text translatable? possibly using the t() function? example:

<ul>
<li><a href="javascript:document.getElementById('swfply').sendEvent('PLAY');"><?php print t('play/pause') ?></a></li>
<li><a href="javascript:document.getElementById('swfply').sendEvent('MUTE');"><?php print t('mute/unmute') ?></a></li>
<li><a href="javascript:document.getElementById('swfply').sendEvent('STOP');"><?php print t('rewind and stop') ?></a></li>
</ul>

4. could we reuse this code for other players? the only reason why I use this one is for its excellent accessibility outside of drupal. I understand though that this may not possible because the other players may not offer a similar method if any at all.

as for my specific site, the current solution is just what I was looking for. it is still a mistery to me why flash behaves differently inside of drupal. I tried several players stand alone, and they all could be accessible with screen readers that support flash content.

however, your solution has advantages because it is flash independent. as of today, not all screen readers have support for flash.
again, thanks alot for your interest in making swftools accessible. very few module maintainers have the same spirit.

Stuart Greenfield’s picture

Stuart Greenfield commented
  1. I thought this too - done.
  2. OK - done
  3. The text is already wrapped in t() functions, so it should be translatable.
  4. It wouldn't be this exact code, but a variation on it. Again, I have wondered this and will look in to - I think it might be possible with FlowPlayer since it has a full JavaScript API. It may not be possible for OnePixelOut - I know its players can be STOPPED through script, but I've not looked to see if they can be STARTED.
mohammed76’s picture

mohammed76
Primary language English
Location Muscat
commented
Status: Needs work » Reviewed & tested by the community

hi Steve!

I tested the new changes, and they work just as expected everytime. I consider the issue solved for me. feel free to mark issue as "fixed" if necessary, or keep it open until you look into the other players.

thanks a lot for the great efforts, highly appreciated!

Stuart Greenfield’s picture

Stuart Greenfield commented

You're welcome!

Stuart Greenfield’s picture

Stuart Greenfield commented
Status: Reviewed & tested by the community » Fixed

Released in SWF Tools 6.x-2.5.

Status: Fixed » Closed (fixed)

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

yan’s picture

yan commented

Thanks for your work on the import issue of accessibility. Is there anything I need to do to actually use new controls. I can't find them anywhere.