All above combined

Back to Overview
00:00 --> 00:11
Welcome to audio and video. This is an important topic because a lot of audio and video content is just happening on the web and you need to make sure that it's accessible to everyone.

00:12 --> 00:23
Just as a heads up, audio and video content, there's not a lot you can actually do to explore it or to test it.

00:23 --> 00:29
It's basically looking at it and saying, yeah, the features are there or they're not there.

00:29 --> 00:53
So there's not I don't think this is like the very hands on topic, but we'll give you a lot of like insight on how you can look at this and make sure that you have the experience to see if the features are there and which features are needed for which type of video.

00:53 --> 01:05
and audio. Speaking of audio, let's start with audio. Audio is available in a lot of places.

01:05 --> 01:12
You know, there are podcasts, there are audiobooks, stuff like that. And

01:12 --> 01:19
it's important that that medium is accessible for people who can't hear the audio.

01:20 --> 01:40
Let's take a quick look at an audio player example. I have prepared this. So if I go to the front and then press play, this plays. And these players look different on different websites, so don't get too hung up on how this looks.

01:40 --> 01:47
There are no requirements for the look apart from the normal design and interaction requirements.

01:47 --> 01:49
You want to have it keyboard accessible.

01:49 --> 01:52
You want to have enough contrast, stuff like that.

01:52 --> 01:56
But there's nothing really that is specific to these kinds of players.

01:57 --> 02:02
And let's hear a little bit on what's going on there.

02:02 --> 02:20
It's really not that much things happening there. It's just the intro to this podcast, in this case.

02:20 --> 02:42
And this player has a couple of comfort functionality like the go to the start and you can skip through it and then you have speed to listen and sound, mute sound and play sound doesn't even have like sound adjustment, which is totally fine. There is no requirement for accessibility for that.

02:47 --> 02:53
Some principles, general principles, the user needs to be in control of the audio.

02:53 --> 02:58
So never auto start the audio, never like spring audio on someone.

03:00 --> 03:03
There are some interactions where you can use audio.

03:03 --> 03:08
For example, if someone clicks a button and you have like little feedback sound, that would be okay.

03:08 --> 03:12
But everything that distracts from the content can be a problem.

03:13 --> 03:22
So you should never auto start audio and you should make sure that the user is in control and always say like, oh, I don't want this audio to happen right now.

03:24 --> 03:27
And on websites, you should use the audio element.

03:27 --> 03:35
And I get to it why this is so important to use these standard things all the time in a bit.

03:36 --> 03:38
Because the same goes for video as well.

03:39 --> 03:40
So let's talk about video.

03:41 --> 04:04
Video is also super important. I mean, there are a lot of videos out there. Here's an example that I like to show. This is Bill Potts, the 10th, no, not the 10th, the 12th Doctor's companion entering the TARDIS. And it's a little video player, press play.

04:11 --> 04:41
Thank you.

04:41 --> 05:11
What a great scene. Yeah, so you have this reveal and you can see that for videos, of

05:11 --> 05:20
Of course you have more options. You have the skipping around part, but you also have a couple of other things in here.

05:21 --> 05:27
This is new. Get embed code. So if you want to embed it on an external page, you can open it in picture-in-picture mode.

05:28 --> 05:35
Again, playback speeds. And you have subtitles in this case, so I can switch those on.

05:35 --> 05:38
Now I have. And then if I go back.

05:38 --> 06:03
and you know and full screen so you have all these different options as well and this is standard

06:03 --> 06:09
video player like you know it from YouTube, but it's always good to have that mode of reference.

06:12 --> 06:19
And so there's a lot of technical accessibility in here that you need to look at, like the keyboard

06:19 --> 06:26
navigation stuff, but there's also something that I think is important, and that is going beyond

06:26 --> 06:35
the technicalities and looking at how the interaction should be in the grand scheme of

06:35 --> 06:45
things. And there is this really nice use case of the BBC iPlayer that is relatively old. It's now

06:45 --> 06:53
from 2015, so it's seven years old, but it has a lot of good information on how to design

06:53 --> 07:03
a video experience. So for example, they operated under those four UX principles

07:03 --> 07:11
to give users choice, put them in control, design with familiarity in mind, and prioritize features

07:11 --> 07:20
that add value. Now, the previous screen was the old interface, and what you had was TV and radio

07:20 --> 07:27
here at the top. And then you had featured content, most popular, and an A to Z of the

07:27 --> 07:35
program and then categories and the channels were on the bottom left here. And the interesting thing

07:35 --> 07:47
was that they didn't really look at this when they started from a user perspective. They just put

07:47 --> 07:55
online, how it came. And now they redeveloped this according to these principles. And some

07:56 --> 08:06
features that added values are things like giving users on the top, like direct access to their

08:06 --> 08:13
program to BBC One or BBC Two, because people like that. Also categories here,

08:13 --> 08:22
and including in those categories, putting audio described and signed sign language as categories.

