All language subtitles for 14 - ARIA roles.en

af Afrikaans
sq Albanian
am Amharic
ar Arabic Download
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:00,005 --> 00:00:02,005 - ARIA Roles are another kind of attribute 2 00:00:02,005 --> 00:00:05,004 that can be added to any HTML element 3 00:00:05,004 --> 00:00:07,003 to give it more meaning and to make sure 4 00:00:07,003 --> 00:00:10,004 the browser understands what something is. 5 00:00:10,004 --> 00:00:13,004 Ideally, we won't need an ARIA Role. 6 00:00:13,004 --> 00:00:15,006 If we use a proper HTML element 7 00:00:15,006 --> 00:00:17,002 we'll communicate the right message 8 00:00:17,002 --> 00:00:19,005 about the semantics of the content. 9 00:00:19,005 --> 00:00:22,000 But sometimes things are not ideal. 10 00:00:22,000 --> 00:00:24,009 And we must make compromises in our Markup. 11 00:00:24,009 --> 00:00:28,002 It's especially bad if these compromises make a site hard 12 00:00:28,002 --> 00:00:31,007 or impossible for a person with a disability to use it. 13 00:00:31,007 --> 00:00:33,007 In fact, in many places it's illegal 14 00:00:33,007 --> 00:00:37,003 to make a website inaccessible to people with disabilities. 15 00:00:37,003 --> 00:00:41,003 Yeah, HTML can be a human rights issue. 16 00:00:41,003 --> 00:00:44,000 This is where ARIA Roles come in. 17 00:00:44,000 --> 00:00:47,003 The layer of information conveyed by ARIA 18 00:00:47,003 --> 00:00:50,008 tells screen readers, braille displays, magnifiers 19 00:00:50,008 --> 00:00:54,003 and other assistive technology things they need to know 20 00:00:54,003 --> 00:00:57,003 to make a site fully accessible. 21 00:00:57,003 --> 00:01:00,009 ARIA was invented right around the time more and more 22 00:01:00,009 --> 00:01:04,004 of the web started to replace native applications. 23 00:01:04,004 --> 00:01:07,002 And it's especially useful in making sure the functionality 24 00:01:07,002 --> 00:01:09,008 of a complex interface in an app 25 00:01:09,008 --> 00:01:12,003 is fully usable by everyone. 26 00:01:12,003 --> 00:01:14,000 Let's look at a design example 27 00:01:14,000 --> 00:01:16,009 that needs help from ARIA Roles. 28 00:01:16,009 --> 00:01:18,004 I've been using CSS Grid lately, 29 00:01:18,004 --> 00:01:21,005 to push the boundaries of graphic design on the web. 30 00:01:21,005 --> 00:01:24,004 I've taken this h1 headline, hello world, 31 00:01:24,004 --> 00:01:27,007 and used CSS layout on each letter in a different cell 32 00:01:27,007 --> 00:01:29,003 on a different part of the grid. 33 00:01:29,003 --> 00:01:30,009 Cool, right? 34 00:01:30,009 --> 00:01:34,009 But to do this, I need an HTML element around each letter. 35 00:01:34,009 --> 00:01:37,001 So I can target each one with CSS. 36 00:01:37,001 --> 00:01:39,007 But this is going to be a terrible experience 37 00:01:39,007 --> 00:01:40,008 for a screen reader. 38 00:01:40,008 --> 00:01:42,004 Instead of saying, hello world, 39 00:01:42,004 --> 00:01:48,005 it will say, H-E-L-L-O-W-O-R-L-D. 40 00:01:48,005 --> 00:01:50,000 We can see this happening 41 00:01:50,000 --> 00:01:53,005 in the Firefox Accessibility Inspector. 42 00:01:53,005 --> 00:01:56,006 Open up the dev tools and go to this tab 43 00:01:56,006 --> 00:01:58,007 that says Accessibility. 44 00:01:58,007 --> 00:01:59,009 Turn it on. 45 00:01:59,009 --> 00:02:03,006 Here we get a view into the accessibility tree. 46 00:02:03,006 --> 00:02:05,009 I talked about the DOM tree earlier. 47 00:02:05,009 --> 00:02:08,000 The accessibility tree is another tree 48 00:02:08,000 --> 00:02:10,005 that the browser builds from the content. 49 00:02:10,005 --> 00:02:12,006 It takes the original HTML. 50 00:02:12,006 --> 00:02:15,000 It uses that to build the DOM tree. 51 00:02:15,000 --> 00:02:16,004 And then it takes the DOM tree 52 00:02:16,004 --> 00:02:19,002 to build the accessibility tree. 53 00:02:19,002 --> 00:02:21,008 The accessibility tree is what assistive devices use 54 00:02:21,008 --> 00:02:23,009 to provide an experience of the website 55 00:02:23,009 --> 00:02:25,005 through a screen reader. 56 00:02:25,005 --> 00:02:28,001 We can open this up and see that it understands 57 00:02:28,001 --> 00:02:32,000 this content as a bunch of separate text containers. 58 00:02:32,000 --> 00:02:34,000 Each one with a text leaf 59 00:02:34,000 --> 00:02:37,004 which will get read out as H-E-L-L-O, 60 00:02:37,004 --> 00:02:39,004 which is a terrible experience. 61 00:02:39,004 --> 00:02:41,003 That's not what we want. 62 00:02:41,003 --> 00:02:44,002 Let's fix it by using ARIA. 63 00:02:44,002 --> 00:02:47,007 First, we'll add the words that the screen reader will read 64 00:02:47,007 --> 00:02:51,000 by adding an ARIA label on the HTML. 65 00:02:51,000 --> 00:02:53,008 ARIA label equals hello world. 66 00:02:53,008 --> 00:02:56,000 And then we'll hide the big massive spans 67 00:02:56,000 --> 00:02:57,000 in separate letters 68 00:02:57,000 --> 00:02:59,005 so the accessibility tree ignores them. 69 00:02:59,005 --> 00:03:02,006 ARIA hidden equals true removes that element 70 00:03:02,006 --> 00:03:06,004 and all of its children from the accessibility tree. 71 00:03:06,004 --> 00:03:08,003 It's still in the DOM tree. 72 00:03:08,003 --> 00:03:11,005 But for the purposes of assistive devices it's gone. 73 00:03:11,005 --> 00:03:14,003 Which is why we're not going to put it on the h1. 74 00:03:14,003 --> 00:03:17,008 We want the h1 to be seen by the accessibility tree. 75 00:03:17,008 --> 00:03:20,003 We just don't want all these spans to show up. 76 00:03:20,003 --> 00:03:22,007 So I wrap the spans and a div 77 00:03:22,007 --> 00:03:26,000 so we can put ARIA hidden equals true on that div. 78 00:03:26,000 --> 00:03:27,008 Let's see what this does. 79 00:03:27,008 --> 00:03:30,002 I reload the page, and boom, 80 00:03:30,002 --> 00:03:33,002 all those letters in separate containers are gone. 81 00:03:33,002 --> 00:03:37,002 And instead, we have a nice heading of hello world. 82 00:03:37,002 --> 00:03:39,007 ARIA is a powerful addition to the web stack, 83 00:03:39,007 --> 00:03:42,005 and it deserves a deep dive on its own. 84 00:03:42,005 --> 00:03:44,001 I do encourage you to dig in 85 00:03:44,001 --> 00:03:46,008 especially if you're on a team that's struggling 86 00:03:46,008 --> 00:03:49,001 to be able to use proper semantic HTML, 87 00:03:49,001 --> 00:03:52,007 or is building a complex application interface. 88 00:03:52,007 --> 00:03:55,007 ARIA Roles provide you the tools you need 89 00:03:55,007 --> 00:03:59,000 to make your site accessible for everyone. 6558

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.