VIDEO ON THE WEB MAKING YOUR VIDEO CONTENT ACCESSIBLE Movie 1024x768

Webinar

[Karen]

Good Morning, this is Karen Sheehan

at the Accessible Technology Coalition

a program oft the Center for Accessible Technology in Berkeley California

I am pleased to have our presenter today

on the "Video on the web: Making your video accessible"

webinar with John Mires.

Jon is a web developer focusing on useability and accessibility

over the last several years he has helped a wide range of

organizations understand and implement web accessibility

principals including Intel, Cliff Bar and GAP, BART, and TechSoup.

Jon's focus is on the practical web accessibility. The clients and customers enjoy working with him because he can break it down

step by step, "Here are the problems with your website, here are the fixes." He can categorize by what is immediate and what is long term,

determine how it is going to get done and where the budgeting will come from.

So he does a great job and is very people friendly.

And he has recieved his bachelors degree from Stanford University and a Masters Degree from

George Mason University and he has been with CforAT for how many years Jon?

[Jon] Coming up on four years.

[Karen] Great and now I am going to turn it over, here you go Jon.

[Jon] Thanks very much Karen I hope I can live up to your glowng intoduction there.

We have a lot to get through this morning so I'm just going to dive right in here,

like Karen said before if you have questions feel free to ask although we will pause for questions at appropriate break points.

If you read the description, we are structuring it slightly differently going to try something else.

We got feedback from our last webinar on web accessability and some of the developers were asking for us to get into the code a little more.

So the first part of this webinar is going to be for all audiences, content managers, managers, developers, everybody.

And then the last portion will be focusing on developers and how you actually code some of this stuff.

So people who are not interested in that can feel free to drop off at that point.

Or you can stick around and if you are not familiar with that can find code interesting.

So with that let's get started.

My first item is a big disclamer there is no sort of magic bullet or perfect solution at least yet for accessible web video,

so what we are going to do today is show you what some of the issues are and what some of the solutions and techniques

and then hopefully you can have a better understanding of how web video works

and the tools available and apply that in your specifc context for your organization.

Accessible web video is a tough nut to crack.

Which most of you probably know which is why most of you are here.

You have spent most of your time already trying to make it work for everybody and are looking for answers.

We're not going to sugar coat it but on the other hand we hope you can learn a lot today.

These are our goals for today. By the end of today

you should have a pretty good understanding of the common accessiblity barriers that people face when people face when they are trying to access video on the web

the types of disabilities it tends to impact the most. A brief intoduction on captioning tools we get a lot of quesitons about captioning how do I caption and are they free tools so we will talk a little bit about those so you can check some of those out after the session.

And then like I said in the last part we will focus on coding techniques. We will get some of the developers here grounding and how to actually doing this on your own sites.

So if you are having video on your own sites you have a couple of choices right off the bat, host it on a third party video site like youtube or vimeo and imbed it on your own site, or if you are going to host it yourself on your own web servers and use some video player to actually provide controlls.

There are pros and cons to both. The pros of a third party like you tube is you dont have to deal with any of the video processing stuff

you just record your video and you can upload it and they deal with all of the encoding and compressioning and that sort of thing and you also get access to some of the tools

that they provide, a video player, youtube in particular has some quite good accessiblity features, the flipside to that is you loose control over it

if they change their player and it becomes less accessible or if they give you less options, they put time limits on how long your videos can be.

If you host it yourself, you get much more control and you have to deal with more work. You have to deal with displaying with different browsers and everyting that goes along with that compressing your videos so it does not suck up all your bandwith.

and as we will talk about throughout this session there are accessibliity pros and cons to each too.

So the accessiblity condiderations of video here are some of the main issues, these are the big, big issues

We will go over each of these in a little more depth

One of these is is auto play

If you have been to a page that starts playing you probally find that annoying as do many people.

It is also an accessibility barrier

For people who are blind using screen reader software, the majority of them are using software that speaks the webpages in a syntthisized voice,

some people get a braile display but most people they use audio output, so your video audio is competing with that attention and it is very difficult to find the controlls for stopping

the video if you are blind.

So they cant really navigate any of your page.

if you have audio starting automatically.

Also for people with cognitave disabilities or learning disabilites it can be overwhelming and disconcerting when videos start playing

especally if they are further down the page and you cannot see the video many people cannot figure out how to stop the video and they will end up leaving your page.

Captions are a big one captions are mostly for the bennifit of deaf or hard of hearing people but there are places they are usefull for other audiences.