08:22 --> 08:28
So this is super useful for people who need that kind of content.

08:31 --> 08:36
Here in the teaser, same thing, looking at like what is really important for people,

08:36 --> 08:42
and there are audio descriptions and sign language icons in there as well. Just making

08:42 --> 08:50
sure that it's easy to find, easy to know what's going on here also to turn on and off sign language

08:50 --> 08:58
and audio description. So you get these accessibility features as part of the redesign as like a cohesive

09:00 --> 09:07
information here. Yeah, and that meant like putting primary information at the top,

09:07 --> 09:13
adding better search, which is also an accessibility feature. We don't talk about that too often.

09:14 --> 09:16
And then also managing keyboard access.

09:19 --> 09:27
There is this article, "Accessibility originates with UX" from Henny Sworn, which is excellent.

09:27 --> 09:33
I really, really recommend reading that.

09:33 --> 09:44
It's a good case study on how to bring video content, make it so that if you're, especially

09:44 --> 09:53
if you're a video first company like the BBC is, that you can bring that type of content

09:53 --> 10:00
into the web and make sure that your users needs are really prioritized.

10:01 --> 10:07
And of course, for we had the audio element for audio stuff, the video element, you want to use

10:07 --> 10:13
that for videos, because that's really straightforward. And of course, you have

10:13 --> 10:20
ways to embed stuff from let's say YouTube or other hosting platforms. But they use the video

10:20 --> 10:28
element and it has a lot of advantages. So first, it has a

10:28 --> 10:35
lot of these like very simple to use functionality, like auto

10:35 --> 10:41
play, controls, loop, muted and poster. So if you need to show

10:41 --> 10:45
an image while the file is downloading or before play is

10:45 --> 10:49
pressed, you can just specify the image inside of the poster.

10:50 --> 10:55
If something needs to loop, like in an animated GIF, you can specify the loop attribute.

10:57 --> 11:06
If something, if you want to display the controls, you just add the controls attribute and you're set.

11:06 --> 11:12
You don't need to do that yourself. And in most browsers, these are actually accessible. So

11:13 --> 11:20
you can make sure that you don't need to do anything. So, you know, just specify controls,

11:20 --> 11:29
and you're good to go. Talking about autoplay, this is a functionality that you should generally

11:29 --> 11:38
avoid. I have never come across a website that I deemed accessible that autoplayed video. So,

11:40 --> 11:48
just don't use it. Especially like these big background videos, they can be very hard for

11:48 --> 11:58
people with certain cognitive disabilities to ignore and they distract from the content.

11:58 --> 12:05
It's just not a good way to do it. The nice thing about HTML video elements is that

12:05 --> 12:13
most browsers now give you the option to completely disable auto playing videos.

12:13 --> 12:20
So this is a screenshot of a very old version of Safari. And basically you can say "AutoPlay,

12:20 --> 12:26
stop all, never auto play". Or you can say "I only want silent videos to auto play".

12:27 --> 12:38
So you can make that decision on a general global basis and on a website by website basis.

12:39 --> 12:42
Both elements, audio and video, are completely scripted.

12:43 --> 12:48
That means if you want to use your own UI, you can actually do that.

12:48 --> 12:57
And you can use normal HTML buttons and UI elements and users can click on that.

12:58 --> 13:00
And this is the preferred way to do this.

13:02 --> 13:11
And so if you're testing stuff for audio and video and audio or video element is used,

13:11 --> 13:21
which should be like 99% of all cases these days, then, you know, you just need to look at like,

13:21 --> 13:29
oh, does this pause button, is that available using the tab key? Is that reacting to keyboard

13:29 --> 13:37
access and stuff like that? So you don't need to do anything extra because these elements have that

13:37 --> 13:46
capability, which is super nice. How to make audio and video content accessible? Now, this is the big

13:46 --> 13:54
question, right? And I post it like this because this is much easier to understand than the opposite

13:54 --> 14:02
question, how to test for accessible audio and video content. Basically, you look for available

14:02 --> 14:08
features and if those features are not available, then you can say it's inaccessible or if all of

14:08 --> 14:20
those features are available, then it's accessible. Let's look at user needs. There are basically

14:20 --> 14:29
three user needs for audio and video and they have overlapping needs as well. So the first one is

14:29 --> 14:37
hearing. Hearing means that deaf and hard of hearing individuals have a way to consume the

14:38 --> 14:48
audio content that is in the video or in the audio. So, you know, if you can't properly hear

14:48 --> 14:56
what's going on, then you need an alternative for that. Then you have vision. So blind and

14:56 --> 15:03
low vision individuals, they need alternatives for the visual content. So that's everything that is

15:03 --> 15:11
displayed on the screen. And yeah, this is pretty obvious. Basically, you do the same thing that you

15:11 --> 15:22
would do for images, but for video. And we see how we do that in a minute. And then there's cognitive,

