116 lines
4.7 KiB
Markdown
116 lines
4.7 KiB
Markdown
|
---
|
|||
|
|
id: 587d7789367417b2b2512aa4
|
|||
|
|
title: Як покращити доступність аудіоконтенту за допомогою елементу audio
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
|||
|
|
forumTopicId: 301014
|
|||
|
|
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
Елемент HTML5 `audio` має семантичне значення в розмітці, якщо він огортає звуковий чи аудіо-потоковий контент. Аудіоконтент також потребує текстової альтернативи, щоб до нього мали доступ люди з глухотою чи вадами слуху. Її можна створити, розмістивши текст поряд з елементом або ж за допомогою посилання на субтитри.
|
|||
|
|
|
|||
|
|
Теґ `audio` підтримує атрибут `controls`. Він відображає елементи браузера за замовчуванням: відтворення, паузу та інші; а також підтримує функціональність клавіатури. Це логічний (булевий) атрибут, тобто такий, що не потребує значення, його присутність на тезі вмикає налаштування.
|
|||
|
|
|
|||
|
|
Наприклад:
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<audio id="meowClip" controls>
|
|||
|
|
<source src="audio/meow.mp3" type="audio/mpeg">
|
|||
|
|
<source src="audio/meow.ogg" type="audio/ogg">
|
|||
|
|
</audio>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Примітка:** Мультимедійний контент зазвичай має як візуальні, так і аудіальні компоненти. Він потребує синхронізованих субтитрів і розшифровки, щоб користувачі з вадами зору та/або слуху мали до нього доступ. Загалом, веб-розробник не є відповідальним за створення субтитрів чи розшифровки, але повинен вміти їх додавати.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Давайте відпочинемо від Camper Cat та зустрінемося з його приятелем Зерсіаксом (@zersiax), чемпіоном з доступності та користувачем програми для читання з екрану. Щоб почути запис роботи зчитувача з екрану, додайте елемент `audio` після `p`. Додайте атрибут `controls`. Потім розмістіть теґ `source` всередині теґів `audio`, налаштувавши значення атрибуту `src` на `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`, а значення атрибуту `type` - на `"audio/mpeg"`.
|
|||
|
|
|
|||
|
|
**Примітка:** Запис може здатися занадто швидким і малозрозумілим, але це звичайна швидкість для користувачів зчитувачів з екрану.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш код повинен містити один теґ `audio`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('audio').length === 1);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `audio` повинен містити кінцевий теґ.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
code.match(/<\/audio>/g).length === 1 &&
|
|||
|
|
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Теґ `audio` повинен містити атрибут `controls`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('audio').attr('controls'));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код повинен містити один теґ `source`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('source').length === 1);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Теґ `source` повинен знаходитися всередині теґів `audio`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('audio').children('source').length === 1);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Значення атрибута `src` на тезі `source` має повністю збігатися з посиланням в поясненнях.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(
|
|||
|
|
$('source').attr('src') ===
|
|||
|
|
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
|||
|
|
);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Ваш код повинен містити атрибут `type` на тезі `source` зі значенням audio/mpeg.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('source').attr('type') === 'audio/mpeg');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<h1>Real Coding Ninjas</h1>
|
|||
|
|
</header>
|
|||
|
|
<main>
|
|||
|
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<header>
|
|||
|
|
<h1>Real Coding Ninjas</h1>
|
|||
|
|
</header>
|
|||
|
|
<main>
|
|||
|
|
<p>A sound clip of Zersiax's screen reader in action.</p>
|
|||
|
|
<audio controls>
|
|||
|
|
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
|||
|
|
</audio>
|
|||
|
|
</main>
|
|||
|
|
</body>
|
|||
|
|
```
|