---
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
```
**Примітка:** Мультимедійний контент зазвичай має як візуальні, так і аудіальні компоненти. Він потребує синхронізованих субтитрів і розшифровки, щоб користувачі з вадами зору та/або слуху мали до нього доступ. Загалом, веб-розробник не є відповідальним за створення субтитрів чи розшифровки, але повинен вміти їх додавати.
# --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(/[\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
Real Coding Ninjas
A sound clip of Zersiax's screen reader in action.
```
# --solutions--
```html
Real Coding Ninjas
A sound clip of Zersiax's screen reader in action.