15:22 --> 15:27
which is basically mostly people who have issues processing information.

15:28 --> 15:38
So for some people with cognitive disabilities, it's super hard to process visual and auditory information at the same time.

15:38 --> 15:45
So for those, it's nice that if you have things like pressing pause,

15:45 --> 15:52
If you give them a way to slow down the video, that can help.

15:53 --> 16:00
And sometimes it's just that they prefer written information much more than the video.

16:00 --> 16:08
So having an alternative in written form is a good accessibility requirement there as well.

16:08 --> 16:12
Now, short tangent on the WCAG requirements.

16:12 --> 16:23
So everything about media is basically covered by 1.2 time-based media, 1.4 distinguishable, and 2.2 enough time.

16:23 --> 16:36
So these are the WCAG guidelines that mostly apply to video and audio content.

16:38 --> 16:49
And to make this harder to understand, there is a little bit of recap lingo that we need to talk about, because otherwise it's just too hard to follow.

16:51 --> 16:58
And there are basically five terms that we need to talk about.

16:58 --> 17:00
The first one is pre-recorded.

17:00 --> 17:07
Anything that is pre-recorded is anything that is not live or what we would call recorded.

17:08 --> 17:19
So if you publish a video on YouTube, if you, you know, this is a pre-recorded video and it's not live.

17:19 --> 17:24
Then there's live, which basically means what it says.

17:25 --> 17:31
That's why I put the live there as the definition, basically.

17:32 --> 17:35
But it's happening at the same time as the broadcast.

17:35 --> 17:42
So if I was live streaming this to the internet, then this would be a live audio.

17:42 --> 17:45
But I'm not, so this doesn't apply.

17:46 --> 17:51
Then there is audio only, and that's media that only includes audio.

17:51 --> 17:55
So that is all media that has no visuals or no visuals that matter.

17:56 --> 18:08
So what I mean by that is if you have an audio that is a podcast or an audio book, you don't have visuals with it that happen at the same time.

18:08 --> 18:09
So they are not connected.

18:09 --> 18:19
The same if you have like a voiceover and there is like, I don't know, there's a visualization in the background.

18:19 --> 18:26
like you often have that when you share stuff from your podcast app.

18:26 --> 18:28
You can create little visualizations.

18:28 --> 18:33
They have nothing to do really with the content.

18:33 --> 18:36
So that's all considered audio only.

18:37 --> 18:42
And then you have video only, which is the same thing, only the opposite.

18:43 --> 18:46
So this is content that only includes video.

18:46 --> 18:52
So no audio, no spoken text, no music, nothing like that.

18:53 --> 18:58
There is probably could use music, but you want to say like, oh, this includes music.

18:59 --> 19:01
And then there's synchronized media.

19:01 --> 19:08
This is WCAG language for media that includes audio and video.

19:08 --> 19:15
Basically, when two sets of media are happening at the same time and they depend on each other,

19:16 --> 19:22
you have dialogue and you want to see the person speaking move their mouth, then that is synchronized

19:22 --> 19:31
media. A certain part of the audio needs to happen at the certain time that some video happens,

19:31 --> 19:39
and that's synchronized. For the requirements, I just skip really quickly over these tables,

19:39 --> 19:43
because I think they're more distracting than useful.

19:44 --> 19:47
So these are the requirements for pre-recorded media,

19:47 --> 19:50
and these are the requirements for live media.

19:50 --> 19:54
You see that for live, there's a lot less to do.

19:55 --> 20:01
And for pre-recorded media, there are more things you should do,

20:02 --> 20:06
including some WCAG AAA success criteria.

20:06 --> 20:14
But we will talk about those at the end of the video. I don't want to distract from this, but

20:14 --> 20:21
you will see these tables in your reading and you will say, well, what's going on here? So,

20:21 --> 20:32
yeah, these are the requirements. It's not super clear and it can be a little bit distracting.

20:36 --> 20:56
Requirements for live media. I already talked about that. And this is where WCAG's focus on testing is not super useful. Because yeah, you have to test all these success criteria. But in reality, understanding what the needs are, we have already talked about that.

20:57 --> 21:08
and then seeing which features do apply to those needs is much more important.

21:11 --> 21:18
And there are basically four ways to address the needs of users in regards to media.

21:18 --> 21:25
Now, we will mostly talk about the first three, which is scripts and transcripts, captions and audio descriptions.

21:25 --> 21:36
And the reason is, if we go back to WCAG, sign language is only a AAA criteria for synchronized audio and video.

21:37 --> 21:40
And it's not even needed for live media at all.

21:41 --> 21:46
So sign language basically does not play a role when testing for WCAG.

21:47 --> 21:48
Still super important.

21:48 --> 21:53
I wish we had more regulation that says, hey, use.

21:54 --> 21:59
And that brings us to the four ways to address the needs of users in regards to media.

22:00 --> 22:08
Scripts and descriptive transcripts, captions, audio descriptions, and then sign language as basically like the cherry on top.

22:09 --> 22:14
Talking about scripts and transcripts, scripts are basically the text that speakers say.

22:14 --> 22:18
For example, the voiceover is part of their role in the movie.

22:18 --> 22:25
Transcripts is when speakers say something like I'm doing right now, I'm mostly improvising.

22:26 --> 22:30
And then you write down what the speaker said.

22:30 --> 22:32
So that's transcript.

22:33 --> 22:44
And scripts and transcripts publishing those addresses the needs of low vision folk, hard of hearing people, deaf people, and a lot of cognitive people as well.

22:44 --> 22:52
So it makes sense if you have those scripts or if you create transcripts to publish those for real.

22:52 --> 23:04
So, for example, if I go to my website, yeah, till.net/videos, I did some YouTube videos a

23:04 --> 23:10
a while ago. And if we look at, for example, over cake overview,

23:11 --> 23:15
there is this transcript, but in reality, this was the script

23:15 --> 23:20
that I was reading to the screen to the camera. And the nice

23:20 --> 23:25
thing is that you can line that up with your with your video and

23:25 --> 23:28
create captions, which is the next thing that we're doing. So

23:29 --> 23:32
that was quite nice. It was very simple. And I could just

23:32 --> 23:42
published that on my page and it was useful for a lot of people. Speaking of examples, so here's

23:42 --> 23:54
the transcript of the web ahead. This is also a podcast and was a podcast and if you show the full

23:54 --> 24:02
transcript basically it's always showing who said what and then the text that was said. And there

24:02 --> 24:08
are even timestamps in there, which you don't always need. Yeah, but that's, that's a very

24:08 --> 24:13
simple transcript, someone sat down, and there are professional people doing that. And just

24:13 --> 24:25
writing up all these different things. But what was that? So that's useful. And, and this is

24:25 --> 24:31
the general way how you can provide a transcript. Now, there are ways to have interactive transcripts

24:31 --> 24:38
there and if we look at the TED talk then we can see how that would look. So basically

24:38 --> 24:46
click "retranscript". Oh, I already had that in here and you see that there is a transcript

24:46 --> 24:49
on the right and then you can play from minute 114.

25:16 --> 25:21
Yeah, and so you have this kind of interactive transcript where you can click on things.

25:24 --> 25:31
And you jump there immediately. That can be a really nice experience, especially for research

25:31 --> 25:36
applications and stuff like that. This is not needed strictly. Just having the text as a text

25:36 --> 25:44
file, as an HTML file, is totally sufficient. But if you want to do more, you can basically go from

25:45 --> 25:54
this simple way of presenting the information over like my little bit more structured way with

25:54 --> 26:01
headings and stuff to like this interactive thing. There are no rules about this. The most important

26:01 --> 26:08
part is that everything that is said and all significant sounds are inside of that transcript.

26:10 --> 26:23
If you want to make the transcript also useful for people who cannot see a video, for example, you also want to have descriptions in there that describe the visuals.

26:24 --> 26:30
Basically as an alternative to the visible image, like an alternative text.

26:32 --> 26:36
I have not seen that done really awesomely well.

26:37 --> 26:48
But it is an option and there are some niche places where this is done, but I don't have them, unfortunately, at hand.

26:49 --> 26:51
And that brings us to captions.

26:52 --> 26:59
Captions, you probably use them, are visual textual information that reflect auditory information in the video.

26:59 --> 27:07
So this is again pretty similar to what we just did with our transcripts.

27:08 --> 27:15
This is all sounds that are in the video are reflected as captions on the screen.

27:15 --> 27:22
And generally those captions are on screen at the bottom and you can read them there.

27:22 --> 27:28
A lot of people are using this for foreign language movies.

27:28 --> 27:36
But it's obviously an important part if you can't hear what's going on in the video.

27:37 --> 27:41
Just a quick note on captions versus subtitles.

27:41 --> 27:50
In Europe, you can just use subtitles as the word in English and that means in US English.

27:50 --> 28:00
And that means also in WCAG, captions are subtitles with the same language as the source audio.

28:00 --> 28:09
So if you have an English product, then the captions are also English and subtitles are foreign language subtitles.

28:09 --> 28:25
So if you have, I don't know, a Japanese anime and you watch it with English subtitles, then they are subtitles and not captions because the language is different.

28:25 --> 28:27
It's like a minor difference.

28:27 --> 28:30
But, you know, some people are pedantic about that.

28:31 --> 28:35
So just I always say captions usually for accessibility.

28:35 --> 28:37
I usually say captions.

28:37 --> 28:39
That clears up most of the things.

28:39 --> 28:59
Example is again the TED talk from Tim Berners-Lee. So I can switch on what they call subtitles. That's why I put that slide in here. And I can just say I want English subtitles.

28:59 --> 29:08
It's not super easy to switch on, but when I do that, basically what is here in the transcript

29:08 --> 29:23
then becomes visible on the screen.

29:23 --> 29:29
For someone who talks and thinks as fast as Tim Berners-Lee, super useful to have a transcript,

29:29 --> 29:51
I tell you. So yeah, that's, that's how captions look. And the nice thing about captions is that they are that they are super useful to have them especially for, like, as I said, people who don't understand the language very well, but also for people who can't hear what is said.

29:52 --> 29:58
There are a couple of best practices here in this Smashing Magazine article, which is super new.

29:58 --> 30:01
It's from January 11th.

30:01 --> 30:07
And basically, hey, they have the same example that I had.

30:09 --> 30:15
And they go into detail what you can do when you're actively producing subtitles.

30:16 --> 30:19
This is usually not what we do when we do testing.

30:19 --> 30:28
We just say like there are no subtitles or the subtitles are, you know, don't match up what is said in the video or other things like that.

30:28 --> 30:33
So that would be classical fails for WCAG success criteria.

30:35 --> 30:39
And there are subtitles formatting conventions and stuff like that.

30:39 --> 30:41
It's really, really good.

30:41 --> 30:47
It's a nice little article on what's going on.

30:48 --> 30:50
And I really like that.

30:50 --> 31:03
So next time when you are watching something on a streaming service like Disney Plus or Apple TV Plus, they have exceptionally good captions, but also audio descriptions.

31:04 --> 31:11
So if you are looking into that, that is, you know, a homework I can do.

31:11 --> 31:14
Watch your favorite TV show with subtitles and audio descriptions.

31:14 --> 31:21
captions.

31:21 --> 31:26
And for captions, you can just use the track element in HTML.

31:26 --> 31:34
So using in this case, web VTT formatted file, putting that in again, usually you don't test

31:34 --> 31:35
for that.

31:35 --> 31:46
look for a closed caption button, you click on it, and you can then see if you have it.

31:47 --> 31:52
And then the VTT file in this case looks like this. There are a couple of different formats

31:52 --> 31:59
out there. There's WebVTT, then there's SRT. Doesn't really matter in practice for testing.

32:00 --> 32:05
Basically, what falls out of your process, you can use that.

32:05 --> 32:11
Usually just upload it and refer it from the track element.

32:12 --> 32:20
One thing that I don't have a slide about, but that is important, is open captions versus closed captions, because this is a little bit confusing.

32:20 --> 32:31
What we have here that the captions are there and you can open and close them or switch them on and off, which is not the easiest thing to do.

32:32 --> 32:34
That is called closed captioning.

32:36 --> 32:44
If the subtitles were built into the video and you could not switch them on and off, then those would be open captions.

32:45 --> 32:47
It's very confusing.

32:47 --> 32:50
I don't like that it is this way.

32:50 --> 32:57
but it is. So closed captioning is usually what you want. According to WCAG, having open captions

32:57 --> 33:05
is not a failure. So you can do that. But if you have the option to have open captions, no,

33:05 --> 33:12
closed captions, see, it's hard. If you have the option to have closed captions, then use closed

33:12 --> 33:18
captions that you can switch on and off. And that brings us to audio descriptions. Now, audio

33:18 --> 33:23
descriptions are interesting because this is basically an audio track that narrates

33:23 --> 33:26
visual information.

33:26 --> 33:33
That addresses the need of blind and low vision folks to know what's going on on the screen.

33:33 --> 33:36
I have an example here.

33:36 --> 33:48
And basically what this does is that it uses natural pauses in the video to add narration

33:48 --> 33:56
the video. And that is super clever. And it takes a lot of skills to do that. Much easier is it if

33:56 --> 34:02
you just leave enough space for the audio description. So if you put your storyboard

34:02 --> 34:07
together, you plan for the audio description, and then you can have an audio described version and

34:07 --> 34:14
non audio described version. And but but you have to plan for it. There's no no way around that.

34:17 --> 34:19
Web Accessibility Perspectives

34:19 --> 34:22
Colours with good contrast

34:22 --> 34:24
Signs with directions are shown.

34:25 --> 34:27
A woman is walking happily down the street.

34:28 --> 34:32
There's something about great design that allows it to go practically unnoticed.

34:33 --> 34:36
But it doesn't take much to make things confusing and frustrating.

34:36 --> 34:41
Choosing colours with poor contrast makes navigating, reading and interacting a real pain.

34:42 --> 34:44
The signs change to have poor contrast.

34:44 --> 34:49
The woman now looks confused. She looks at a navigation app on her phone.

34:50 --> 34:54
Good design means sufficient contrast between foreground and background colours.

34:55 --> 34:59
That's not just text and images, but links, icons and buttons.

34:59 --> 35:03
The app has a button with low contrast that changes to become clear.

35:04 --> 35:07
If it's important enough to be seen, then it needs to be clear.

35:08 --> 35:13
And this is essential for people with low contrast sensitivity, which becomes more common as we age.

35:13 --> 35:20
An older man on a sofa is looking at a tablet. He goes to read a message on his mobile phone.

35:20 --> 35:27
With good colours, websites and applications can be easier to use in more situations, like in different lighting conditions.

35:28 --> 35:32
Sun glares on the phone, but the text is still readable.

35:33 --> 35:37
Web accessibility. Essential for some, useful for all.

35:37 --> 35:42
The woman from earlier arrives at her destination using the mobile app.

35:42 --> 35:49
Visit w3.org slash WAI slash perspectives for more information on colors with good contrast.

35:50 --> 35:55
W3C Web Accessibility Initiative Copyright 2016

35:55 --> 35:58
So this is a typical example.

35:58 --> 36:12
Like whenever there's like a narration pause, so the male sounding voice in this example did like the normal narration that you have in any video.

36:13 --> 36:19
And then the female sounding voice did the audio description and described what's going on on the screen.

36:20 --> 36:24
So this typical audio description way.

36:24 --> 36:31
If you want to see this also in practice, as I said, streaming services are extremely good with accessibility.

36:32 --> 36:37
If you have Disney+, look at things like Daredevil.

36:38 --> 36:51
If you have Apple TV+, See is a good example where it's about a society of blind people, which is interesting.

36:51 --> 37:00
I've only seen the first series, so I can't comment on how good it is.

37:00 --> 37:05
But yeah, there are a lot of good examples where you can switch on captions, closed captions.

37:06 --> 37:07
No, yeah, duh.

37:08 --> 37:13
Closed captions or audio descriptions and get that information.

37:14 --> 37:17
Let's talk about additional features in MediaPlayers.

37:17 --> 37:21
I take the W3C Way Perspective videos here as an example.

37:21 --> 37:29
because they have like a very complicated media player that has a lot of features.

37:29 --> 37:32
So if we play just a short second.

37:35 --> 37:41
So we have this player and if we use the keyboard, we can go there using the tab key.

37:46 --> 37:47
There we are.

37:48 --> 37:50
And then we can restart the video.

37:50 --> 37:57
we can rewind, we can forward, we can skip through it using the keyboard, I use the arrow keys here.

37:58 --> 38:05
Then we can move to the volume, which you can also set using the arrow keys. Then we can make

38:05 --> 38:13
it slower and quicker, which can be useful for people with cognitive disabilities, that you can

38:13 --> 38:19
like basically make sure that the speed works with the speed of your brain, which sometimes can be

38:19 --> 38:28
useful. Then you can hide the captions, show the captions. And one thing that they did here is to

38:28 --> 38:34
have the captions underneath the video so they don't obscure the video source, which can be useful

38:35 --> 38:40
in some circumstances. And they did that here. You can show the transcript,

38:42 --> 39:12
which does open at the bottom. And this is actually a movable set. So you can just go and drag this up. And there you go. And then it scrolls with the content. And that is also useful. It's a little bit like the TED example, you can also hover it and jump where you want to jump. There are a lot of more preferences. Like for example, you can

39:12 --> 39:20
set the captions how you want them. And the nice thing is if you're using the standard HTML video

39:20 --> 39:25
player with the standard captions, it will actually reflect the settings that you have

39:25 --> 39:32
on your device. So if you're on iOS or macOS on Windows and you set your captions and your

39:32 --> 39:39
colors, your preferred colors and your size, then that should be reflected through every video that

39:39 --> 39:52
uses the standard method. Yeah, and then you can have descriptions, you can audio description, I

39:52 --> 40:00
have that automatically through a screen reader if you want that. You can have a lot of keyboard

40:00 --> 40:09
commands here, keyboard preferences. So this is, I think this is very in detail. And you can also

40:09 --> 40:17
say I want my transcript keyboard enabled or I want to not highlight it because that's distracting to

40:17 --> 40:25
me, then you can save that as well. So you have a lot of settings here. You can also close this

40:25 --> 40:35
window again. And this is really nice. And because this is not an audio described video, it doesn't

40:35 --> 40:42
have like an audio described transcript. But if you enable audio descriptions, and then go into the

40:42 --> 40:54
transcript, you see that the audio description is in there basically as a separate fields basically.

40:54 --> 41:03
So we have the normal narration and then where it changes into audio description, it changes how it

41:03 --> 41:05
looks.

41:28 --> 41:32
So, you know, so that doesn't work 100%.

41:32 --> 41:33
That's probably like a bug.

41:34 --> 41:41
But yeah, it's pretty neat to have like all of that content in one view.

41:41 --> 41:44
But that's all additional stuff.

41:44 --> 41:51
When you look for WCAG issues, you don't need to look that deep, unfortunately.

41:52 --> 41:55
So back to WCAG requirements.

41:55 --> 42:15
I want to quickly skip through the WCAG success criteria that are important for time-based media, for synchronized media, and give you an overview on those.

