SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessible video

    Please excuse this if this is a common question, but have searched and couldn't find anything...

    I need to put video online but in a super-accessible way - people with a wide range of disabilities are going to be accessing this site. I'll need captions on the video (and obviously will provide a transcript too).

    I'd been looking at JW Flash Player, and it looks good, but I'm worried that my clients will find it too complex to host the video themselves, upload an XML file for captions, get the code into the CMS (ExpressionEngine) etc.

    So I started to think: Are any of the hosted video options (YouTube, Vimeo etc) any good with assistive technologies? If my client can add captions to the films themselves, it would be much easier to do it that way.

    And unless I'm missing something, doesn't JW Flash player fall down in one major way: that you can tab around it's interface, but can't then escape to the rest of the page? Do players exist that allow you full control, but then let you move onto other parts of the page, only with the keyboard?

    Any help would be really appreciated!

    Thanks, Frank

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,265
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Expression Engine will output XML data from one or more custom fields as you need them. Have a look on the EE user forums as this has been answered a few times.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your speedy reply.

    I might look into that, but I'm still wondering if there isn't an easier route using something like YouTube. It'd just be a cut-and-paste job into the Edit window, and they wouldn't have to pay for hosting. Does anyone know of a service similar to YouTube that is properly accessible?

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2005
    Location
    Sparks, NV, USA
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd recommend looking at the book "Design Accessible Web Sites" by Jeremy J. Sydik. It has a nice section on captioning videos.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - will check that out

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm reading that book - I recommend it to anyone wanting an overview of accessibility - but I'm still finding myself stumped as to what player to use. The JW Flash Player seems to have some problems with screen readers and keyboard access - controlling with kb seems particularly awkward - you can't seem to tab to it, and once it's got focus it's very unintuitive to control just from the kb.

    So: Given that I'm happy to have open captions (printed onto the video itself), I'm back to my original questions:

    Are any hosted video services accessible once you've embedded them into your site?

    If not, what is the best flash player for screen readers and keyboard control? I just need a simple one (Play/Pause/Stop/Progress bar/Vol/Fullscreen).

    Thanks for any help - am finding this whole thing quite confusing!

  7. #7
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Frank,

    I don't know if you are still onto this issue or not, but I do agree with you. As of now it doesn't look like any of the hosted video solutions out there are accessible. From what I've found, the skins that Adobe offers are accessible, but you do not have control over button labels or which items are focusable. This is an issues for a couple reasons and the only way to create a player that is not just accessible but functional is to build it from scratch. I'm working on a video project right now that requires a very accessible player and will be building a player specifically for screen readers and captioning (as well as typical use).

    If you're still onto this project, shoot me an email and I can keep you in the loop.

    island

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Unfortunately accessibility in video is much overlooked these days, especially by places like YouTube whom even though allow the use of captioning do not allow transcripts of videos. I would also add the point that perhaps you may wish to add a secondary layer of audio which is “audio described” so that it says what is happening at the time as well as what is said. This will help deal with the issue blind users have when listening to audio and may know what people say but not what context they say it. On top of that I would make sure the video window can be resized (full screen for example) for people with low vision and in this case it may be worth implementing accesskey’s to add an additional layer of keyboard control over the pages.

  9. #9
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're absolutely right Alex. The features we found we should include are:

    - Tab and Screen reader accessible controls
    - Tab/Screen reader skipping over volume slider
    - Addition of + and - volume controls (for those only using keyboard and cannot click and drag)
    - Keeping the scrip bar focus to call out a playback status: "xx%"
    - Description audio layer
    - A back button to start the video over (especially useful in combination with the description layer)
    - Full screen mode (with scaled captions)
    - Labels and descriptions on all buttons

  10. #10
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fyankai View Post
    And unless I'm missing something, doesn't JW Flash player fall down in one major way: that you can tab around it's interface, but can't then escape to the rest of the page? Do players exist that allow you full control, but then let you move onto other parts of the page, only with the keyboard?
    You can work around the keyboard problem by giving screenreader or other users HTML-links to operate the video. I'm not allowed to post links for SPAM reasons! So here's the long version:

    word wide web dot maatschappelijkverantwoordondernemen dot be slash mvo slash themas slash diversiteit dot html

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds interesting but that link goes to a site in Flemish (I'm guessing?) and doesn't seem to be about JW Flash player...

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onedotover: Thanks for your reply and sorry for my slow one - I've just sent you a message

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Hmmm, I checked that link out, seemed to be more about jobs and stuff... unless onedotover meant to show the little video on the right side.

    The problem with it is you MUST have Javascript to get that to work.
    This is the HTML code, and it looks like they're using extra JS on top of the SWFObject (which, if done right, supplies alternative content if the visitor has no JS, but how does this get around screen reader users with a JS-enabled browser?):
    Code:
    <div id="themeimg">
    <img alt="Diversiteit" src="/mvo/395-DSY/version/live/part/MVO-FlashReplacement/data"></div>
    </div>
    <script type="text/javascript">
    				
    				var so = new SWFObject("/mvo/395-DSY/version/live/part/MVO-Flash/data", "thema beeld", "490", "287", "7", "#ffffff");
    				so.write("themeimg");
    
    			</script>
    
    <hr>
    <div id="content">
    <h1>Diversity</h1>
    <p>
    <span id="video"><span id="videocontainer"><img alt="Diversiteit" src="/mvo/395-DSY/version/live/part/MVO-VideoPreview/data"></span><span id="videohelpers"><a title="Written version of the diversity video" class="transcript" href="/mvo/522-DSY.html">Read the text version fo the video</a></span><--was the caption underneath the image
    <fieldset id="videocontrols">
    <legend>Video controls</legend><a onclick="play();return false;" href="#dsy395-DSY_">Start</a> <a onclick="pause();return false;" href="#dsy395-DSY_">Pause</a> <a onclick="stop();return false;" href="#dsy395-DSY_">Stop</a>
    </fieldset>
    </span>Flanders is diverse and so are our workers.  Many workers are of foreign descent, have work handicaps or belong to the 50+ group.  The Flemish job market needs these people.
    Companies and organisations are always searching for fitting/fit for the job personel and the demographic changes have made it a requirement to use the entire potential of this job market.</p>
    
    <p>In order to get more employees from the candidatesgroup, many undertakers [Ed. not the dead kind] and organisations work with diverse groups.  Diversity can work well if the whole workfloor agrees/works together.  So long as employers AND employees emphasize the positive qualities of their fellow workers and where everyone receives the same chances.  A well thought out diversity-plan is then neecessary.</p>
    <script type="text/javascript">
    
    					var vidPaused = true;
    
    				    var so = new SWFObject("/resources/skins/mvo/flash/videoplayer.swf", "mvovideo", "220", "190", "7", "#FFFFFF");
    				    so.addVariable("qsFile", "/mvo/395-DSY/version/live/part/MVO-FlashVideo/data");
    				    so.addVariable("qsThumb", "/mvo/395-DSY/version/live/part/MVO-VideoPreview/data");
    					so.write("videocontainer");
    
    
    					function play()
    					{
    						if (vidPaused == true)
    						{
    							thisMovie("mvovideo").SetVariable("jsAction", "play");
    							vidPaused = false;
    						}
    
    						return false;
    					}
    				
    					function pause()
    					{
    						if (vidPaused == false)
    						{
    							thisMovie("mvovideo").SetVariable("jsAction", "pause");
    							vidPaused = true;
    						}
    
    						return false;
    					}
    				
    					function stop()
    					{
    						thisMovie("mvovideo").SetVariable("jsAction", "stop");
    						vidPaused = true;
    
    						return false;
    					}
    				
    					function thisMovie(movieName)
    					{
    						if (navigator.appName.indexOf("Microsoft") != -1)
    						{
    							return window[movieName]
    						}
    						else
    						{
    							return document[movieName]
    						}
    					}
    
    			</script>
    Sorry me Engrish didn't work so well here. I had trouble thinking up the right English works used in this context. But I think the point was only to look at what they did for the video themselves.

    There's a fieldset and a legend but I missed wherever the form was.

    I turned Javascript on but still couldn't tell what I was supposed to see with the big picture at the top.

    Also three new paragraphs appears on the bottom, as well as controls for the video. So I'm guessing with JS out you can just read the transcript and you just get an image otherwise.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes - that was kind of obvious wasn't it?! I didn't notice the video...

    Making JS necessary to view the video doesn't bother me too much - I was probably going to embedding the flash with JS anyway, and there's the transcript for people without Flash + JS.

    I think I do need more controls though - volume, skip, full-screen. If the only way to avoid trapping keyboard users into a flash video player is by controlling it externally with JS, can anyone recommend the best way to do this? It sounds like a good solution, but I'm not sure if there's an easy system available?

    Thanks for any advice!

  15. #15
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, video PLAYERS are still a real problem for accessibility because they're still a fairly rapidly moving target (this is one of the reasons that I kind of punted the topic when I wrote my book). I've used JW with some success in the past though, but I always have a text transcript available (and sometimes, while not ideal, an audio only link). It DOES seem that the version of the player and which skin you use are a big factor in the overall result.

    I wish I had more advice to give on the issue, but I haven't had to do much online video lately. I will be more over the next year though and I'll try to get some content onto my blog if I find any particularly nice solutions.

    If you haven't, it might be somewhat helpful to take a look at these (hopefully I can post them this way)

    tinyurl -dot- <commercial> -slash- ch2gp9
    tinyurl -dot- <commercial> -slash- d6rrua

    BTW: Worrying about JS when you have a Flash embed is probably not worth it -- most of the people who are going to have Flash enabled probably have JS as well -- just try to keep the JS as unobtrusive as possible.

  16. #16
    SitePoint Enthusiast fvsch's Avatar
    Join Date
    Apr 2009
    Location
    Lyon, France
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fyankai View Post
    If the only way to avoid trapping keyboard users into a flash video player is by controlling it externally with JS, can anyone recommend the best way to do this?
    The best way to avoid trapping keyboard users into a flash animation is for the concerned browsers to fix this bug, actually. This is a bug in some browsers and their plugin API. It should have been tackled for Firefox 3 but the person hired to work on this stopped half-way, and I don't know if there has been any work on this for the upcoming Firefox 3.5.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jsydik - thanks for your advice. It's looking increasingly like I'm going to have to make some pretty serious compromises - I'll have to try to get the best version of JW...

    Florent V - that's true, but in the meantime I guess we have to find the best way to deal with what we've got...

  18. #18
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm currently building a video website with accessible videos, based on the JW FLV Player. Unfortunately, captions support in the player has been sketchy since the player hit 4.x.
    We had our site audited by Anysurfer, and they approved the use of downloadable versions as an accessible alternative to the embedded version. According to them, the advantage of this is that users can use a video player that's familiar to them rather than be forced to use yet another custom-built Flash player. Just make sure to include captions.
    In JW Player 4.4, one can again use a 'cc' button to toggle captions on and off, but only in the default skin, as far as I know, since the button is created at runtime via the drawing API.
    I've been working with 4.3 so far, and have created a HTML/Javascript method for toggling subtitles, which does require a streaming server or pseudostreaming script (xmoov in my case). But that solution is far from ideal.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •