Переменные - место хранения необходимой информации - Изучение веб-разработки

Переменные - место хранения необходимой информации
==================================================

* Назад
* Обзор: Первые шаги
* Далее

После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.

| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
| --- | --- |
| Цель: | Ознакомиться с основами переменных в JavaScript. |

Инструменты, которые вам нужны
------------------------------

В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).

Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.

Что такое переменные?
---------------------

Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:

```html
<button>Нажми на меня</button>
```

```js
const button = document.querySelector("button");

button.onclick = function () {
  let name = prompt("Как вас зовут?");
  alert("Привет " + name + ", рады видеть вас!");
};
```

В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.

Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:
```

var name = prompt('Как вас зовут?');

if (name === 'Адам') {
  alert('Привет, Адам, рады тебя видеть!');
} else if (name === 'Алан') {
  alert('Привет, Алан, рады тебя видеть!');
} else if (name === 'Белла') {
  alert('Привет, Белла, рады тебя видеть!');
} else if (name === 'Бьянка') {
  alert('Привет, Бьянка, рады тебя видеть!');
} else if (name === 'Крис') {
  alert('Привет, Крис, рады тебя видеть!');
}

// ... и так далее ...
```

Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.

Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.

Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..

Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.

![](/ru/docs/Learn/JavaScript/First_steps/Variables/boxes.png)

Объявление переменной
---------------------

Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:

```js
var myName;
var myAge;
```

Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.
```

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript console</title>
    <style>
 \* {
 box-sizing: border-box;
 }

 html {
 background-color: #0c323d;
 color: #809089;
 font-family: monospace;
 }

 body {
 max-width: 700px;
 }

 p {
 margin: 0;
 width: 1%;
 padding: 0 1%;
 font-size: 16px;
 line-height: 1.5;
 float: left;
 }

 .input p {
 margin-right: 1%;
 }

 .output p {
 width: 100%;
 }

 .input input {
 width: 96%;
 float: left;
 border: none;
 font-size: 16px;
 line-height: 1.5;
 font-family: monospace;
 padding: 0;
 background: #0c323d;
 color: #809089;
 }

 div {
 clear: both;
 }
 </style>
  </head>
  <body></body>

  <script>
 var geval = eval;
 function createInput() {
 var inputDiv = document.createElement("div");
 var inputPara = document.createElement("p");
 var inputForm = document.createElement("input");

 inputDiv.setAttribute("class", "input");
 inputPara.textContent = ">";
 inputDiv.appendChild(inputPara);
 inputDiv.appendChild(inputForm);
 document.body.appendChild(inputDiv);

 if (document.querySelectorAll("div").length > 1) {
 inputForm.focus();
 }

 inputForm.addEventListener("change", executeCode);
 }

 function executeCode(e) {
 try {
 var result = geval(e.target.value);
 } catch (e) {
 var result = "error — " + e.message;
 }

 var outputDiv = document.createElement("div");
 var outputPara = document.createElement("p");

 outputDiv.setAttribute("class", "output");
 outputPara.textContent = "Result: " + result;
 outputDiv.appendChild(outputPara);
 document.body.appendChild(outputDiv);

 e.target.disabled = true;
 e.target.parentNode.style.opacity = "0.5";

 createInput();
 }

 createInput();
 </script>
</html>
```

**Примечание:** в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.

Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.

```js
myName;
myAge;
```

В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение `undefined` . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:

```js
scoobyDoo;
```

**Примечание:** Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.

Присвоение значения переменной
------------------------------

Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (`=`), а за ним значение, которое вы хотите присвоить. Например:

```js
myName = "Chris";
myAge = 37;
```

Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:

```js
myName;
myAge;
```

Вы можете объявить переменную и задать ей значение одновременно:

```js
var myName = "Chris";
```

Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.

**Примечание:** Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется **hoisting** - прочитайте var hoisting для более подробной информации по этому вопросу.

Обновление переменной
---------------------

Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:

```js
myName = "Bob";
myAge = 40;
```

### Правила именования переменных

Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.

* Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
* Не используйте символы подчёркивания в начале имён переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.
* Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.
* Общепринято придерживаться так называемый "lower camel case", где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.
* Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
* Переменные чувствительны к регистру, так что `myage` и `myAge` - разные переменные.
* И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа `var`, `function`, `let`, и `for` для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.

**Примечание:** По ссылке можно найти довольно полный список зарезервированных ключевых слов: Lexical grammar — keywords.

Примеры хороших имён переменных:
```

age
myAge
init
initialColor
finalOutputValue
audio1
audio2
```

Примеры плохих имён переменных:
```

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman
```

Примеры имён переменных, которые вызовут ошибки:
```

var
Document
```

Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.

Типы переменных
---------------

Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.

### Числа (Numbers)

Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:

```js
var myAge = 17;
```

### Строки ('Strings')

Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.

```js
var dolphinGoodbye = "So long and thanks for all the fish";
```

### Логические (Booleans)

Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:

```js
var iAmAlive = true;
```

В действительности вы чаще будете использовать этот тип переменных так:

```js
var test = 6 < 3;
```

Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.

### Массивы (Arrays)

Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:

```js
var myNameArray = ["Chris", "Bob", "Jim"];
var myNumberArray = [10, 15, 40];
```

Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:

```js
myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40
```

Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.

В следующей статье вы узнаете больше о массивах.

### Объекты (Objects)

В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.

Попробуйте ввести следующую строку в консоль:

```js
var dog = { name: "Spot", breed: "Dalmatian" };
```

Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:

```js
dog.name;
```

Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.

Динамическая типизация
----------------------

JavaScript - это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).

Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:

```js
var myString = "Привет";
```

Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:

```js
var myNumber = "500"; // упс, это все ещё строка (string)
typeof myNumber;
myNumber = 500; // так-то лучше, теперь это число (number)
typeof myNumber;
```

Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию `typeof()` - она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная `myNumber` содержит строку `'500'`. Посмотрите, что она вернёт во второй раз, когда вы её вызовите.

Подведение итогов
-----------------

К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.

* Назад
* Обзор: Первые шаги
* Далее


Что такое JavaScript? - Изучение веб-разработки

Что такое JavaScript?
=====================

* Обзор: Первые шаги
* Далее

Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.

| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS. |
| --- | --- |
| Цели: | Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице. |

Определение высокого уровня
---------------------------

JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (HTML и CSS) мы детально раскрыли в других частях учебного пособия.

![Три слоя стандартных веб-технологий: HTML, CSS и JavaScript](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript/cake.png)

* HTML — язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.
* CSS — язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.
* JavaScript — язык программирования, который позволяет создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и делать многое другое.

Три слоя прекрасно выстраиваются друг над другом. Для примера примера возьмём кнопку. Чтобы задать структуру, создадим разметку с помощью HTML:

```html
<button type="button">Player 1: Chris</button>
```

![Кнопка с надписью "Player 1: Chris" без дополнительных стилей](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript/just-html.png)

Затем добавим немного CSS, чтобы кнопка выглядела симпатичнее:

```css
button {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgb(200 200 0 / 0.6);
  background-color: rgb(0 217 217 / 0.6);
  color: rgb(100 0 0 / 1);
  box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  cursor: pointer;
}
```

![Кнопка с надписью "Player 1: Chris" и с применёнными стилями](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript/html-and-css.png)

И наконец добавим немного JavaScript для реализации динамического поведения:

```js
const button = document.querySelector("button");

button.addEventListener("click", updateName);

function updateName() {
  const name = prompt("Enter a new name");
  button.textContent = `Player 1: ${name}`;
}
```

Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите исходный код, или запустите вживую)!

JavaScript может делать намного больше — давайте выясним это более детально.

Так что же он *действительно* может делать?
-------------------------------------------

Ядро языка JavaScript состоит из некоторого количества обычных возможностей, которые позволяют делать следующее:

* Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной `name`.
* Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной `name` для получения полного текста, например: "Player 1: Chris".
* Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали `click (en-US)` событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
* И многое другое!

Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.

API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.

Они обычно делятся на две категории.

![](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript/browser.png)

**API-интерфейсы** браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:

* API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
* API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
* API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии - см. Chrome Experiments и webglsamples.
* Аудио и видео API, такие как `HTMLMediaElement` и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)

**Примечание:** Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей, для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по кроссбраузерному тестированию, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).

По умолчанию сторонние API-интерфейсы не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера:

* Twitter API позволяет вам отображать ваши последние твиты на вашем веб-сайте.
* Google Maps API позволяет вам встраивать пользовательские карты на ваш сайт и другой подобный функционал.

**Примечание:** Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.

Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!

Что JavaScript делает на вашей странице?
----------------------------------------

В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.

Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье Как работает CSS). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).

![](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript/execution.png)

Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.

Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.

### Безопасность браузера

Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются "средами исполнения") — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.

**Примечание:** Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.

### Последовательность выполнения JavaScript

Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:
```

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  let name = prompt('Enter a new name');
  para.textContent = 'Player 1: ' + name;
}
```

Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода `updateName()` (строки 5–8). Блок кода `updateName()` (эти типы многократно используемых блоков кода называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — `TypeError: para is undefined`. Это значит, что объект `para` ещё не существует и вы не можете добавить к нему обнаружение событий.

**Примечание:** Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.

### Интерпретируемый против компилируемого кода

В контексте программирования, вы можете услышать термины **интерпретация** и **компиляция**. JavaScript является интерпретируемым языком — код запускается сверху вниз и результат запуска немедленно возвращается. Вам не нужно преобразовывать код в другую форму, перед запуском в браузере.

С другой стороны, компилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.

Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.

### Серверный против клиентского кода

Вы так же можете услышать термины **серверный** и **клиентский** код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о **клиентском JavaScript**.

С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе Dynamic Websites – Server-side programming.

Слово **динамический** используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.

Веб-страница без динамического обновления контента называется **статической** — она просто показывает один и тот же контент все время.

Как добавить JavaScript на вашу страницу?
-----------------------------------------

JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы `<link>` для внешних стилей и `<style>` для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент `<script>`. Давайте узнаем, как это работает.

### Внутренний JavaScript

1. Сначала, сделайте локальную копию нашего файла-примера apply-javascript.html. Сохраните его в удобное для вас место.
2. Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.
3. Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом `</head>`:

```html
<script>
 // здесь будет JavaScript
</script>
```

4. Теперь добавим JavaScript внутрь элемента `<script>`, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript":

```js
document.addEventListener("DOMContentLoaded", function () {
  function createParagraph() {
    let para = document.createElement("p");
    para.textContent = "You clicked the button!";
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll("button");

  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", createParagraph);
  }
});
```

5. Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.

**Примечание:** Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как `.html` файл? Добавили ли ваш `<script>` элемент после тэга `</body>`? Ввели ли вы JavaScript именно так, как показано? **JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.**

**Примечание:** вы можете увидеть эту версию на GitHub-е как apply-javascript-internal.html (посмотреть вживую).

### Внешний JavaScript

Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.

1. Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его `script.js` — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
2. Замените ваш текущий элемент `<script>` на следующий:

```html
<script src="script.js" defer></script>
```

3. Внутри `script.js` добавьте следующий скрипт:

```js
function createParagraph() {
  let para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}
```

4. Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.

**Примечание:** вы можете увидеть эту версию на GitHub-е как apply-javascript-external.html и script.js (посмотреть вживую).

### Инлайновые JavaScript обработчики

Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:

```js
function createParagraph() {
  var para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}
```

```html
<button onclick="createParagraph()">Click me!</button>
```

Вы можете попробовать эту версию в нашей демонстрации ниже:

Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент `<button>` содержит встроенный обработчик `onclick`, который запускает функцию при нажатии кнопки.

**Но пожалуйста, не делайте этого.** Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут `onclick="createParagraph()"` к каждой кнопке, к которой вы хотите подключить JavaScript.

Использование чистой JavaScript конструкции, позволит вам выбрать все кнопки, используя одну команду. Код, который можно использовали для этой цели, выглядит следующим образом:

```js
const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}
```

Это может выглядеть немного длиннее, чем атрибут `onclick`, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.

**Примечание:** Попробуйте отредактировать вашу версию `apply-javascript.html` и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?

### Стратегии загрузки скриптов

Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.

Комментарии
-----------

Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:

* Однострочный комментарий пишется после двойного слеша (//), например:

```js
// Я комментарий
```

* Комментарий на нескольких строках пишется между строками /\* и \*/, например:

```js
/\*
 Я тоже
 комментарий
\*/
```

Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:

```js
// Функция: создаёт новый параграф и добавляет его вниз тела HTML.

function createParagraph() {
  var para = document.createElement("p");
  para.textContent = "You clicked the button!";
  document.body.appendChild(para);
}

/\*
 1. Получаем ссылки на все кнопки на странице в виде массива.
 2. Перебираем все кнопки и добавляем к ним отслеживатель события нажатия.

 При нажатии любой кнопки, будет выполняться функция createParagraph().
\*/

var buttons = document.querySelectorAll("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}
```

Выводы
------

Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.

JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы погрузимся непосредственно в практику, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.

* Обзор: Первые шаги
* Далее


Что такое доступность? - Изучение веб-разработки

Что такое доступность?
======================

* Обзор: Accessibility
* Далее

Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.

| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML и CSS. |
| --- | --- |
| Цель: | Узнать, что такое доступность, и как она влияет на вас как на веб-разработчика. |

Итак, что такое доступность?
----------------------------

Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Мы традиционно думаем об этом как о доступности для людей с ограниченными возможностями, но на самом деле, в это число входят и другие группы пользователей, которые используют мобильные устройства либо имеют медленное сетевое соединение.

Вы также можете думать о доступности как о способе предоставления равных прав и одинаковых возможностей, независимо от способностей или обстоятельств. Точно так же, как не правильно лишать человека права посещать разнообразные места, только потому что он перемещается в инвалидном кресле (общественные здания в наши дни обычно имеют пандусы для инвалидных колясок или лифты), так и не правильно исключать кого-либо из веб-пространства из-за того, что у них слабое зрение или они используют мобильный телефон. Мы все разные, но все мы люди, и поэтому имеем одинаковые (человеческие) права.

Помимо того, что доступность это просто хороший тон, она также регулируется законодательством в некоторых странах и может поспособствовать открытию важных рынков, которые в противном случае не смогут использовать ваши услуги, покупать ваши продукты и т. д.

Доступность и опыт её применения принесут пользу всем:

* Семантический HTML (который улучшает доступность) также улучшает SEO, делая ваш сайт более доступным для поиска или продажи.
* Забота о доступности демонстрирует хорошую этику и мораль, что улучшает ваш имидж в обществе.
* Другие хорошие практики, улучшающие доступность, также делают сайт более удобным для использования другими группами, такими как пользователи мобильных телефонов, пользователи с низкой скоростью сети и т.д. На самом деле, каждый может извлечь выгоду из многих таких улучшений.
* Мы упоминали, что это также закон в некоторых местах?
Какие виды ограниченных возможностей мы рассматриваем?
------------------------------------------------------

Люди с ограниченными возможностями так же разнообразны, как и люди без них, так и своими недостатками. Ключевой урок заключается в том, чтобы думать за пределами вашего собственного компьютера и того, как вы используете Интернет, и начать изучать как его используют другие — *вы не ваши пользователи.* Ниже разъясняются основные виды инвалидности, а также любые специализированные инструменты, которые используются для доступа к веб-контенту (известные как **вспомогательные технологии**).

**Примечание:** в информационном бюллетене Всемирной организации здравоохранения по вопросам Инвалидности и Здоровья говорится, что "Более 1 миллиарда людей, около 15% населения мира, имеют какую-либо форму инвалидности" и "От 110 до 190 миллионов взрослых испытывают значительные трудности в функционировании."

### Люди с нарушениями зрения

Сюда относятся люди со слепотой, слабым зрением, дальтонизмом и другие. Многие из этих людей используют экранные лупы (либо физические лупы, либо программные возможности масштабирования — большинство браузеров и операционных систем в наши дни имеют возможности масштабирования), а некоторые будут использовать программы чтения с экрана, то есть программное обеспечение, которое читает цифровой текст вслух:

* Некоторые платные коммерческие продукты, такие как JAWS (Windows) и Window Eyes (Windows).
* Некоторые бесплатные продукты, такие как NVDA (для Windows), ChromeVox (браузер Chrome, Windows и Mac ОС Х) и Orca (Linux).
* Некоторые из них встроены в операционную систему, например VoiceOver (Mac OS X и iOS), Экранный диктор(Narrator) (Microsoft Windows), ChromeVox (в ChromeOS) и TalkBack (Android).

Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в руководстве по кросс-браузерному тестированию (en-US). Видео ниже предоставляет краткий пример взаимодействия с экранными читателями.

Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. Нарушения зрения и слепота). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.

### Люди с нарушениями слуха

Эта группа людей либо имеет низкий уровень слуха, либо вообще не слышит. Люди с нарушениями слуха используют ATs (см. Вспомогательные устройства для людей с нарушениями слуха, голоса, речи или языка), но на самом деле нет специальных ATs, специфичных для использования на компьютере или в интернете.

Однако существуют специальные техники, которые следует учитывать для предоставления текстовых альтернатив аудиоконтенту, который люди смогут читать, от простых текстовых транскриптов до текстовых дорожек (т.е. подписей), которые могут отображаться вместе с видео. Об этом будет рассказано в статье позже.

Люди с нарушениями слуха представляют значительную базу пользователей — "360 миллионов человек в мире страдают от инвалидизирующей потери слуха", — говорится в информационном бюллетене Всемирной Организации Здравоохранения о Глухоте и потере слуха.

### Люди с ограниченными физическими возможностями

Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьёзно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать указатель головы для взаимодействия с компьютером.

Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.

Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатуры в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции Cross browser testing Using native keyboard accessibility (en-US).

С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше) сообщают, что в США "Процент взрослых с любым физическим нарушением функционирования: 16,1%".