42:18 --> 42:22
So let's start with audio and video only.

42:22 --> 42:29
audio only and video only so this should actually be two success criteria and of course it is not

42:29 --> 42:40
basically these are the requirements for audio only and for video only content so if you look at

42:40 --> 42:47
1.2.1 audio only and video only pre-recorded so this is only for recorded content this is not for

42:47 --> 42:55
live content. It's level A and it basically says that if you have pre-recorded audio only,

42:55 --> 43:01
then you have to have an alternative for time-based media that presents equivalent

43:01 --> 43:11
information for pre-recorded audio only content. And alternative for time-based media is basically

43:11 --> 43:17
a document including correctly sequenced text descriptions of time-based visual and auditory

43:17 --> 43:23
information and providing means for achieving the outcomes of any time-based interaction.

43:24 --> 43:31
So basically, this alternative needs to describe everything that's happening visually and auditory.

43:34 --> 43:41
And for pre-recorded video, if you have video that is only video, no audio there, then you

43:41 --> 43:46
want to have a description like above, or you want an audio

43:46 --> 43:51
track that describes what's happening on the video. So

43:51 --> 43:54
basically someone narrating what's happening on the screen,

43:55 --> 44:00
an audio description. That applies to audio only and video

44:00 --> 44:07
only. Then 1.2.2 is about captions. This is again for pre

44:07 --> 44:14
recorded videos. And here it is. Captions are provided for pre-recorded audio content in

44:14 --> 44:20
synchronized media, except where the media alternative for text is available and is

44:20 --> 44:28
clearly labeled as such. So basically you have, if you have a video with audio,

44:29 --> 44:35
synchronized media, then you can't have either captions or you can have

44:35 --> 44:43
the alternative for time-based media. So the transcript.

44:46 --> 44:53
1.2.3 audio description or media alternative is basically the flip of the coin to captions. So

44:53 --> 44:58
this is for things that are visual on the screen. You need the audio description,

44:58 --> 45:10
but there is an exception when the video is basically an alternative for existing text already,

45:10 --> 45:11
and when it's labeled as such.

45:12 --> 45:18
So, for example, you have an instruction that is written, and then you have a video that describes the same thing.

45:18 --> 45:22
Then you don't need to have an audio description for that.

45:24 --> 45:31
Captions for live video are basically the same thing as captions for recorded media.

45:33 --> 45:42
You need captions and this is already level AA. So live captions are pretty high priority,

45:42 --> 45:48
as is audio description for media that is recorded. So now you get into this like,

45:48 --> 45:55
Oh, now we're level higher, like level AA. Now what are more harder to achieve things?

45:56 --> 46:03
So in this case, audio description for pre-recorded video is required in 1.2.5.

46:04 --> 46:11
Now for success criterion 1.2.5 audio description, this requires now an audio description for all

46:11 --> 46:16
recorded synchronized media. So for all videos that have audio, you need to have an audio

46:16 --> 46:21
description. And that basically replaces the single A success

46:21 --> 46:26
criteria 1.2.3, which says you need either a transcript or audio

46:26 --> 46:30
description. With 1.2.5, you have to have an audio

46:30 --> 46:38
description. So you will always meet 1.2.3 when you meet 1.2.5.

46:39 --> 46:43
Now, you should you should best practice is to also provide a

46:43 --> 46:52
transcript or alternative for time-based media. But you don't need to do that. If you meet 1.2.5

46:52 --> 46:59
with an audio description, then you don't need to think about 1.2.3 at all.

47:01 --> 47:08
And then we come to the AAA success criteria. So these are the out there things that you can think

47:08 --> 47:16
of and that are useful. One of those is sign language. Now, some countries like Germany,

47:16 --> 47:27
they require sign language on main pages for websites. So sometimes that's needed. And

47:27 --> 47:35
basically sign language interpretation means that you're using the sign language of the,

47:35 --> 47:47
audio, the sign language of the territory of the audio basically. So British sign language for

47:47 --> 47:54
British video, American sign language for American video, or you could also use international sign

47:54 --> 48:03
language and you have a sign language interpreter on screen. There are no requirements for how that

48:03 --> 48:10
is done. So you don't need to like, there's no height or width requirements or backgrounds or

48:10 --> 48:23
anything like that. It should just work in the in the general way these, these things are you used

48:23 --> 48:30
to having it in your territory. And then the question is also like, just making sure that,

48:31 --> 48:36
You know, they are always in view and they're not too small.

48:36 --> 48:41
But as I said, there are no hard rules about that.

48:44 --> 48:47
Then there is extended audio description for pre-recorded media.

48:47 --> 48:55
So normal 1.2.5 audio description only means you have to fill gaps in your video.

48:56 --> 49:01
And that means if you can't describe something because there is not enough time,

49:01 --> 49:06
then you can just not describe it because there's too much narration.

49:07 --> 49:10
So there's no pause in between.