Transcrips are an alternative format to the video but we will talk about more of those later.

Keyboard accessible controls are a huge issue for accessible web video mainly because most of the web

video in the world today is done in flash video, flash itself can be quite accessible

but displaying it on a web page poses some problems from keyboard users.

Audio description is a separate audio track that helps describe the visual information that does not come through in the audio of the video.

And lastly is accessible content,

people often forget about this when they are thinking about the technical issues with accessible video but ...

you can have a scenario where you have a keyboard accessible video with great captions

but the contet itself the actual video you made has accessibility problems

and we will talk some more about that as well, so lets go into each of those.

I am not going to talk much about auto playing videos except for don't do it.

That's my advice on auto playing videos so we will start on captions here.

Captions provide access to those who are deaf or hard of hearing,

they also allow users to access content in different languages, so I sometimes watch news from Europe

and if you can use the captions or subtitles I can get access to content that I otherwise would not be able to get.

They also allow people to access the content when sound is not an option.

So for people who are not deaf or hard of hearing

sometimes you are in an open office envrionment with cubes or something and you need to access some video content but

you also can't disturb your coworkers, close captioning or subitiles are a good option there.

When we are talking about captions they can either be closed captions which are separate from the video

- It's a separate track that plays along with the video or

open captions which are actually embedded in the video itself

I will get into that in a bit more detail in a bit

So here is an example of a YouTube video with captions playing.

YouTube does a great job with captions because they allow you to change the size and font and color contrast of them

so people with low vision and that kind of thing you get a lot more accessiblity controls than some other options.

Transcripts provide accesss to those who are hard of hearing they also allow search engine indexing of your video content

which can be a big side benefit, if you have a lot of video content.

By default it will not show up in search engine results but with transcripts

as part of the web page, that content can be indexed as well.

The hard part about transcripts is you are getting a very different experience that those who are actually watching the video

because it is very hard to watch the video and read the transcript at the same time.

So you can read the transcript and get the gist of what is happening and the spoken words are in text but you lose all of the visual content.

Here is the example of the NOVA program on PBS

and this is about butterflies but as you can see here when Chip Taylor is speaking you can see the University of Kansas

so what is happening in the actual video is there is an overlay on his speaking

and there is an overlay that says the University of Kansas.

so transcripts don't always have to have the spoken content they can also provide other content that

isn't nessisarilly clear from reading it.

If you were just reading it and did not see University of Kansas you would have no idea who Chip Tayor actually is.

You Tube has an interesting experiment that they are working with.

if you find any video on You Tube with closed captions

I beleieve it is all videos with closed captions it plays a transcript that actually scrolls by with the text and it highlights the text that is being spoken at that moment

and it allows you to click a line in the transcript and jump to that part of the video.

Like I said - reading transcripts and watching a video is a little bit difficult to do.

Here is a screen shot. It is a little bit small since it is shrunk for this webinar

here is a video playing for the Florida School of the Blind its displaying what

you can see that it has captions. Below it you can see transcrips on the left hand column you can see

(if you have very good vision) time stamps 13 seconds 18 seconds etc.

I will show you a close up of this.

Where the red arrow is pointing here next to the like share flag button

that is the button that shows the interactive transcript

it is not well marked but you can find it if you find the video with closed captions. When you click that it will expand the box below

and it basically scrolls by itself and highlights each screen and each phrase being spoken.

I haven't come across any people who are deaf or hard of hearing who find this all that useable

because it is hard to read that while you watch the video,

they do read the captions because it is on the screen and because it is synchonized with the video.

it is useful for skimming the content of the video and jumping to a certain point.

So this has a lot of accessiblity bennifits even for those who are not hard of hearing.

I encourage you to take a look at it and see what you think of it.

So keyboard access controls is our next topic.

This is a huge one, this is necessary for blind users so if you can imagine a blind user navigating the web

A mouse is not really an option because you cannot know where you are clicking

so blind users by default are keyboard users.

also anyone with a mobility impairment that prevents them from using the mouse is a keyboard only user.

So if you have an injury that prevents you from holding a mouse or using a track ball or a modified mouse...

Also a lot of power or advanced users tend to try to use a keyboard as much as possible just because it is faster.

A basic web accessiblity guideline is all your controls for everything must be accessible by keyboard

and for video they have to be intuitive.

We have seen people try to implement keyboard accessible controls

and they come up with very elaborate and creative ways to make that happen

where you hold down and eight and l and period and that causes them to pause.

The problem with that kind of thing is you either will have those who do not know that is an option