### Люди с когнитивными нарушениями

Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как СДВГ (синдром дефицита внимания и гиперактивности), людям аутистического спектра, людям с шизофренией, и множество других типов нарушений. Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.

Наиболее распространённые способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.

В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:

* страницы согласованы — навигация, шапка и подвал (хедер и футер), а так же главный контент всегда находятся в одном месте.
* инструменты хорошо разработаны и просты в использовании.
* многоступенчатые процессы разбиты на логические этапы, с регулярными напоминаниями о том, как далеко вы прошли, и сколько осталось до завершения процесса, если это необходимо.
* рабочие процессы логичны, просты и требуют как можно меньше взаимодействий. Например, регистрация и вход на веб-сайт зачастую неоправданно сложны.
* страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.
* язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.
* важные моменты и контент выделены некоторым способом.
* ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.

Это не "методы доступности" как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.

С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета О состоянии инвалидности за 2014 год (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.

**Примечание:** Страница о когнитивных расстройствах на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.

Реализация доступности в проекте
--------------------------------

Распространённый миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:

* Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.
* Вы только начали рассматривать доступность и непокрытые смежные вопросы на последних этапах проекта.

Если вы рассматриваете доступность с самого начала проекта, то стоимость создания доступного контента должна быть весьма небольшой.

При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий альтернативный текст (en-US) изображения или неправильная ссылка — см. Element relationships and context (en-US)), и тестируйте с некоторыми нетрудоспособными группами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:

* Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?
* Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?
* Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?

Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчёт вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.

Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнётесь с каким-то случаем, который приводёт к тому, что определённый пользователь найдёт определённый контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трёхмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.

С другой стороны, если вы работаете на веб-сайте галереи с интересным трёхмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.

Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своём сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.

**Примечание:** В нашей статье «Об общих проблемах доступности» (en-US) рассматриваются особенности доступности, которые необходимо протестировать более подробно.

Подведём итоги:

* Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.
* Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.
* Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.
Руководство по доступности и закон
----------------------------------

Существует множество чек-листов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.

* Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются Рекомендациями по доступности веб-контента (Web Content Accessibility Guidelines — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это WCAG at a Glance. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).
* В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, Раздел 508 Закона о реабилитации в США, Федеральное постановление о безбарьерных информационных технологиях в Германии, Закон о равенстве в Великобритании, Accessibilità в Италии, Закон о дискриминации инвалидов в Австралии и т.д.

Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.

Это звучит серьёзно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.

Специальные API доступа
-----------------------

Веб-браузеры используют **специальные API доступа** (предоставляемые базовой операционной системой) которые предоставляют информацию, полезную для вспомогательных технологий (AT). AT обычно используют семантическую информацию, поэтому эта информация не включает такие вещи, как информация о стилях или JavaScript. Эта информация структурирована в дереве информации, которое называется **деревом доступности**.

Различные операционные системы имеют разные API доступа:

* Windows: MSAA/IAccessible, UIAExpress, IAccessible2
* Mac OS X: NSAccessibility
* Linux: AT-SPI
* Android: Accessibility framework
* iOS: UIAccessibility

Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить её функциями из спецификации WAI-ARIA, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье основы WAI-ARIA (en-US).

Заключение
----------

Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.

* Обзор: Accessibility
* Далее


Устранение проблем доступности - Изучение веб-разработки

Устранение проблем доступности
==============================

* Назад  (en-US)
* Обзор: Accessibility

In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.

| Prerequisites: | Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the previous articles in the course. |
| --- | --- |
| Objective: | To test basic knowledge of accessibility fundamentals. |

Starting point
--------------

To get this assessment started, you should go and grab the ZIP containing the files that comprise the example. Decompress the contents into a new directory somewhere on your local computer.

The finished assessment site should look like so:

![](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting/assessment-site-finished.png)

You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!

Project brief
-------------

For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.

### Color

The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?

### Semantic HTML

1. The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.
2. Can you update the article text to make it easier for screenreader users to navigate?
3. The navigation menu part of the site (wrapped in `<div class="nav"></div>`) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.