49:10 --> 49:15
But 1.2.7 AAA criteria means basically you have to re-edit the video

49:15 --> 49:20
and make sure that there is enough space to insert the narration.

49:21 --> 49:26
And the example we looked at was such an extended audio description, actually.

49:26 --> 49:35
So they cut the video in a way that the narration for the audio description fit into the gaps,

49:36 --> 49:48
instead of scrambling everything into audio description there, into the gaps between

49:48 --> 50:00
narration. And then we come to 1.2.8 media alternative pre-recorded. So this is basically

50:00 --> 50:07
that you need to have an alternative for time-based media for all pre-recorded synchronized media

50:07 --> 50:15
and for pre-recorded video only media. So this is having a transcript that has all the information

50:15 --> 50:22
in it, what is said, what is visible on the screen for all video that exists.

50:23 --> 50:24
I recommend that.

50:24 --> 50:27
I think this is a good thing to do.

50:27 --> 50:31
But for WCAG purposes, it's only in AAA.

50:32 --> 50:36
That brings us to success criterion 1.2.9, audio only live.

50:37 --> 50:39
It's also AAA success criterion.

50:39 --> 50:50
And this is basically about having an alternative for time-based media that has the equivalent information for live audio-only content.

50:51 --> 50:59
So that basically means having a transcript that gets updated live while the audio is happening.

51:01 --> 51:10
And, yeah, this could have the form of live captioning, which is, you know, a double A success criteria.

51:11 --> 51:18
If you have video, it's, you know, it's more often the case that there are live captions.

51:19 --> 51:25
And so this is basically what they say is like that triple A criteria.

51:25 --> 51:31
You need to have like caption style transcripts for your audio only content.

51:31 --> 51:46
So if you have a live radio show, something like that, if you do live streams of audio content like your favorite podcast, this would be covered under the AAA 1.2.9 audio-only live success criterion.

51:50 --> 52:02
And there are two other guidelines, 1.4 distinguishable and 2.2 enough time that are kind of related to media content.

52:02 --> 52:09
And the first success criterion here is audio control.

52:10 --> 52:17
An audio control basically says if there is audio on a website that plays for more than three seconds,

52:17 --> 52:22
then you need to have a mechanism that pauses or stops that audio.

52:23 --> 52:33
Or you have a mechanism that is available that allows you to control the audio volume independently from the overall system volume level.

52:35 --> 52:36
Yeah.

52:36 --> 52:39
And this is super important.

52:39 --> 52:44
You don't want to interrupt people for a long time with automatically playing audio.

52:44 --> 52:51
As I said at the beginning, just never play audio automatically and you never have this problem.

52:52 --> 53:01
And this is usually also like even if you're inside this three seconds window, the general advice is to just not do it.

53:03 --> 53:07
And then there's 2.2.2 pause stop hide.

53:07 --> 53:14
And this is basically the same success criteria and a little bit different for video content.

53:15 --> 53:19
So this is for moving, blinking, scrolling or auto updating information.

53:20 --> 53:22
So videos move.

53:22 --> 53:25
So they are covered by this.

53:27 --> 53:34
And basically for every moving information that starts automatically and lasts for more than five seconds

53:34 --> 53:38
and presented in parallel with other content,

53:38 --> 53:42
there is a mechanism for the user to pause it, to stop it or to hide it.

53:43 --> 53:48
Unless this movement, blinking or scrolling is part of an activity where it is essential.

53:49 --> 53:52
So, for example, as part of a test or a game,

53:53 --> 53:57
there are ways that you get around it.

53:57 --> 54:01
But on normal websites, this is super important.

54:03 --> 54:13
The second auto-updating portion is not relevant to this, but that's basically for information that updates like a new sticker or something like that.

54:16 --> 54:35
And yeah, and the important part of these two success criteria is that these are interfering with the user's computer or using the computer so much that actually you automatically fail all the other success criteria if you fail one of those.

54:35 --> 54:37
So it's a pretty big deal.

54:37 --> 54:40
And then we have this link.

54:40 --> 54:41
It's just a link.

54:42 --> 54:42
It's the last slide.

54:43 --> 54:48
This is to making audio and video media accessible on the W3C side.

54:49 --> 54:50
A lot of more detail.

54:50 --> 54:55
The tables that I showed that are a little bit too complicated in my view,

54:55 --> 55:03
they are from this content and they go through the same details.

55:04 --> 55:06
They include transcripts as well.

55:06 --> 55:12
They have description of visual information, audio descriptions, and sign language.

55:12 --> 55:42
they go more into in detail on how to produce them, why they are important, and how, how you can include them or integrate them into your videos. And also there is section on user experience and benefits to organizations, which can be useful if you have to like, you know, tell someone why

55:42 --> 55:49
Why is it important that we have accessible media and you don't want to have the answer

55:49 --> 55:52
that is like, oh, we're required by law to do it.