or you will have to have long descriptions on how you do each thing

and that is a lot of cogintive load for someone to remember for all of the keystrokes that do everything

So it has to be basically done with your regular keysrokes which are tab, arrow and maybey your arrow keys.

The other problem complicated video shortcuts or video players is they can tend to interfere with assisted technologies.

So blind users or those who use speech regnition software or all kinds of assisted technologies, screen magnification software,

software that is particular to their assisted technology and if you happen to overlap in one of those you are just causing more problems for them.

And lastly one of the biggest pains in the neck of developers are the browser inconsistencies of doing keyboard access for videos.

This is particularly true of flash with Firefox and either Chrome or Safari where you can either, not get into the flash element and start controling it.

with the keyboard even if the flash element is really accessible.

Or you can get into it and you can get out of it, that is a common one with Firefox people get trapped in the flash element

and they really have no other option but to close the page and start over again.

So flash video players are the most common players you will see and they often have controls that are part of the player

so they are part of the flash element.

This poses problems for keyboard only users

because there are browers that you cannot get into or if you get into you can't get out.

The other this is that it requires that the user be aware of how to do flash work accessibly.

So you can have the buttons that are very keyboard accessible but they are not labeled very well

a blind person who goes through will hear button 1, 3, 7 instead of play pause and mute.

You are relying on the developer who made the flash element.

Keyboard accessible controls are sometimes unintuitive and sometimes do not work across browsers.

Here is an example of the You Tube player you may have seen this before and down at the bottom

here you can see the play and the volume the close captioning and some You Tube specific things

and the full screen button, this is typical is kind of a specific You ube video in the YouTube player.

You can see a nicely captioned video.

Another option is CC player this is a free player in which you can download

and I have the links here and these will be sent to you afterward do you don't have to write them down.

This is very keyboard accessible in Internet Explorer and not as accessible in other browers for reasons I have mentioned before

This would be a situation in which you would host a video yourself and

then you would have to format the video and you would play it through this and add your caption files to this.

JW player is the most popular choice for people looking for accessible video players.

It is extremely fully featured, it offers different skins you can apply to it to match themes and branding and that sort of thing.

Highlighted here with arrows are two plugins.

One is for closed captioning and one is for audio description,

and you can turn those on and off when you are watching the video.

So this is quite accessible although it does have the keyboard issues that the other browsers have,

and it also requires you to be hosting your own video.

Typical solutions for keyboard control are Java Script to control the video file.

This allows you to use regular HTML links or buttons for player controls

Which is great because they are keyboard accessible, and

they can also be scaled up which is great for those who may have low vision

you can magnify links and buttons as much as you want and they are still readable unlike images or Flash elements.

When you start zooming them with a magnifying glass they can become quite pixelated and hard to see.

There are a few limitations: one is the implementations do not address getting caught in the flash element and

the other is that often the controls are not fully featured.

For people who do not need to use a keyboard, it can become cumbersome and confusing.

(i.e. for people who are using a mouse and are sighted.)

You get examples like this.

These are two very good examples they are both YouTube players, one is from the Web Accessibility project at Ohio State University and it is the one on the left

it is a little bit tricky to see but there is a You Tube video here and you can see that it has the regular YouTube player.

So mouse and sighted users can use that

and below it has a series of links that contain..."play, foward 20%, back 20%, stop, volume".

This is nice because you get regular links that can function for keyboard users.

But it is confusing for those who are not keyboard users because there are two sets of controls.

It can also be cumbersome because rather than being able to drag, let's say, to 38 seconds

you have to go foward 20% or backward 20% and this does not give you as much control.

Similar with the other ones you can run into issues where you get trapped in the flash element and you cannot get to the keyboard controls that are below.

The one on the right is the simpler version developed by Sandy Feildman who is a great web designer,

This one does not have the player controls in it.

You Tube provides a chromeless video player where you can actually not use their controls and use only your own controls.

This is in some ways better because everyone is using the same controls and you are not overwhelming people with options.

There is a nice layout here with a nice high contrast buttons.

However you have the same keyboard issues with getting places or getting trapped in the flash element.

You lose some control, however, I do like the terms that are used by everyone.

You may be thinking that this is pretty bleak, but there are some good options out there.

The key is if you are willing to put in the time or if you have the resources to do it.

One example is the JW player controls from Ohio State University.

This is basically some custom plug ins and controls that they made to go around the JW player.

It's fully keyboard and screen reader accessible. You don't get trapped in....24.37