Translated and corrected to Russian curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/ (#24211)
* Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md * Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md * Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md * Update add-an-accessible-date-picker.russian.md * Translateto Russian * Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md * Update avoid-colorblindness-issues-by-using-sufficient-contrast.russian.md * Update add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md * Update add-an-accessible-date-picker.russian.md * Update add-an-accessible-date-picker.russian.md * Update add-an-accessible-date-picker.russian.md * Delete .Rhistory * Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md * Update avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.russian.md * Update give-links-meaning-by-using-descriptive-link-text.russian.md * Update improve-accessibility-of-audio-content-with-the-audio-element.russian.md * Update improve-chart-accessibility-with-the-figure-element.russian.md
This commit is contained in:
Kontramot
committed by
Gregory Gubarev
Gregory Gubarev
parent
16defd10ad
commit
6b5f196963
@ -1,24 +1,28 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Add a Text Alternative to Images for Visually Impaired Accessibility
|
||||
title: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
guideUrl: 'https://russian.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility'
|
||||
localeTitle: Добавить текстовую альтернативу изображениям для доступности с нарушением зрения
|
||||
localeTitle: Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения
|
||||
---
|
||||
## Description (Описание)
|
||||
<section id="description"> Вероятно, вы уже встречали атрибут <code>alt</code> в теге <code>img</code> в других задачах. <code>Alt</code> описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
|
||||
Например: <code><img src="importantLogo.jpeg" alt="Company logo"></code>
|
||||
Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание <code>alt</code> должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута <code>alt</code> для каждого изображения. </section>
|
||||
|
||||
|
||||
## Instructions (Задание)
|
||||
<section id="instructions"> Camper Cat, настоящий ниндзя в жизни и в программировании, создает веб-сайт, чтобы поделиться своими знаниями. Он хочет использовать изображение для профиля, которое продемонстрирует его навыки и будет оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code> так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section>
|
||||
## Description
|
||||
|
||||
<section id="description"> Вероятно, вы видели атрибут <code>alt</code> в теге <code>img</code> в других задачах. Атрибут <code>Alt</code> описывает содержимое изображения и предоставляет текстовую альтернативу. Это помогает в случае, если изображение не загружается или не может быть замечено пользователем. Он также используется поисковыми системами, чтобы понять, что изображение содержит, чтобы включить его в результаты поиска. Вот пример: <code><img src="importantLogo.jpeg" alt="Company logo"></code> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не получат информацию, если они представлены только визуально. Для изображений экранные программы могут получить доступ к атрибуту <code>alt</code> и прочитать его содержимое для доставки ключевой информации. Хороший <code>alt</code> текст короткий , но описательный характер, и имел в виду , чтобы кратко передать смысл изображения. Вы всегда должны включать атрибут <code>alt</code> на свой образ. По спецификации HTML5 это считается обязательным. </section>
|
||||
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat будучи не только ниндзей кодирования, но и настояющим ниндзя, создает веб-сайт, чтобы поделиться своими знаниями. Изображение профиля, которое он хочет использовать, показывает его навыки и должно быть оценено всеми посетителями сайта. Добавьте атрибут <code>alt</code> в тег <code>img</code>, который объясняет, что Camper Cat занимается каратэ. (Изображение <code>src</code> не ссылается на фактический файл, поэтому вы должны увидеть текст <code>alt</code> на дисплее.) </section>
|
||||
|
||||
## Tests (Тесты)
|
||||
|
||||
|
||||
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -46,10 +50,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,18 +3,20 @@ id: 587d778b367417b2b2512aa8
|
||||
title: Add an Accessible Date Picker
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить доступный выбор даты
|
||||
|
||||
localeTitle: Добавить возможность выбора даты
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> Формы часто включают поле <code>input</code> , которое может использоваться для создания нескольких различных элементов управления данной формой. Атрибут <code>type</code> в этом элементе указывает, какой тип ввода будет создан. Возможно, вы заметили <code>text</code> и <code>submit</code> типы ввода в предыдущих задачах, а в HTML5 появилась опция указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, когда оно находится в фокусе, что облегчает заполнение формы для всех пользователей. Для более старых браузеров тип будет по умолчанию использоваться для <code>text</code> , поэтому он помогает показывать пользователям ожидаемый формат даты на этикетке или в качестве заменителя текста на всякий случай. Вот пример: <blockquote> <label for = "input1"> Введите дату: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat создает турнир Mortal Kombat и хочет попросить своих конкурентов посмотреть, какая дата лучше всего работает. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибута «pickdate», и <code>name</code> атрибута «дата». </section>
|
||||
## Description (Описание)
|
||||
<section id="description"> Формы часто включают поле <code>input</code> . Это поле может использоваться для создания различных элементов управления формой. Атрибут <code>type</code> в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода <code>text</code> и <code>submit</code> . В HTML5 появилась возможность указать поле <code>date</code> . В зависимости от поддержки браузера в поле <code>input</code> появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип <code>text</code> , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <blockquote> <label for = "input1"> Введите дату: </ label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
|
||||
|
||||
|
||||
## Tests
|
||||
## Instructions (Задание)
|
||||
<section id="instructions"> Camper Cat решил организовать турнир по Mortal Kombat и хочет попросить будущих участников определить, какая дата для проведения лучше всего подойдет. Добавьте <code>input</code> тег с <code>type</code> атрибутом «дата», с <code>id</code> атрибутом «pickdate», и <code>name</code> атрибутом «дата». </section>
|
||||
|
||||
|
||||
## Tests (Тесты)
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -49,11 +51,11 @@ tests:
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<!-- Добавьте ваш код под этой линией -->
|
||||
|
||||
|
||||
|
||||
<!-- Add your code above this line -->
|
||||
<!-- Добавьте ваш код над этой линией -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
@ -70,10 +72,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,8 +3,11 @@ id: 587d778f367417b2b2512aad
|
||||
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Избегайте проблем со слепотой, тщательно определяя цвета, которые передают информацию'
|
||||
localeTitle: 'Будьте внимательны к пользователям, которые не могут различать некоторые цвета - аккуратно выбирайте цвет текста и фона для передачи значимой информации'
|
||||
---
|
||||
## Description (Описание)
|
||||
<section id="description"> Существуют различные формы слепоты: от пониженной чувствительности к отдельным цветам до полного отсутствия цветного зрения. Наиболее распространенной формой является снижение способности различать зеленый цвет. Например, если вы выберете два близких зеленых оттенка для текста и для фона вашей страницы, некоторые пользователи не смогут ничего различить и прочитать. Чтобы узнать, какие цвета и оттенки являются потенциально проблемными, воспользуйтесь цветовым кругом - эти цвета будут располагаться по соседству. Их следует избегать при передаче важной информации. Некоторые онлайн-инструменты для выбора цвета дают возможность увидеть сочетание цветов глазами пользователей с различными типами слепоты. Это отличные ресурсы в дополнение к онлайн-калькуляторам проверки контраста, воспользуйтесь ими. </section>
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
@ -15,11 +18,12 @@ localeTitle: 'Избегайте проблем со слепотой, тщат
|
||||
|
||||
|
||||
## Tests
|
||||
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш код должен изменить <code>color</code> текста для <code>button</code> на синем.
|
||||
- text: Ваш код должен изменить цвет <code>color</code> текста для <code>button</code> на синий.
|
||||
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
|
||||
|
||||
```
|
||||
@ -57,10 +61,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,16 +3,18 @@ id: 587d778f367417b2b2512aac
|
||||
title: Avoid Colorblindness Issues by Using Sufficient Contrast
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Избегайте проблем со слепотой, используя достаточный контраст'
|
||||
localeTitle: 'Избегайте недостаточной контрастности текста и фона, чтобы пользователю было легче их воспринимать'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Цвет - большая часть визуального дизайна, но его использование представляет две проблемы доступности. Во-первых, цвет сам по себе не должен использоваться как единственный способ передачи важной информации, потому что пользователи экранного чтения не видят этого. Во-вторых, цвета переднего и заднего фона требуют достаточного контраста, чтобы пользователи, имеющие проблемы с различием цветов, могли различать их. Предыдущие проблемы охватывали наличие текстовых альтернатив для решения первой проблемы. Последняя задача заключалась в инструментах проверки контраста, чтобы помочь во втором. Контрастность, рекомендованная WCAG, равная 4,5: 1, применяется для использования цвета, а также для комбинаций по шкале серого. Пользователи, страдающие дальтонизмом, не могут отличить некоторые цвета от других - обычно в оттенке, но иногда и в легкости. Вы можете вспомнить, что коэффициент контрастности рассчитывается с использованием значений относительной яркости (или яркости) цветов переднего плана и фона. На практике соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и облегчения более легкого с помощью анализатора цветного контраста. Более темными цветами на цветном колесе считаются синий, фиолетовый, пурпурный и красный, тогда как более светлыми цветами - оранжевый, желтый, зеленый и сине-зеленый. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat экспериментирует с использованием цвета для текста своего блога и фона, но его текущая комбинация зеленоватого <code>background-color</code> с <code>color</code> текстом в темно-коричневом <code>color</code> имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, легкость), изменив третий аргумент. Увеличьте значение светочувствительности <code>background-color</code> с 35% до 55% и уменьшите значение <code>color</code> яркости от 20% до 15%. Это улучшает контрастность до 5.9: 1. </section>
|
||||
## Description (Описание)
|
||||
<section id="description"> Цветовые сочетания - очень важная часть визуального дизайна, но с ними связано две проблемы. Во-первых, цвет, сам по себе, не должен использоваться как единственный способ передачи важной информации, потому что пользователи аудиоинтерфейсов (читалок) для экранного текста не смогут его увидеть. Во-вторых, цвета текста и фона должны быть взаимно контрастны, чтобы пользователи, у которых есть проблемы со зрением, могли бы спокойно различать текст. Предыдущие задания предлагали использовать описания изображений (текстовую альтернативу) для решения первой проблемы. Еще одно задание предлагало использовать инструменты проверки контраста, чтобы помочь справиться со второй проблемой. Уровень контрастности, рекомендованный WCAG, равен 4,5 : 1. Он применяется как для проверки контрастности сочетания разных цветов, так и для сочетания оттенков серого. Пользователи с цветовой слепотой не могут различить некоторые цвета и путают их с соседними - обычно это касается цвета вообще (человек не различает красный и зеленый). Но иногда люди так же путают соседние цвета с низкой неконтрастностью, например близкие оттенки синего и зеленого. Коэффициент контрастности рассчитывается с использованием значений относительной яркости цветов переднего плана (например, текста) и фона. На практике рекомендованное соотношение 4,5: 1 может быть достигнуто путем затемнения более темного цвета и высветления более светлого с помощью анализатора цветового контраста. Например, в качестве более темных цветов можно рассмотреть темно-синий, фиолетовый, темно-бордовый, темно-красный. В качестве легких и светлых цветов - желтый, оранжевый, зеленый и сине-зеленые оттенки. </section>
|
||||
|
||||
## Tests
|
||||
|
||||
## Instructions (Задание)
|
||||
<section id="instructions"> Camper Cat выбирает цвета для текста своего блога и фона. Сейчас ему нравится сочетание зеленоватого фона <code>background-color</code> с <code>color</code> текстом в темно-коричневом оттенке <code>color</code>. Однако это сочетание имеет недостаточный коэффициент контрастности - всего 2,5 : 1. Camper Cat обозначил выбранные цвета, используя <code>hsl()</code> CSS <code>hsl()</code> (которое означает оттенок, насыщенность, освещенность). Вы можете легко отрегулировать яркость цвета всего лишь изменив третий аргумент. Увеличьте значение светочувствительности <code>background-color</code> с 35% до 55% и уменьшите значение <code>color</code> яркости от 20% до 15%. Это улучшит контрастность до 5.9: 1. </section>
|
||||
|
||||
## Tests (Тесты)
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -59,10 +61,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,23 +3,27 @@ id: 587d778f367417b2b2512aae
|
||||
title: Give Links Meaning by Using Descriptive Link Text
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Дать ссылку, используя текст описательной ссылки'
|
||||
localeTitle: 'Определите ссылку при помощи описания'
|
||||
---
|
||||
|
||||
|
||||
## Description
|
||||
<section id="description"> У пользователей экранного считывателя есть разные опции для того, какой тип содержимого их устройство читает. Это включает в себя пропуск элементов (или над ними), переход к основному содержимому или получение сводки страниц из заголовков. Другой вариант - только слышать ссылки, доступные на странице. Экранные читатели делают это, читая текст ссылки, или то, что находится между тэгами anchor ( <code>a</code> ). Наличие списка ссылок «нажмите здесь» или «прочитать больше» не поможет. Вместо этого вы должны использовать короткий, но описательный текст в тегах <code>a</code> чтобы предоставить больше смысла для этих пользователей. </section>
|
||||
<section id="description"> У аудиоинтерфейсов (читалок), предназначенных для озвучивания текста на экране, есть разные опции в зависимости от типа контента. Они могут включать пропуск отдельных элементов, переход к основному содержимому или выдачу краткой выжимки содержания страницы только из заголовков. Или например, может быть выбрана озвучивание только ссылок, находящихся на странице. Когда мы просматриваем веб-страницу на экране, мы получаем информацию о том, куда ведет ссылка, из ее названия или того текста, который находится между тэгами anchor ( <code>a</code> ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами <code>a</code>. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Текст ссылки, который использует Camper Cat, не очень описателен без окружающего контекста. Переместите метки привязки ( <code>a</code> ), чтобы они обернули текст «информация об аккумуляторах» вместо «Нажмите здесь». </section>
|
||||
<section id="instructions"> Текст ссылки, который использует Camper Cat, не очень понятен вне контекста страницы. Переместите теги ( <code>a</code> ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»). </section>
|
||||
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Ваш код должен переместить якорь тега вокруг слов «Нажмите здесь» , чтобы обернуть вокруг слов «информация о батареях». <code>a</code>'
|
||||
|
||||
- text: 'Ваш код должен переместить теги от словосочетания «Нажмите здесь» , к словосочетанию «информация об акумуляторах. <code>a</code>'
|
||||
|
||||
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
|
||||
- text: 'Убедитесь , что ваш элемент имеет закрывающий тег. <code>a</code>'
|
||||
- text: 'Убедитесь , что вы не забыли закрывающий тег. <code>a</code>'
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
@ -50,10 +54,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,16 +3,18 @@ id: 587d7789367417b2b2512aa4
|
||||
title: Improve Accessibility of Audio Content with the audio Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Улучшить доступность аудиоконтента со звуковым элементом
|
||||
localeTitle: Улучшаем доступность аудиоконтента
|
||||
---
|
||||
|
||||
|
||||
## Description
|
||||
<section id="description"> В HTML5 <code>audio</code> элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. <code>audio</code> тег поддерживает атрибут <code>controls</code> . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <blockquote> <audio id = "meowClip" элементы управления> <br> <источник src = "audio / meow.mp3" type = "audio / mpeg" /> <br> <источник src = "audio / meow.ogg" type = "audio / ogg" /> <br> </ Аудио> <br></blockquote> <strong>Заметка</strong> <br> Мультимедийный контент обычно имеет как визуальные, так и звуковые компоненты. Для этого нужны синхронизированные подписи и расшифровка стенограммы, чтобы пользователи с визуальными и / или слуховыми нарушениями могли получить к ней доступ. Как правило, веб-разработчик не несет ответственности за создание титров или расшифровки, но должен знать, чтобы их включать. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пора отдохнуть от Camper Cat и познакомиться с кемпером Zersiax (@zersiax), чемпионом доступности и пользователем экрана. Чтобы услышать клип его экранного ридера в действии, добавьте <code>audio</code> элемент после <code>p</code> . Включите атрибут <code>controls</code> . Затем поместите <code>source</code> тег внутри <code>audio</code> тегов с атрибутом <code>src</code> установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и <code>type</code> атрибут «audio / mpeg». <strong>Заметка</strong> <br> Звуковой клип может звучать быстро и быть трудно понятен, но это обычная скорость для пользователей с экрана. </section>
|
||||
|
||||
## Tests
|
||||
|
||||
## Tests (Тесты)
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
@ -66,6 +68,6 @@ tests:
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// здесь должно быть ваше решение
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -3,15 +3,17 @@ id: 587d778a367417b2b2512aa5
|
||||
title: Improve Chart Accessibility with the figure Element
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Улучшить доступность диаграммы с помощью элемента Элемент
|
||||
localeTitle: Улучшите читаемость диаграммы
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
<section id="description"> HTML5 представил элемент <code>figure</code> вместе со связанной <code>figcaption</code>. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту <code>figure</code>. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что <code>figcaption</code> идет внутри <code>figure</code> тегов и может быть объединен с другими элементами: <blockquote> <Цифра> <br> <img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота"> <br> <br> <br> <Figcaption> <br> Мастер Кэмпер Кот демонстрирует правильный удар с разворота. <br> </ Figcaption> <br> </ Цифра> <br></blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег <code>div</code> который он использовал для тега <code>figure</code>, и тэг <code>p</code> который окружает подпись к тегу <code>figcaption</code>. </section>
|
||||
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
@ -23,7 +25,9 @@ tests:
|
||||
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
|
||||
- text: У вашего кода не должно быть никаких тегов <code>div</code> .
|
||||
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
|
||||
|
||||
- text: Ваш код не должен иметь каких - либо <code>p</code> - тегов.
|
||||
|
||||
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
|
||||
- text: <code>figcaption</code> должен быть дочерним элементом тега <code>figure</code> .
|
||||
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
|
||||
@ -54,13 +58,13 @@ tests:
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Add your code below this line -->
|
||||
<!-- Добавьте ваш код под этой строкой -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Add your code above this line -->
|
||||
<!-- Добавьте ваш код над этой строкой -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
@ -90,10 +94,10 @@ tests:
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
## Solution (Решение)
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
// ваше решение должно быть здесь
|
||||
```
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user