**Примечание:** You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.

### The images

The images are currently inaccessible to screenreader users. Can you fix this?

### The audio player

1. The `<audio>` player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
2. The `<audio>` player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
### The forms

1. The `<input>` element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
2. The two `<input>` elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
### The show/hide comment control

The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?

### The table

The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?

### Other considerations?

Can you list two more ideas for improvements that would make the website more accessible?

Assessment
----------

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

* Назад  (en-US)
* Обзор: Accessibility


HTML: Хорошая основа для доступности - Изучение веб-разработки

HTML: Хорошая основа для доступности
====================================

* Назад
* Обзор: Accessibility
* Далее

Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.

| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML (смотрите Введение в HTML), и понимания, что такое доступность. |
| --- | --- |
| Цель: | Познакомиться с тем, какие особенности HTML способствуют доступности, и как использовать их на ваших веб-страницах должным образом. |

HTML и доступность
------------------

По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.

Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:

```html
<div>Воспроизвести видео</div>
```

Но, как вы увидите далее, в данном случае намного логичнее использовать правильный элемент:

```html
<button>Воспроизвести видео</button>
```

HTML-элементы `<button>` не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки `Tab` и активировать, используя `Enter`.

Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:

1. **Легче разрабатывать** — как сказано выше, вы получаете функциональность «из коробки», плюс проще для восприятия.
2. **Лучше для мобильных** — семантический HTML легче по размеру, чем не семантический спагетти-код, и его легче сделать адаптивным.
3. **Хорошо для SEO** — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический `<div>` и т.д., поэтому клиентам будет проще найти ваш сайт.

Давайте рассмотрим доступный HTML более детально.

**Примечание:** Желательно, чтобы у вас был установлен скринридер, чтобы вы могли тестировать примеры, приведённые ниже. Посмотрите наше Руководство по скринридерам (en-US) для более подробной информации.

Хорошая семантика
-----------------

Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML-элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.

В интернете люди делают очень странные вещи с HTML разметкой. Некоторые злоупотребляют HTML, используя устаревшие практики, которые не были полностью забыты, а некоторые просто не знают. В любом случае, вам стоит заменить по возможности плохой код, где бы вы его не увидели.

У вас не всегда есть возможность избавиться от плохой вёрстки: ваши страницы могут быть сгенерированы каким-нибудь фреймворком на стороне сервера, над которым у вас нет полного контроля, или на страницах есть сторонний контент (такой как рекламные баннеры), которые вы также не контролируете.

Цель не «всё или ничего», однако — каждое улучшение, которое вам под силу сделать, поможет обеспечить доступность.

### Текстовый контент

Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:

```html
<h1>Мой заголовок</h1>

<p>Это первый раздел моей страницы.</p>

<p>Я добавлю ещё один параграф тут.</p>

<ol>
  <li>Это</li>
  <li>список для</li>
  <li>чтения</li>
</ol>

<h2>Мой подзаголовок</h2>

<p>
  Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот
  контент!
</p>

<h2>Мой второй подзаголовок</h2>

<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>
```

Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите good-semantics.html). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:

1. Скринридер озвучивает каждый заголовок по мере перемещения, оповещая вас, что является заголовком, а что параграфом.
2. Он останавливается после каждого элемента, позволяя вам переместиться в любое другое место, которое вам надо.
3. Во многих скринридерах вы можете перемещаться к следующему/предыдущему заголовкам.
4. Во многих скринридерах вы также можете вызвать список всех заголовков, который можно использовать как содержание, чтобы найти определённую информацию.

Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:

```html
<font size="7">Мой заголовок</font> <br /><br />
Это первый раздел моей страницы.
<br /><br />
Я добавлю ещё один параграф тут.
<br /><br />
1. Это
<br /><br />
2. список для
<br /><br />
3. чтения
<br /><br />
<font size="5">Мой подзаголовок</font>
<br /><br />
Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот
контент!
<br /><br />
<font size="5">Мой второй подзаголовок</font>
<br /><br />
Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.
```

Если вы попробуете полную версию с помощью скринридера (смотрите bad-semantics.html), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок.

Есть и другие проблемы, помимо доступности — сложнее стилизовать контент, используя CSS, или манипулировать им с помощью JavaScript, например, потому что там нет элементов, которые можно использовать как селекторы.

#### Использование понятного языка

Язык, который вы используете, также может влиять на доступность. В целом, лучше использовать понятный язык, который не слишком сложный, и который не использует ненужные жаргоны и сленг. Это помогает не только людям с когнитивными или другими нарушениями, но и читателям, для которых текст написан не на родном языке, молодым людям... на самом деле всем! Кроме этого, стоит избегать использование языка и символов, которые не могут быть чётко озвучено скринридером. Например:

* Не используйте тире, если можете избежать этого. Вместо «5-7», напишите «от 5 до 7».
* Не пишите сокращения: вместо «Янв» пишите «Январь».
* Расшифровывайте аббревиатуры, как минимум один или два раза. Вместо «HTML» при первом употреблении, пишите «Hypertext Markup Language».
### Вёрстка

В старые недобрые времена, люди верстали с помощью HTML-таблиц: использовали различные табличные ячейки для размещения шапки, подвала, боковую панель, колонку с основным контентом и т.д. Это плохая идея, потому что скринридер, скорее всего, выдаст непонятную озвучку, особенно, если раскладка сложная и имеет много вложенных таблиц.

Посмотрите пример табличной вёрстки, открыв table-layout.html, которая выглядит примерно так:

