Breakdown per week of time to spend training in stealth, combat, and weapons.
alt в теге img в других задачах. Alt описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска.
+Например: <img src="importantLogo.jpeg" alt="Company logo">
+Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту alt и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание alt должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута alt для каждого изображения. alt в тег img так, чтобы всем стало понятно, что Camper Cat занимается каратэ. (Изображение src не ссылается на фактический файл, поэтому вы должны увидеть текст alt на дисплее.) alt в теге img в других задачах. Атрибут Alt описывает содержимое изображения и предоставляет текстовую альтернативу. Это помогает в случае, если изображение не загружается или не может быть замечено пользователем. Он также используется поисковыми системами, чтобы понять, что изображение содержит, чтобы включить его в результаты поиска. Вот пример: <img src="importantLogo.jpeg" alt="Company logo"> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не получат информацию, если они представлены только визуально. Для изображений экранные программы могут получить доступ к атрибуту alt и прочитать его содержимое для доставки ключевой информации. Хороший alt текст короткий , но описательный характер, и имел в виду , чтобы кратко передать смысл изображения. Вы всегда должны включать атрибут alt на свой образ. По спецификации HTML5 это считается обязательным. alt в тег img, который объясняет, что Camper Cat занимается каратэ. (Изображение src не ссылается на фактический файл, поэтому вы должны увидеть текст alt на дисплее.) input , которое может использоваться для создания нескольких различных элементов управления данной формой. Атрибут type в этом элементе указывает, какой тип ввода будет создан. Возможно, вы заметили text и submit типы ввода в предыдущих задачах, а в HTML5 появилась опция указать поле date . В зависимости от поддержки браузера в поле input появляется окно выбора даты, когда оно находится в фокусе, что облегчает заполнение формы для всех пользователей. Для более старых браузеров тип будет по умолчанию использоваться для text , поэтому он помогает показывать пользователям ожидаемый формат даты на этикетке или в качестве заменителя текста на всякий случай. Вот пример: <label for = "input1"> Введите дату: </ label>
<input type = "date" id = "input1" name = "input1">
input тег с type атрибутом «дата», с id атрибута «pickdate», и name атрибута «дата». input . Это поле может использоваться для создания различных элементов управления формой. Атрибут type в этом элементе указывает, какой тип информации может быть введен. Возможно, вы уже встречали в предыдущих задачах типы ввода text и submit . В HTML5 появилась возможность указать поле date . В зависимости от поддержки браузера в поле input появляется окно выбора даты, что облегчает заполнение формы для всех пользователей. Для более старых браузеров будет по умолчанию использоваться тип text , он также помогает показывать пользователям ожидаемый формат даты, но в текстовом виде. Например: <label for = "input1"> Введите дату: </ label>
<input type = "date" id = "input1" name = "input1">
input тег с type атрибутом «дата», с id атрибутом «pickdate», и name атрибутом «дата». Tell us the best date for the competition
- + - + @@ -70,10 +72,10 @@ tests:color текста для button на синем.
+ - text: Ваш код должен изменить цвет color текста для button на синий.
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text color for the button to the dark blue.");'
```
@@ -57,10 +61,10 @@ tests:
background-color с color текстом в темно-коричневом color имеет коэффициент контрастности 2,5: 1. Вы можете легко регулировать яркость цветов, так как он объявил их, используя hsl() CSS hsl() (которое означает оттенок, насыщенность, легкость), изменив третий аргумент. Увеличьте значение светочувствительности background-color с 35% до 55% и уменьшите значение color яркости от 20% до 15%. Это улучшает контрастность до 5.9: 1. background-color с color текстом в темно-коричневом оттенке color. Однако это сочетание имеет недостаточный коэффициент контрастности - всего 2,5 : 1. Camper Cat обозначил выбранные цвета, используя hsl() CSS hsl() (которое означает оттенок, насыщенность, освещенность). Вы можете легко отрегулировать яркость цвета всего лишь изменив третий аргумент. Увеличьте значение светочувствительности background-color с 35% до 55% и уменьшите значение color яркости от 20% до 15%. Это улучшит контрастность до 5.9: 1. a ). Наличие списка ссылок «нажмите здесь» или «прочитать больше» не поможет. Вместо этого вы должны использовать короткий, но описательный текст в тегах a чтобы предоставить больше смысла для этих пользователей. a ). Поэтому ссылки вида "продолжение здесь", "читать дальше" или "нажмите здесь" - это плохое решение. Вместо этого вы должны использовать короткий, но емкое описание между тегами a. Так вы не потеряете пользователей, которые используют аудиоинтерфейс.a ), чтобы они обернули текст «информация об аккумуляторах» вместо «Нажмите здесь». a ) так, чтобы они выдавали описание "information about batteries"(«информация об аккумуляторах») вместо "Click here"(«Нажмите здесь»). a'
+
+ - text: 'Ваш код должен переместить теги от словосочетания «Нажмите здесь» , к словосочетанию «информация об акумуляторах. a'
+
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor a tags from around the words "Click here" to wrap around the words "information about batteries".");'
- - text: 'Убедитесь , что ваш элемент имеет закрывающий тег. a'
+ - text: 'Убедитесь , что вы не забыли закрывающий тег. a'
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length, "Make sure your a element has a closing tag.");'
```
@@ -50,10 +54,10 @@ tests:
audio элемент дает смысловое значение, когда он оборачивает звук или аудио поток контента в разметке. Аудиоконтент также нуждается в текстовой альтернативе, доступной для людей, которые являются глухими или слабослышащими. Это можно сделать рядом с текстом на странице или ссылкой на стенограмму. audio тег поддерживает атрибут controls . Это показывает воспроизведение по умолчанию в браузере, паузу и другие элементы управления и поддерживает функциональность клавиатуры. Это логический атрибут, то есть он не нуждается в значении, его присутствие на теге включает настройку. Вот пример: <audio id = "meowClip" элементы управления>Заметка
<источник src = "audio / meow.mp3" type = "audio / mpeg" />
<источник src = "audio / meow.ogg" type = "audio / ogg" />
</ Аудио>
audio элемент после p . Включите атрибут controls . Затем поместите source тег внутри audio тегов с атрибутом src установленным на «https://s3.amazonaws.com/freecodecamp/screen-reader.mp3», и type атрибут «audio / mpeg». Заметка figure вместе со связанной figcaption. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту figure. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что figcaption идет внутри figure тегов и может быть объединен с другими элементами: <Цифра>
<img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота">
<br>
<Figcaption>
Мастер Кэмпер Кот демонстрирует правильный удар с разворота.
</ Figcaption>
</ Цифра>
div который он использовал для тега figure, и тэг p который окружает подпись к тегу figcaption. figcaption tag.");'
- text: У вашего кода не должно быть никаких тегов div .
testString: 'assert($("div").length == 0, "Your code should not have any div tags.");'
+
- text: Ваш код не должен иметь каких - либо p - тегов.
+
testString: 'assert($("p").length == 0, "Your code should not have any p tags.");'
- text: figcaption должен быть дочерним элементом тега figure .
testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");'
@@ -54,13 +58,13 @@ tests:
Breakdown per week of time to spend training in stealth, combat, and weapons.