4.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7789367417b2b2512aa4	Як покращити доступність аудіоконтенту за допомогою елементу audio	0	https://scrimba.com/c/cVJVkcZ	301014	improve-accessibility-of-audio-content-with-the-audio-element

--description--

Елемент HTML5 audio має семантичне значення в розмітці, якщо він огортає звуковий чи аудіо-потоковий контент. Аудіоконтент також потребує текстової альтернативи, щоб до нього мали доступ люди з глухотою чи вадами слуху. Її можна створити, розмістивши текст поряд з елементом або ж за допомогою посилання на субтитри.

Теґ audio підтримує атрибут controls. Він відображає елементи браузера за замовчуванням: відтворення, паузу та інші; а також підтримує функціональність клавіатури. Це логічний (булевий) атрибут, тобто такий, що не потребує значення, його присутність на тезі вмикає налаштування.

Наприклад:

<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.

assert($('audio').length === 1);

Елемент audio повинен містити кінцевий теґ.

assert(
  code.match(/<\/audio>/g).length === 1 &&
    code.match(/<audio.*>[\s\S]*<\/audio>/g)
);

Теґ audio повинен містити атрибут controls.

assert($('audio').attr('controls'));

Ваш код повинен містити один теґ source.

assert($('source').length === 1);

Теґ source повинен знаходитися всередині теґів audio.

assert($('audio').children('source').length === 1);

Значення атрибута src на тезі source має повністю збігатися з посиланням в поясненнях.

assert(
  $('source').attr('src') ===
    'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
);

Ваш код повинен містити атрибут type на тезі source зі значенням audio/mpeg.

assert($('source').attr('type') === 'audio/mpeg');

--seed--

--seed-contents--

<body>
  <header>
    <h1>Real Coding Ninjas</h1>
  </header>
  <main>
    <p>A sound clip of Zersiax's screen reader in action.</p>



  </main>
</body>

--solutions--

<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>

4.7 KiB Raw Blame History Unescape Escape