```html
<table width="1200">
  <!-- main heading row -->
  <tr id="heading">
    <td colspan="6">
      <h1 align="center">Шапка</h1>
    </td>
  </tr>
  <!-- nav menu row -->
  <tr id="nav" bgcolor="#ffffff">
    <td width="200">
      <a href="#" align="center">Главная</a>
    </td>
    <td width="200">
      <a href="#" align="center">Наша команда</a>
    </td>
    <td width="200">
      <a href="#" align="center">Проекты</a>
    </td>
    <td width="200">
      <a href="#" align="center">Контакты</a>
    </td>
    <td width="300">
      <form width="300">
        <input type="search" name="q" placeholder="Поиск" width="300" />
      </form>
    </td>
    <td width="100">
      <button width="100">Вперёд!</button>
    </td>
  </tr>
  <!-- spacer row -->
  <tr id="spacer" height="10">
    <td></td>
  </tr>
  <!-- main content and aside row -->
  <tr id="main">
    <td id="content" colspan="4" bgcolor="#ffffff">
      <!-- основной контент -->
    </td>
    <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
      <h2>Связанный контент</h2>

      <!-- второстепенный контент -->
    </td>
  </tr>
  <!-- spacer row -->
  <tr id="spacer" height="10">
    <td></td>
  </tr>
  <!-- footer row -->
  <tr id="footer" bgcolor="#ffffff">
    <td colspan="6">
      <p>© 2050 никто. Все права защищены.</p>
    </td>
  </tr>
</table>
```

Если вы попробуете поперемещаться с помощью скринридера, вероятно, он скажет вам, что перед вами таблица (хотя некоторые скринридеры могу различать табличную вёрстку от таблиц данных). После этого, скорее всего (в зависимости от того, какой скринридер вы используете), вам придётся переместиться в таблицу как в объект, посмотрев каждый элемент по отдельности, затем выйти из таблицы, чтобы продолжить перемещение по контенту.

Табличная вёрстка — пережиток прошлого, который имел смысл, когда поддержка CSS не была сильно распространена среди браузеров, но она создаёт путаницу среди пользователей скринридеров, и плоха по многим другим причинам (злоупотребление таблицами, пожалуй, требует больше разметки, делает дизайн менее гибким). Не делайте так!

Вы можете проверить эти утверждения, сравнив предыдущий опыт с более современной структурой веб-сайта, которая выглядит так:

```html
<header>
  <h1>Шапка</h1>
</header>

<nav>
  <!-- основная навигация -->
</nav>

<!-- Основной контент нашей страницы -->
<main>
  <!-- На ней есть статьи -->
  <article>
    <h2>Заголовок статьи</h2>

    <!-- сама статья -->
  </article>

  <aside>
    <h2>Связанный контент</h2>

    <!-- второстепенный контент -->
  </aside>
</main>

<!-- А здесь наш основной подвал, который используется на всех страницах нашего сайта -->

<footer>
  <!-- здесь содержимое подвала -->
</footer>
```

Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интернет).

На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите секционирование содержания): вы можно верстать, используя только вложенные `<div>` элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию (`<nav>`), футер (`<footer>`), повторяющийся контент (`<article>`) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью Screen Reader Support for new HTML5 Section Elements для представления поддержки этих элементов с помощью скринридеров).

**Примечание:** Помимо того, что ваш контент имеет семантическую и красивую разметку, он должен иметь логический порядок в его исходном коде — позже вы всегда можете разместить элементы там, где хотите, с помощью CSS, но располагать элементы в правильном порядке нужно в самом начале, чтобы то, что зачитывает пользователям скринридер, имело смысл.

### Элементы интерфейса

Под элементами интерфейса мы подразумеваем основные элементы веб-страниц, с которыми взаимодействует пользователь, в основном это кнопки, ссылки и элементы форм. В этом разделе мы рассмотрим основные проблемы доступности, которые стоит учитывать при создании таких элементов. В следующих статьях про WAI-ARIA и мультимедиа мы рассмотрим другие аспекты доступности пользовательского интерфейса.

Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке native-keyboard-accessibility.html (смотрите исходный код). Попробуйте понажимать клавишу `Tab`, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.

![](/ru/docs/Learn/Accessibility/HTML/button-focused-unfocused.png)

Вы можете нажать `Enter`, чтобы перейти по сфокусированной ссылке или нажать кнопку (мы добавили немного JavaScript, чтобы кнопки выводили окно с сообщением), или начать печатать в текстовом поле (другие элементы формы имеют разное управление, например, у элемента `<select>` можно отобразить опции и переключаться между ними, используя клавиши-стрелки вверх и вниз).

**Примечание:** Различные браузеры могут иметь разное управление с клавиатуры. Для более подробной информации смотрите Using native keyboard accessibility. (en-US)

Такое поведение вы получаете сразу по умолчанию, просто используя правильные элементы, например:

```html
<h1>Ссылки</h1>

<p>Это ссылка ведёт на сайт <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>
  Другая ссылка на
  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
</p>

<h2>Кнопки</h2>

<p>
  <button data-message="Это из первой кнопки">Нажми меня!</button>
  <button data-message="Это из второй кнопки">Меня тоже нажми!</button>
  <button data-message="Это из третьей кнопки">И меня!</button>
</p>

<h2>Форма</h2>

<form>
  <div>
    <label for="name">Укажите ваше имя:</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Укажите ваш возраст:</label>
    <input type="text" id="age" name="age" />
  </div>
  <div>
    <label for="mood">Выберите ваше настроение:</label>
    <select id="mood" name="mood">
      <option>Счастливый</option>
      <option>Грустный</option>
      <option>Злой</option>
      <option>Обеспокоенный</option>
    </select>
  </div>
</form>
```

Это предполагает использование соответствующим образом ссылок, кнопок, элементов форм и меток (включая элемент `<label>` для элементов форм).

Однако, опять же, люди иногда делают странные вещи с HTML. Например, иногда вы видите кнопки, размеченные с помощью элемента `<div>`:

```html
<div data-message="Это из первой кнопки">Нажми меня!</div>
<div data-message="Это из второй кнопки">Меня тоже нажми!</div>
<div data-message="Это из третьей кнопки">И меня!</div>
```

Такой код не советуется использовать: вы сразу же теряете нативную доступность с клавиатуры, которая у вас была бы, если просто использовать элемент `<button>`, к тому же `<div>` по умолчанию не имеет кнопочных стилей.

#### Добавление доступности с клавиатуры

Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв fake-div-buttons.html, а также исходный код). Мы дали нашим поддельным `<div>`-кнопкам возможность фокусироваться (в том числе через `Tab`), указав атрибут `tabindex="0"`:

```html
<div data-message="Это из первой кнопки" tabindex="0">Кликни меня!</div>
<div data-message="Это из второй кнопки" tabindex="0">Меня тоже кликни!</div>
<div data-message="Это из третьей кнопки" tabindex="0">И меня!</div>
```

Атрибут `tabindex` в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений `tabindex`:

* `tabindex="0"` — как указано выше, это значение позволяет элементу быть выделенным и достигнутым с помощью последовательной навигации. Это самое полезное значение `tabindex`.
* `tabindex="-1"` — позволяет элементам, которые обычно не принимают фокусное выделение, получать его программно, например, с помощью JavaScript, или как цель якорной ссылки.

Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью `Tab`, оно не позволяет нам активировать их кнопкой `Enter`. Для этого нам необходимо добавить хитрый кусочек JavaScript:

```js
document.onkeydown = function (e) {
  if (e.keyCode === 13) {
    // Кнопка Enter
    document.activeElement.click();
  }
};
```

Мы навешиваем обработчик событий на `document` для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события `keyCode` (en-US), проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши `Enter`, мы выполняем функцию, которая хранится в обработчике кнопки `onclick`, используя `document.activeElement.click().` `activeElement` возвращает текущий сфокусированный элемент.

Слишком много дополнительной мороки с добавлением такой функциональности. И обязательно будут ещё проблемы. **Лучше просто сразу использовать правильные элементы по назначению.**

#### Содержательные текстовые метки

Текстовые метки (описания) для элементов интерфейса полезны всем пользователям, но их правильное описание — особенно важно для пользователей с ограниченными способностями.

Вы должны следить за тем, чтобы кнопки и ссылки имели понятные и уникальные текстовые описания. Не используйте фразу «Кликните здесь», потому что пользователи скринридеров иногда вызывают список кнопок и элементов форм. В примере ниже можно увидеть такой список, вызванный из VoiceOver на Mac.

![](/ru/docs/Learn/Accessibility/HTML/voiceover-formcontrols.png)

Удостоверьтесь, что описания вне контекста имеют смысл, так же как и в контексте параграфа, в котором они содержаться. Например, вот хороший текст для ссылки:

```html
<p>
  Киты очень классные существа. <a href="whales.html">Узнай больше о китах</a>.
</p>
```

а это плохой текст для ссылки:

```html
<p>
  Киты очень классные существа. Чтобы узнать больше о китах,
  <a href="whales.html">нажмите здесь</a>.
</p>
```

>
> \*\*Примечание:\*\*Более подробно о создании ссылок и лучших практиках можно почитать в статье «Создание ссылок». Также посмотреть на примеры хороших и плохих ссылок можно на good-links.html и bad-links.html.
>
>
>

Описания форм также важны для понимания, что нужно вводить в каждое текстовое поле. Следующий пример кажется достаточно разумным:

```html
Укажите ваше имя: <input type="text" id="name" name="name" />
```

Однако, это не совсем удобно для пользователей с ограниченными возможностями. В примере нет ничего, что могло бы однозначно связать описание текстового поля с самим текстовым полем, и чётко указать, как его заполнить, если вы не можете видеть. Если бы вы воспользовались скринридером, скорее всего он озвучил описание примерно как «редактировать текст».

Следующий пример намного лучше:

```html
<div>
  <label for="name">Укажите ваше имя:</label>
  <input type="text" id="name" name="name" />
</div>
```

С такой разметкой описание будет явно связано с текстовым полем, и будет звучать как «Укажите ваше имя: редактировать текст».

![](/ru/docs/Learn/Accessibility/HTML/voiceover-good-form-label.png)

Как бонус, в большинстве браузеров привязка описания к полю ввода означает, что вы можете щёлкнуть по описанию, чтобы выбрать/активировать элемент формы. Это облегчает нажатие на элемент формы из-за увеличенной зоны нажатия.

**Примечание:** Посмотреть на хорошие и плохие пример форм можно на good-form.html и bad-form.html.

Доступные таблицы
-----------------

Обычные таблицы с данными можно сверстать очень простой разметкой, например:

```html
<table>
  <tr>
    <td>Имя</td>
    <td>Возраст</td>
    <td>Пол</td>
  </tr>
  <tr>
    <td>Гавриил</td>
    <td>13</td>
    <td>Мужской</td>
  </tr>
  <tr>
    <td>Эвелина</td>
    <td>8</td>
    <td>Женский</td>
  </tr>
  <tr>
    <td>Фрида</td>
    <td>5</td>
    <td>Женский</td>
  </tr>
</table>
```

Но есть проблемы — пользователи скринридера никак не смогут связать вместе строки или столбцы в группу данных. Чтобы это сделать, нужно знать какие из строк являются заголовками, и озаглавливают ли они строки, столбцы и т.д. Для таблицы выше это можно определить только визуально (попробуйте сами на примере, открыв bad-table.html).

Теперь посмотрим на пример таблицы с панк-группами, где можно увидеть несколько вспомогательных средств:

* Заголовки таблиц определены, используя элементы `<th>` (en-US); можно также указать являются ли они заголовками для строк или столбцов с помощью атрибута `scope`. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.
* Элемент `<caption>` и атрибут `summary` у элемента `<table>` (en-US) выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент `<caption>` обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.

**Примечание:** Более подробную информацию о доступных таблицах можно узнать в статье HTML-таблицы: продвинутые возможности и доступность.

Альтернативный текст
--------------------

В то время как текстовый контент доступен по умолчанию, этого нельзя сказать о мультимедийном контенте — изображения/видео-контент не может быть просмотрен людьми с нарушениями зрения, а аудио контент не может быть услышан людьми с нарушениями слуха. Мы подробно рассмотрим видео и аудио контент в статье о доступности мультимедиа позже, но в этой статье мы рассмотрим доступность для простого элемента `<img>`.

У нас есть простой пример, accessible-image.html, который содержит четыре копии одного и того же изображения:
```

<img src="dinosaur.png">

<img src="dinosaur.png"
     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.">

<img src="dinosaur.png"
     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов."
     title="Красный динозавр Mozilla">

<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">Красный тираннозавр Рекс Mozilla: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.</p>
```

Первое изображение, когда оно просматривается программой чтения с экрана, не очень помогает пользователю — например, VoiceOver озвучивает его как «/dinosaur.png, image». Он озвучивает имя файла, чтобы попытаться помочь. В этом примере пользователь, по крайней мере, будет знать, что это какой-то динозавр, но часто файлы могут загружаться с программно-генерируемыми именами (например, с цифровой камеры), и эти имена файлов, скорее всего, не обеспечат контекста для содержимого изображения.

**Примечание:** Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!

Когда скринридер встретит второе изображение, он озвучит атрибут `alt` полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».

Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, **альтернативного текста**, но также важность предоставления альтернативного текста в атрибуте `alt`, где это возможно. Заметьте, что содержание атрибута `alt` должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.

Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута `alt` пустым (смотрите «Пустые атрибуты alt») или просто вставить их как фон с помощью CSS.

**Примечание:** Для более подробной информации об изображениях и лучших практиках читайте «Изображения в HTML» и «Адаптивные изображения».

Если вы всё же хотите предоставить дополнительную контекстуальную информацию, поместите её в тексте рядом с изображением или внутри атрибута `title`, как показано ниже. В этом случае большинство скринридеров озвучат альтернативный текст, атрибут `title` и имя файла. Дополнительно, при наведении мышкой браузеры отобразят текст из атрибута `title` как всплывающую подсказку.

![](/ru/docs/Learn/Accessibility/HTML/title-attribute.png)

Давайте взглянем на четвёртый способ:

```html
<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">Красный тираннозавр Mozilla ...</p>
```

В этом случае мы вообще не используем атрибут `alt`. Вместо этого мы представили наше описание изображения как обычный параграф, указали `id`, и потом использовали атрибут `aria-labelledby`, сославшись на тот `id`. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута `alt`.

**Примечание:** `aria-labelledby` — часть спецификации WAI-ARIA, которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью «Основы WAI-ARIA». (en-US)

### Другие механизмы альтернативного текста

У изображений есть ещё один механизм для предоставления описательного текста. Например, есть атрибут `longdesc`, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:

```html
<img src="dinosaur.png" longdesc="dino-info.html" />
```

Звучит, как хорошая идея, особенно для такой инфографики как диаграммы с большим количеством информации, которую, в качестве альтернативы, можно представить в виде доступной таблицы с данными (смотрите предыдущий раздел). Однако, `longdesc` нестабильно поддерживается скринридерами, и контент полностью недоступен пользователям, которые не используют скринридеры. Пожалуй, намного лучше будет вставить длинное описание на страницу вместе с изображением, или указать обычную ссылку.

HTML5 содержит два новых элемента — `<figure>` и `<figcaption>`, которые, как предполагается, должны связывать какую-любо фигуру (всё что угодно, необязательно изображение) с заголовком фигуры:

```html
<figure>
  <img src="dinosaur.png" alt="Тираннозавр организации Mozilla" />
  <figcaption>
    Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с
    маленькими передними лапами и большой головой с большим количеством острых
    зубов.
  </figcaption>
</figure>
```

К сожалению, большинство скринридеров, кажется, пока ещё не умеют связывать заголовки фигур с самими фигурами, но такая структура элементов удобна для CSS стилизации, к тому же, она предоставляет способ расположить описание рядом с изображением в исходнике.

### Пустые атрибуты alt

```html
<h3>
  <img src="article-icon.png" alt="" />
  Тираннозавр Рекс: король динозавров
</h3>
```

Бывает, что в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой атрибут `alt` — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).

Причина, по которой стоит использовать пустой атрибут `alt`, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан `alt`. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут `alt`. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.

**Примечание:** По возможности для отображения декоративных изображений вы должны использовать CSS.

Заключение
----------

Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность.

* Назад
* Обзор: Accessibility
* Далее