start_url - Web App Manifest

start\_url
==========

|  |  |
| --- | --- |
| Type | `String` |
| Mandatory | No |
| Example |
```json
"start\_url": "https://example.com"
```
 |

`start_url` является строкой, представляющей начальный URL-адрес веб-приложения — предпочтительный URL-адрес, который должен быть загружен при запуске пользователем веб-приложения (например, когда пользователь нажимает на значок веб-приложения в меню приложений или на домашнем экране).

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

Примеры
-------

### Absolute URL

```json
"start\_url": "https://example.com"
```

### Relative URL

Если URL является относительным, для его разрешения используется URL манифеста.

```json
"start\_url": "../startpoint.html"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # start\_url-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


orientation - Web App Manifest

orientation
===========

|  |  |
| --- | --- |
| Type | `String` |
| Mandatory | No |
| Example |
```json
"orientation": "portrait-primary"
```
 |

`orientation` определяет ориентацию по умолчанию для всех верхних уровней контекстов браузера приложения.

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

**Примечание:** Ориентация может быть изменена во время выполнения через `API Ориентации экрана` (en-US).

Значения
--------

`orientation` может иметь одно из следующих значений:

* `any`
* `natural`
* `landscape`
* `landscape-primary`
* `landscape-secondary`
* `portrait`
* `portrait-primary`
* `portrait-secondary`
Пример
------

```json
"orientation": "portrait-primary"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # orientation-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


name - Web App Manifest

name
====

|  |  |
| --- | --- |
| Type | `String` |
| Mandatory | Yes |
| Example |
```json
"name": "Awesome application"
```
 |

`name` - это строка, которая представляет имя веб-приложения, как оно обычно отображается пользователю (например, среди списка других приложений или в качестве метки для значка). `name` поддерживает направленность, что означает, что оно может отображаться слева направо или справа налево в зависимости от значений свойств `dir` и `lang` манифеста.

Примеры
-------

Простое `name` на языке слева направо:

```json
"name": "Потрясающее приложение"
```

`name` справа налево на арабском:

```json
"dir": "rtl",
"lang": "ar",
"name": "!أنا من التطبيق"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # name-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


short_name - Web App Manifest

short\_name
===========

|  |  |
| --- | --- |
| Тип | `String` |
| Обязателен | Нет |
| Пример |
```json
"short\_name": "Awesome app"
```
 |

Элемент `short_name` — это строка, которая определяет название веб-приложения показываемое пользователю, если для отображения `name` не достаточно места (например, в качестве надписи под иконкой приложения на экране телефона). `short_name` может отображаться слева-направо или справе-налево, в зависимости от значений свойств `dir` и `lang` манифеста.

Примеры
-------

Обычно `short_name` отображается слева-направо:

```json
"name": "Awesome application",
"short\_name": "Awesome app"
```

`short_name` на арабском отображается справа-налево:

```json
"dir": "rtl",
"lang": "ar",
"name": "تطبيق رائع",
"short\_name": "رائع"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # short\_name-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


categories - Web App Manifest

categories
==========

|  |  |
| --- | --- |
| Type | `Array` of `String`s |
| Mandatory | No |
| Example |
```json
"categories": ["music"]
```
 |

`categories` - это массив строк, определяющих имена категорий, к которым, предположительно, относится приложение. Нет стандартного списка возможных значений, но W3C поддерживает список известных категорий.

**Примечание:** `categories` используются только в качестве подсказок для каталогов или магазинов, содержащих веб-приложения. Как и поисковые системы и meta ключевые слова, каталоги и магазины могут игнорировать их.

>
> \*\*Примечание:\*\*значения `categories` изменяются в каталогах и магазинах перед обработкой на нижний регистр, поэтому «Новости» и «новости» рассматриваются как одно и то же значение. Разработчикам рекомендуется использовать строчные буквы в первую очередь.
>
>
>

Пример
------

```json
"categories": ["books", "education", "medical"]
```

Спецификации
------------

| Specification |
| --- |
| Web App Manifest - Application Information # categories-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


scope - Web App Manifest

scope
=====

|  |  |
| --- | --- |
| Type | `String` |
| Mandatory | No |
| Example |
```json
"scope": "/app/"
```
 |

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

Если область относительный URL, базовым URL будет URL манифеста.

Примеры
-------

Если область относительная, URL манифеста используется как базовый URL:

```json
"scope": "/app/"
```

Следующая область ограничивает навигацию текущим сайтом:

```json
"scope": "https://example.com/"
```

Наконец, в следующем примере навигация ограничена подкаталогом текущего сайта:

```json
"scope": "https://example.com/subdirectory/"
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # scope-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


screenshots - Web App Manifest

screenshots
===========

|  |  |
| --- | --- |
| Type | `Object` |
| Mandatory | No |
| Example |
```json
"screenshots": [
  {
    "src": "screenshot.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
]
```
 |

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

Пример
------

```json
"screenshots" : [
  {
    "src": "screenshot1.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  },
  {
    "src": "screenshot2.webp",
    "sizes": "1280x720",
    "type": "image/webp"
  }
]
```

Спецификации
------------

| Specification |
| --- |
| Web App Manifest - Application Information # screenshots-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


prefer_related_applications - Web App Manifest

prefer\_related\_applications
=============================

|  |  |
| --- | --- |
| Type | `Boolean` |
| Mandatory | No |
| Example |
```json
"prefer\_related\_applications": true
```
 |

`prefer_related_applications` является значением типа `boolean`, которое указывает, что приложения, перечисленные в `related_applications`, должны быть предпочтительнее веб-приложения. Если для `prefer_related_applications` установлено значение `true`, пользовательский агент может предложить установить одно из связанных приложений вместо этого веб-приложения.

Если опущено, `prefer_related_applications` по умолчанию `false`.

Пример
------

```json
"prefer\_related\_applications": true
```

Спецификации
------------

| Specification |
| --- |
| Web Application Manifest # prefer\_related\_applications-member |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Контрольный список по мобильной доступности - Доступность

Контрольный список по мобильной доступности
===========================================

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

Цвет
----

* Контраст цвета **ДОЛЖЕН** соответствовать требованиям уровня AA WCAG 2.0:
    + Коэффициент контрастности 4.5:1 для обычного текста (менее 18 пунктов или 14 пунктов для жирного текста).
    + Коэффициент контрастности 3:1 для крупного текста (минимум 18 пунктов или 14 пунктов для жирного текста).
* Информация, передаваемая через цвет, **ДОЛЖНА** быть доступна и другими способами (подчёркнутый текст для ссылок и т. д.).
Видимость
---------

* Техники сокрытия содержимого, такие как нулевая непрозрачность, порядок z-индекса и размещение вне экрана, **НЕ ДОЛЖНЫ** использоваться исключительно для управления видимостью.
* Всё, кроме видимого в данный момент экрана, **ДОЛЖНО** быть действительно невидимым:
    + **ИСПОЛЬЗУЙТЕ** `hidden` **атрибут или свойство** **`visibility`** или изменяйте тип отображения.
    + Без абсолютной необходимости, **НЕ ИСПОЛЬЗУЙТЕ** `aria-hidden` атрибут.
Фокус
-----

* Все интерактивные элементы **ДОЛЖНЫ** иметь состояние фокуса:
    + Стандартные элементы, такие как ссылки, кнопки и поля формы фокусируемые по умолчанию.
    + Нестандартные элементы **ДОЛЖНЫ** иметь соответствующую ARIA-роль, назначенную им. Например, кнопка, ссылка или чекбокс.
* Фокус должен обрабатываться в логическом порядке и последовательным образом.
Текстовые эквиваленты
---------------------

* Текстовый эквивалент **ДОЛЖЕН** быть предусмотрен для каждого не строго презентационного нетекстового элемента в приложении.
    + Используйте *alt* и *title* там, где это уместно (см. статью Steve Faulkner's про использование HTML атрибута `<title>`).
    + Если вышеуказанные атрибуты неприменимы, используйте соответствующие ARIA-свойства, такие как `aria-label`, `aria-labelledby`, или `aria-describedby`.
* Необходимо **ИЗБЕГАТЬ** текста внутри изображений.
* Все элементы формы **ДОЛЖНЫ** иметь метки (`<label>` элементы) в интересах пользователей программы чтения с экрана.
Обработка состояния
-------------------

* Стандартные элементы, такие как радиокнопки и чекбоксы обрабатываются операционной системой. Однако, для других кастомных элементов изменения состояния должны быть предоставлены через ARIA-состояния, такие как `aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded`, and `aria-pressed`.
Общие рекомендации
------------------

* **ДОЛЖНО** быть указано название приложения (`<title>` элемент).
* Заголовки **НЕ ДОЛЖНЫ** нарушать иерархическую структуру.

```html
<h1>Заголовок верхнего уровня</h1>
<h2>Вторичный заголовок</h2>
<h2>Другой вторичный заголовок</h2>
<h3>Заголовок низкого уровня</h3>
```

* ARIA Landmark Roles **СЛЕДУЕТ** использовать для описания приложения или структуры документа, такие как `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`.
* Обработчики сенсорных событий **ДОЛЖНЫ** запускаться только при соответствующих событиях.
* Области нажатия **ДОЛЖНЫ** быть достаточно большими, чтобы пользователь мог взаимодействовать с ними (см. статью BBC Mobile Accessibility Guidelines с полезными рекомендациями по размеру области нажатия для сенсорного объекта).

**Примечание:** The original version of this document was written by Yura Zenevich.


Навигация с клавиатуры в JavaScript - Доступность

Навигация с клавиатуры в JavaScript
===================================

Как сделать для JavaScript-виджетов на основе span или div возможность навигации с клавиатуры.

### Обзор

Веб-приложения часто используют JavaScript, чтобы имитировать работу различных элементов, перешедших в веб с десктопных приложений: динамические меню, закладки, нестандартные элементы форм. Все эти элементы можно назвать виджетами. В вёрстке виджеты обычно состоят из набора HTML-элементов `<div>` и `<span>`, которые по умолчанию не предоставляют возможности работать с ними, используя клавиатуру. В данной статье описывается техника, позволяющая сделать JS-виджеты управляемыми с клавиатуры.

### Использование tabindex

Атрибут `tabindex` был представлен в спецификации HTML 4. Он позволяет задать порядок, в котором элементы будут получать фокус при навигации с клавиатуры. Текущая реализация, описанная в HTML 5 draft specs, довольно сильно отличается от первоначальной. Все распространённые браузеры теперь придерживаются новой спецификации.

В данной таблице описано поведение элементов в зависимости от значения атрибута `tabindex`:

| Атрибут `tabindex` | Фокус при помощи мыши или программно через `element.focus()` | Фокус при навигации с клавиатуры (Tab) |
| --- | --- | --- |
| Отсутствует | Работает согласно правилам платформы для конкретного элемента (возможен для элементов форм, ссылок и т.п.) | Работает согласно правилам платформы для конкретного элемента |
| Менее нуля (`tabindex="-1"`) | Возможен | Невозможен. Разработчик должен использовать `focus()` при нажатии стрелочек на клавиатуре и других клавиш. |
| Нуль (`tabindex="0"`) | Возможен | Происходит поочерёдно, исходя из позиции элемента внутри документа |
| Более нуля (например `tabindex="33"`) | Возможен | Значение атрибута `tabindex` указывает очерёдность, в которой элемент получит фокус. Чем меньше значение атрибута, тем раньше элемент получит фокус. В любом случае, фокус придёт на такие элементы раньше, чем на элементы с `tabindex="0"` и элементы, которые способны получить фокус без атрибута `tabindex` (например, `tabindex="7"` получит фокус раньше `tabindex="11"`) |

#### Простые контролы

Чтобы сделать простой виджет доступным через клавишу Tab, задайте `tabindex="0"` на HTML-элементах `<div>` или `<span>`, из которых он состоит. Ниже представлен пример эмулирования чекбоксов. Вместо элементов input в примере используется `<span>`.

*Пример 1: Простой виджет, эмулирующий работу чекбосов путём смены изображений. Виджет использует tabindex, чтобы обеспечить доступ с клавиатуры.*

```html
<!-- Без атрибута tabindex, элементы <span> не смогут принимать фокус с клавиатуры -->
<div>
  <span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />
    Добавить декоративную корзину с фруктами
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="true" tabindex="0">
    <img src="checked.gif" role="presentation" alt="" />
    Добавить поющую телеграмму
  </span>
</div>
<div>
  <span role="checkbox" aria-checked="false" tabindex="0">
    <img src="unchecked.gif" role="presentation" alt="" />
    С предоплатой
  </span>
</div>
```

#### Сгруппированные контролы

Безусловно есть необходимость создания более сложных виджетов. В качестве примеров можно привести меню, панели табов, различные динамические таблицы, представления для информации, имеющей древовидную структуру. Для таких контролов родительский элемент должен иметь атрибут `tabindex="0"`. В таком случае он сможет попасть в фокус с клавиатуры. Все дочерние элементы (пункты меню, отдельные табы, ячейки, строки) должны иметь `tabindex="-1"`, чтобы не попадать в фокус при нажатии tab. Пользователи должны иметь возможность путешествовать по дочерним элементам при помощи стрелочек на клавиатуре.

Ниже приведён пример, который демонстрирует использование этой техники для реализации вложенного меню. После того, как в фокус попадает основной элемент меню (`<ul>`), разработчик должен программно управлять фокусом, реагируя на нажатия клавиш со стрелочками. Для описания техники управления фокусом внутри виджета смотрите раздел «Управление фокусом внутри виджета» ниже в данной статье.

*Пример 2: Меню, использующее атрибут `tabindex` для осуществления доступа с клавиатуры.*

```html
<ul id="mb1" tabindex="0">
  <li id="mb1\_menu1" tabindex="-1">
    Шрифт
    <ul id="fontMenu" title="Шрифт" tabindex="-1">
      <li id="sans-serif" tabindex="-1">Sans-serif</li>
      <li id="serif" tabindex="-1">Serif</li>
      <li id="monospace" tabindex="-1">Monospace</li>
      <li id="fantasy" tabindex="-1">Fantasy</li>
    </ul>
  </li>
  <li id="mb1\_menu2" tabindex="-1">
    Стиль
    <ul id="styleMenu" title="Стиль" tabindex="-1">
      <li id="italic" tabindex="-1">Наклонный</li>
      <li id="bold" tabindex="-1">Жирный</li>
      <li id="underline" tabindex="-1">Подчёркнутый</li>
    </ul>
  </li>
  <li id="mb1\_menu3" tabindex="-1">
    Выравнивание
    <ul id="justificationMenu" title="Выравнивание" tabindex="-1">
      <li id="left" tabindex="-1">Слева</li>
      <li id="center" tabindex="-1">По центру</li>
      <li id="right" tabindex="-1">Справа</li>
      <li id="justify" tabindex="-1">По ширине</li>
    </ul>
  </li>
</ul>
```

#### Неактивные (disabled) контролы

Когда элемент управления становится неактивным, он должен не попадать в фокус при нажатии на tab, что обеспечивается выставлением у элемента атрибута `tabindex="-1"`. Обратите внимание, что неактивные элементы в пределах сгруппированного виджета (такие как, подпункты меню ) должны иметь возможность быть выбранными при помощи стрелочек на клавиатуре.

### Управление фокусом внутри виджета

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

1. Переходящий `tabindex`: программное перемещение фокуса
2. `aria-activedescendant`: управление «виртуальным» фокусом

#### Техника первая: Переходящий tabindex

Идея данной техники заключается в выставлении атрибута `tabindex` в нулевое значение для элемента, который последним находился в фокусе. При этом если пользователь уйдёт табом с виджета, а потом вернётся обратно, элемент восстановит фокус правильно. Заметьте, что выставляя `tabindex` в "0", необходимо выставлять `tabindex="-1"` для предыдущего выделенного элемента. Эта техника требует выставлять фокус элементам программно, реагируя на нажатие клавиш.

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

1. программно применить фокус к другому элементу
2. изменить tabindex элемента в фокусе на 0
3. изменить tabindex предыдущего элемента на -1

По ссылке вы можете увидеть пример WAI-ARIA tree view, использующий эту технику.

##### Советы

###### Используйте element.focus() чтобы задать фокус элементу

Не используйте `createEvent()`, `initEvent()` and `dispatchEvent()` чтобы задать фокус. Событие DOM focus должно использовать только для получения информации о том, что произошёл фокус на элемент, оно генерируется системой, когда какой-либо элемент попал в фокус. Оно не должно использовать для того, чтобы задать фокус. Вместо этого используйте `element.focus()`.

###### Используйте событие onfocus чтобы отслеживать фокус

При разработке не стоит рассчитывать, что фокус будет меняться только в следствие манипуляций пользователя с клавиатурой и мышью. Вспомогательные программы, такие как screen readers могут задавать фокус элементам. Отслеживайте события `onfocus` и `onblur`, вместо событий мыши и клавиатуры.

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

#### Техника вторая: aria-activedescendant

Эта техника позволяет объединить каждый отдельно взятый обработчик событий в контейнер графического элемента и использовать `aria-activedescendent` для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на обзор доступных веб-приложений и виджетов (en-US).)

The `aria-activedescendant` property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of `aria-activedescendant` and ensuring that the current item is styled appropriately (for example, with a border or background color).

##### Tips

###### scrollIntoView

Note that the use of this pattern requires the author to ensure that the current *focused* widget is scrolled into view. You should be able to use the `element.scrollIntoView()` function, but we recommend confirming this works for you in your target browsers using the quirksmode test.

###### Issues

* quirksmode reports problems in Opera, and Konqueror
* Firefox 3.0.1 introduced bug
### Рекомендации

#### Используйте onkeydown для отлова событий вместо onkeypress

В IE событие `keypress` срабатывает только для буквенно-цифровых клавиш. Используйте `onkeydown` вместо этого.

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

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

#### Убедитесь, что можно использовать клавиатуру для активации элемента

Чтобы обеспечить использование клавиатуры для активации элемента, любые обработчики событий мыши должны быть также связаны с событиями клавиатуры. Например, чтобы клавиша Enter активировала элемент, если у вас есть `onclick="doSomething()"`, вам необходимо также связать `doSomething()` с событием нажатия клавиши: `onkeydown="return event.keyCode != 13 || doSomething();"`.

#### Не используйте :focus для стилизации фокусировки (если вы поддерживаете IE 7 и более ранние)

IE 7 и более ранние версии не поддерживают `:focus` псевдо-селектор; не используйте его для стилизации фокуса. Вместо этого, установите стили с помощью обработчика событий `onfocus`, например, добавив название CSS стиля атрибуту `class`.

#### Always draw the focus for tabindex="-1" items and elements that receive focus programatically

IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like `this.style.backgroundColor = "gray";` or add a dotted border via `this.style.border = "1px dotted invert"`. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).

#### Prevent used key events from performing browser functions

If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns `false`, the event will not be propagated beyond your handler.

For example:

```html
<span tabindex="-1" onkeydown="return handleKeyDown();"></span>
```

If `handleKeyDown()` returns `false`, the event will be consumed, preventing the browser from performing any action based on the keystroke.

#### Don't rely on consistent behavior for key repeat, at this point

Unfortunately `onkeydown` may or may not repeat depending on what browser and OS you're running on.


ARIA - Доступность

ARIA
====

Accessible Rich Internet Applications **(ARIA)** определяет способ сделать веб контент и веб приложения (особенно те, которые разработаны с помощью Ajax и JavaScript) более доступными для людей с ограниченными возможностями. Например, ARIA делает доступным навигационные маркеры, JavaScript виджеты, подсказки на форме, сообщения об ошибках, автоматические обновления и многое другое.

ARIA - это набор специальных атрибутов, которые могут быть добавлены в любую разметку, но особенно подходят для HTML. Атрибут `role` определяет тип объекта (такие как статья, оповещение или ползунок). Дополнительные ARIA атрибуты предоставляют другие полезные возможности, такие как описания для форм или текущее значение индикатора выполнения.

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

**Примечание:** Пожалуйста, примите участие в написании и/или переводе статей чтобы сделать ARIA понятнее и доступнее для тех, кто только начинает изучать материал! Не хватает на это времени? Тогда отправьте свои предложения в список рассылки Mozilla по теме accessibility, или на IRC каналс тэгом #accessibility.

### Начало работы с ARIA

Введение в ARIA (en-US)

Быстрое введение в превращение динамического контента в доступный с помощью ARIA. Смотрите также классическую статью ARIA intro by Gez Lemon, from 2008.

Web Applications and ARIA FAQ (en-US)

Ответы на часто задаваемые вопросы о том как и почему нужно использовать ARIA в разработке интерфейсов веб-приложений.

Записи использования экранных читалок с ARIA.

На этих видео можно увидеть реальные и учебные примеры того ARIA улучшает доступность.

Использование ARIA в HTML

Практическое руководство для разработчиков. Содержит рекомендации по использованию ARIA-атрибутов при разметке.

### Простое улучшение ARIA

Улучшение навигации по странице с помощью ARIA Landmarks

Хорошее введение в использование ARIA landmarks для улучшения навигации для пользователей с экранными читалками. Стоит также заглянуть в заметки по поддержке ARIA landmarks читалками и примеры использования на реальных сайтах (опубликовано в Июле 2011).

Улучшение доступности форм (en-US)

ARIA используется не только для обозначения динамического контента! Узнайте, как улучшить доступность форм HTML используя дополнительные ARIA-атрибуты.

Live regions (в процессе написания) (en-US)

Live regions подсказывают экранным читалкам как правильно обрабатывать изменения контента на странице.

Использование ARIA Live Regions для оповещения об изменении контента страницы

Краткая сводка об использовании live regions от создателей JAWS screen reader software. Live regions также поддерживаются NVDA в Firefox и VoiceOver в Safari.

### ARIA для виджетов на JavaScript

Навигация с помощью клавиатуры и фокус в виджетах на JavaScript

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

Style Guide for Keyboard Navigation

В этом руководстве описываются способы управления самыми распространёнными виджетами с клавиатуры.

### Дополнительные ресурсы по ARIA

Виджеты. Техники, руководства, примеры. (en-US)

Нужен слайдер, меню или другой виджет? здесь вы можете найти все, что нужно

JavaScript UI библиотеки со встроенной поддержкой ARIA.

Если вы начинаете новый проект, то вам стоит обратить внимание на UI библиотеки, имеющие встроенную поддержку ARIA. Внимание: статья 2009 года — то, что она описывает, стоит вынести в отдельную статью на MDN, которая будет поддерживаться в актуальном состоянии.

### Список рассылки

Открытая Google Group, посвящённая ARIA

Здесь можно задать вопрос об ARIA, а также предложить улучшение существующей документации, которая находится там же.

### Блоги

Хотя информация в блогах быстро теряет актуальность, всё же в них можно почерпнуть ценную информацию из первых рук - разработчиков, развивающих ARIA.

Paciello Group

Accessible Culture

### Обнаружение багов

Сообщайте об ошибках ARIA в браузерах, экранных читалках и библиотеках JavaScript.

### Примеры

ARIA. Библиотека примеров. (en-US)

Набор примеров по которым можно многому научиться.

Различные демки библиотек с доступными JS виджетами.

jQuery, YUI

Yahoo! Mail

Детище Yahoo! - Yahoo! Mail, веб-приложение, выглядящее практически как нативное и вполне доступное. После обзора Yahoo! Mail с использованием экранной читалки Marco Zehe сказал: "Хорошая работа, не сбавляйте обороты!".

Yahoo! Search

Yahoo! проделали невероятную работу по продвижению ARIA в своём поисковике, используя все возможности и делясь своим опытом. Yahoo! Search использует одновременно ARIA landmarks, live regions, и widgets.

### Стандартизация

WAI-ARIA Activities Overview at W3C

Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)

WAI-ARIA Specification

The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.

WAI-ARIA Authoring Practices

Like the W3C WAI-ARIA specification, the official best practices represents a future ideal — a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.

For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.

Open AJAX Accessibility Task Force

The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.

Under Construction: WCAG 2.0 ARIA Techniques (en-US)

The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is important when regulations or policies are based on WCAG.

### Related Topics

Accessibility, AJAX, JavaScript


Использование ARIA - Доступность

Использование ARIA
==================

Роли
----

### Роли виджета (en-US)

* Button
* Checkbox
* Dialog
* Gridcell
* Link
* Log
* Marquee
* Menuitem
* Menuitemcheckbox
* Menuitemradio
* Option
* Progressbar
* Radio
* Scrollbar
* Slider
* Spinbutton
* status
* Tab
* Tabpanel
* textbox
* Timer
* Tooltip
* Treeitem
* switch (en-US)
### Композиционные роли

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

* Combobox
* Grid (including row, gridcell, rowheader, columnheader roles)
* Listbox (including option role)
* Menu
* Menubar
* Radiogroup (see radio role)
* Tablist (including tab and tabpanel roles)
* Tree
* Treegrid
### Document structure roles

* Article
* Definition
* Directory
* Document
* Group
* Heading
* Img
* List
* Listitem
* Math
* Note
* Presentation
* Region
* Separator
* Toolbar
### Landmark roles

* Application
* Banner
* Complementary
* Contentinfo
* Form
* Main
* Navigation
* Search
States and properties
---------------------

### Widget attributes

* aria-autocomplete
* aria-checked
* aria-current
* aria-disabled
* aria-expanded
* aria-haspopup
* aria-hidden
* aria-invalid
* aria-label (en-US)
* aria-level
* aria-multiline
* aria-multiselectable
* aria-orientation
* aria-pressed
* aria-readonly
* aria-required
* aria-selected
* aria-sort
* aria-valuemax
* aria-valuemin
* aria-valuenow
* aria-valuetext
### Live region attributes

* aria-live
* aria-relevant
* aria-atomic
* aria-busy
### Drag & drop attributes

* aria-dropeffect
* aria-dragged
### Relationship attributes

* aria-activedescendant
* aria-controls
* aria-describedby (en-US)
* aria-flowto
* aria-labelledby (en-US)
* aria-owns
* aria-posinset
* aria-setsize


ARIA: checkbox role - Доступность

ARIA: checkbox role
===================

checkbox role используется для переключаемых интерактивных элементов управления. Элементы, содержащие `role="checkbox"` также должны включать `aria-checked` атрибут, чтобы продемонстрировать состояние чекбокса ассистивным технологиям.

```html
<span
 role="checkbox"
 aria-checked="false"
 tabindex="0"
 aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
```

Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA. Вместо этого лучше использовать HTML checkbox (en-US) `<input type="checkbox">` (en-US), который изначально предоставляет необходимый функционал:

```html
<input type="checkbox" id="chk1-label" />
<label for="chk1-label">Запомнить мои предпочтения</label>
```

Описание
--------

Нативный HTML checkbox (en-US) элемент управления может находиться только в двух состояниях отмеченности - "отмечен" или "не отмечен", с неопределённым (en-US) состоянием, устанавливаемым с помощью JavaScript. Аналогично элемент с `role="checkbox"` может находиться в трёх состояниях, обозначенных через `aria-checked` атрибут: `true`, `false`, or `mixed`.

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

Разработчику необходимо динамически изменять значение атрибута `aria-checked` при активации чекбокса.

### Связанные ARIA-роли, ARIA-состояния и ARIA-свойства

aria-checked

Значение `aria-checked` определяет состояние чекбокса. Этот атрибут может принимать одно из трёх значений:

`true`
 Чекбокс отмечен
 `false`
 Чекбокс не отмечен
 `mixed`
 Чекбокс частично отмечен, или в неопределённом состоянии

tabindex="0"

Делает элемент фокусируемым, так что пользователь ассистивных технологий может сразу перейти к нему и начать читать.

### Взаимодействие с клавиатурой

| Клавиша | Функция |
| --- | --- |
| `Пробел` | Активирует чекбокс |

### Необходимый JavaScript

#### Необходимый обработчики событий

onclick

Обрабатывает клики, которые изменяют состояние чекбокса, меняя значение атрибута `aria-checked` и внешний вид чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.

onKeyPress

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

`Пробел`

для смены состояния чекбокса путём изменения значения атрибута `aria-checked` и внешнего вида чекбокса так, чтобы он выглядел отмеченным млм неотмеченным для зрячего пользователя.

### Примеры

Пример ниже создаёт простой чекбокс, используя CSS и JavaScript для обработки отмеченного и неотмеченного состояний элемента.

#### HTML

```html
<span
 role="checkbox"
 id="chkPref"
 aria-checked="false"
 onclick="changeCheckbox()"
 onKeyPress="changeCheckbox()"
 tabindex="0"
 aria-labelledby="chk1-label"></span>
<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()"
 >Запомнить мои предпочтения</label
>
```

#### CSS

```css
[role="checkbox"] {
  padding: 5px;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}
```

#### JavaScript

```js
function changeCheckbox(event) {
  let item = document.getElementById("chkPref");
  switch (item.getAttribute("aria-checked")) {
    case "true":
      item.setAttribute("aria-checked", "false");
      break;
    case "false":
      item.setAttribute("aria-checked", "true");
      break;
  }
}
```

Проблемы доступности
--------------------

Когда `checkbox` роль добавлена к элементу, юзер агент должен сделать следующее:

* Показать элемент как элемент с функциями чекбокса для API доступности.
* Когда значение aria-checked меняется, отправить доступное событие изменения состояния.

Продукты, использующие ассистивные технологии должны сделать следующее:

* Программы чтения с экрана должны объявить элемент как чекбокс и при необходимости предоставить инструкции о том, как его активировать.

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

Лучшие практики
---------------

Первое правило ARIA - если у нативного HTML-элемента или атрибута присутствует необходимая семантика или поведение, следует использовать его, а не использовать другой элемент не по назначению, добавляя ARIA, чтобы сделать его доступным. По существу, рекомендуется использовать нативный HTML checkbox (en-US) вместо воспроизведения функциональности чекбокса с помощью JavaScript и ARIA.

Смотрите также
--------------

* `<input type="checkbox">` (en-US)
* ARIA: radio role (en-US)
* ARIA: menuitem role (en-US)
* ARIA: menuitemcheckbox role (en-US)
* ARIA: menuitemradio role (en-US)
* ARIA: switch role (en-US)
* ARIA: option role (en-US)


Русский - Доступность

Русский
=======

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

Фокусируемые элементы должны иметь интерактивную семантику

Если элемент можно сфокусировать с помощью клавиатуры, он должен быть интерактивным; то есть пользователь должен иметь возможность что-то сделать с ним и произвести какое-либо изменение (например, активировать ссылку или изменить параметр).

**Примечание:** One important exception to this rule is if the element has `role="document"` applied to it, **inside** an interactive context (such as `role="application"`). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

Most interactive elements are focusable by default; you can make an element focusable by adding a `tabindex=0` attribute value to it. However, you should only add `tabindex` if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

### See also

* tabindex global HTML attribute
* Global event handlers: onkeydown (en-US)
* Global event handlers: onkeyup (en-US)
Avoid using `tabindex` attribute greater than zero
--------------------------------------------------

The `tabindex` attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their `tabindex` values (1, then 2, then 3, etc.).

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive `tabindex` values.

### See also

* tabindex global HTML attribute
* Understanding focus order
* Don't use tabindex greater than 0
Clickable elements must be focusable and should have interactive semantics
--------------------------------------------------------------------------

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

An element is clickable if it has an `onclick` event handler defined. You can make it focusable by adding a `tabindex=0` attribute value to it. You can make it operable with the keyboard by defining an `onkeydown` event handler; in most cases, the action taken by event handler should be the same for both types of events.

### See also

* tabindex global HTML attribute
* Global event handlers: onkeydown (en-US)
* Global event handlers: onkeyup (en-US)
Interactive elements must be able to be activated using a keyboard
------------------------------------------------------------------

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

### See also

* Global event handlers: onkeydown (en-US)
* Global event handlers: onkeyup (en-US)
Interactive elements must be focusable
--------------------------------------

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a `tabindex=0` attribute value to it. That will add the element to the list of elements that can be focused by pressing the `Tab` key, in the sequence of such elements as defined in the HTML document.

### See also

* tabindex global HTML attribute
Focusable element must have focus styling
-----------------------------------------

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the `:focus` CSS pseudo-class.

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

If you create your own focusable components, be sure that you also define focus styling for them.

### See also

* Using CSS to change the presentation of a UI component when it receives focus


Цветовой контраст - Доступность

Цветовой контраст
=================

Описание проблемы
-----------------

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

Пример хорошего контраста:
 ![An example of good color contrast consisting of the words good contrast with a light purple background.](/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast/screen_shot_2019-02-04_at_5.31.23_pm.png)

Пример плохого контраста:
 ![An example of bad color contrast consisting of the words bad contrast with a dark purple background.](/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast/screen_shot_2019-02-04_at_5.31.34_pm.png)

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

Связанные с WCAG критерии успеха
--------------------------------

1.4.3 Минимальный контраст (AA)

Цветовой контраст между фоном и содержимым переднего плана должен быть минимальным, чтобы обеспечить удобочитаемость:

* Текст и его фон должны иметь контрастность не менее 4.5.1.
* Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 3.1. Крупный текст определяется как минимум 18pt или 14pt полужирный.

1.4.6 Улучшенный контраст (AAA)

Это следует и основывается на критерии 1.4.3.

* Текст и его фон должны иметь контрастность не менее 7.1.
* Текст заголовка (или просто крупный текст) должен иметь соотношение не менее 4.5.1.

1.4.11 Нетекстовый контраст (AA) (добавлен в 2.1)

Минимальное соотношение цветовой контрастности для компонентов пользовательского интерфейса и графических объектов должно составлять 3 к 1.

Решение
-------

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

Если вы используете нетекстовый контент, такой как видео или анимация, вы должны следовать 1.4.11.

Чтобы проверить свой контраст при выборе цвета, используйте такой инструмент, как Color Contrast Checker от WebAIM.

Вы также можете проверить цветовой контраст на лету с помощью инструментов разработчика Firefox — см. наше руководство Инспектор доступности, и в частности раздел Цветовой контраст.

Смотрите также
--------------

* Цвет и цветовой контраст
* Понимание нетекстового контраста


SVGGraphicsElement - Интерфейсы веб API

SVGGraphicsElement
==================

Интерфейс **`SVGGraphicsElement`** представляет элементы SVG, основной целью которых является прямое отображение графики в группу.

**Примечание:** Этот интерфейс был введён в SVG 2 и заменяет интерфейсы `SVGLocatable` и `SVGTransformable` из SVG 1.1.

Свойства
--------

*Этот элемент наследует свойства от своего родителя, `SVGElement` (en-US).*

`SVGGraphicsElement.transform` Только для чтения

An `SVGAnimatedTransformList` (en-US) reflecting the computed value of the `transform` property and its corresponding `transform` attribute of the given element.

Методы
------

*Этот элемент наследует методы своего родителя, `SVGElement` (en-US).*

`SVGGraphicsElement.getBBox()` (en-US)

Returns a `DOMRect` (en-US) representing the computed bounding box of the current element.

`SVGGraphicsElement.getCTM()`

Returns a `DOMMatrix` (en-US) representing the matrix that transforms the current element's coordinate system to its SVG viewport's coordinate system.

`SVGGraphicsElement.getScreenCTM()`

Returns a `DOMMatrix` (en-US) representing the matrix that transforms the current element's coordinate system to the coordinate system of the SVG viewport for the SVG document fragment.

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGGraphicsElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLDialogElement - Интерфейсы веб API

HTMLDialogElement
=================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`HTMLDialogElement`** - интерфейс взаимодействия, предоставляющий методы для управления `<dialog>` элементами. Он наследует свойства и методы от `HTMLElement`.

Свойства
--------

*Наследует свойства от своего родителя, `HTMLElement`.*

`HTMLDialogElement.open`

`Boolean` (en-US) отражает HTML атрибут элемента `open`, указывающий на то, доступно ли диалоговое окно для воздействия.

`HTMLDialogElement.returnValue` (en-US)

`DOMString` устанавливает или возвращает передаваемое диалоговому окну значение.

Методы
------

*Наследует методы своего родителя, `HTMLElement`.*

`HTMLDialogElement.close()` (en-US)

Закрывает диалоговое окно. Опциональный `DOMString` может быть передан как аргумент, обновляющий `returnValue` диалогового окна.

`HTMLDialogElement.show()` (en-US)

Показывает диалоговое окно modelessly, т.е. остаётся возможность взаимодействовать с контентом вне диалогового окна.

`HTMLDialogElement.showModal()` (en-US)

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

Примеры
-------

Примеры ниже показывают простую кнопку, которая при нажатии открывает `<dialog>`, содержащий элемент `<form>`, используя метод `HTMLDialogElement.showModal()` (en-US). Вы можете нажать кнопку *Отмены,* чтобы закрыть диалоговое окно (используя функцию `HTMLDialogElement.close()` (en-US)), или принять форму, использую кнопку *Принятия*.

```html
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
 (function () {
 var updateButton = document.getElementById("updateDetails");
 var cancelButton = document.getElementById("cancel");
 var dialog = document.getElementById("favDialog");
 dialog.returnValue = "favAnimal";

 function openCheck(dialog) {
 if (dialog.open) {
 console.log("Dialog open");
 } else {
 console.log("Dialog closed");
 }
 }

 // Update button opens a modal dialog
 updateButton.addEventListener("click", function () {
 dialog.showModal();
 openCheck(dialog);
 });

 // Form cancel button closes the dialog box
 cancelButton.addEventListener("click", function () {
 dialog.close("animalNotChosen");
 openCheck(dialog);
 });
 })();
</script>
```

**Примечание:** You can find this example on GitHub as htmldialogelement-basic (see it live also).

Спецификации
------------

| Specification |
| --- |
| HTML Standard # htmldialogelement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* HTML-элемент, реализующий этот интерфейс взаимодействия: `<dialog>`.


Network Information API - Интерфейсы веб API

Network Information API
=======================

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

API Network Information позволяет определить тип интернет-подключения системы (`'wifi'`, `'cellular'` и т.д.). Эту информацию можно использовать, к примеру, для того, чтобы предоставлять контент большего либо меньшего разрешения в зависимости от качества соединения. Весь API состоит из интерфейса `NetworkInformation`, добавленного в глобальный объект `Navigator` как свойство `Navigator.connection`.

**Примечание:** Эта возможность доступна в Web Workers

Примеры
-------

### Определение изменения соединения

Данный пример отслеживает изменение подключения пользователя.

```js
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log(
    "Connection type changed from " + type + " to " + connection.effectiveType,
  );
  type = connection.effectiveType;
}

connection.addEventListener("change", updateConnectionStatus);
```

### Предварительная загрузка крупных ресурсов

The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the `preloadVideo` flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of `NetworkInformation.type` (en-US). Regardless of the `type` value you can get an estimate of connection speed through the `NetworkInformation.effectiveType` (en-US) property.

```js
let preloadVideo = true;
var connection =
  navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.effectiveType === "slow-2g") {
    preloadVideo = false;
  }
}
```

Интерфейсы
----------

`NetworkInformation`

Даёт возможность получить информацию о сетевом соединении, а также возможность получать события при изменении типа соединения. Невозможно создавать экземпляры данного интерфейса, для получения доступа используйте `Navigator`.

Спецификации
------------

| Specification |
| --- |
| Network Information API # networkinformation-interface |
| Network Information API # connection-attribute |

Совместимость с браузерами
--------------------------

### api.NetworkInformation

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.Navigator.connection

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Online and offline events (en-US)
* `window.navigator.connection`


SVGTextContentElement - Интерфейсы веб API

SVGTextContentElement
=====================

Интерфейс **`SVGTextContentElement`** реализуется элементами, которые поддерживают рендеринг дочернего текстового содержимого. Он наследуется различными текстовыми интерфейсами, такими как `SVGTextElement`, `SVGTSpanElement` (en-US), `SVGTRefElement` (en-US), `SVGAltGlyphElement` и `SVGTextPathElement` (en-US).

Константы
---------

| Константа | Значение | Описание |
| --- | --- | --- |
| LENGTHADJUST\_UNKNOWN | 0 | Иная ценность. |
| LENGTHADJUST\_SPACING | 1 | `spacing` дескриптор. |
| LENGTHADJUST\_SPACINGANDGLYPHS | 2 | `spacingAndGlyphs` дескриптор. |

Свойства
--------

*Этот интерфейс также наследует свойства от его родителя,
`SVGGraphicsElement`.*

`SVGTextContentElement.textLength` Только для чтения

`SVGAnimatedLength` (en-US), отражает атрибут `textLength (en-US)` данного элемента.

`SVGTextContentElement.lengthAdjust` Только для чтения

`SVGAnimatedEnumeration` (en-US), отражает атрибут `lengthAdjust` данного элемента. Значения числового типа представляют одно из значений константы выше.

Методы
------

*Этот интерфейс также наследует методы от его родителя, `SVGGraphicsElement`.*

`SVGTextContentElement.getNumberOfChars()`

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

`SVGTextContentElement.getComputedTextLength()`

Возвращает float, представляющий вычисленную длину для текста внутри элемента.

`SVGTextContentElement.getSubStringLength()`

Возвращает float, представляющий вычисленную длину форматированного расстояния продвижения текста для подстроки текста внутри элемента. Обратите внимание, что этот метод учитывает только ширину глифов в подстроке и любые дополнительные интервалы, вставленные свойствами CSS «letter-spacing» и «word-spacing». Настройки визуального интервала, сделанные атрибутом «x», игнорируются.

`SVGTextContentElement.getStartPositionOfChar()`

Возвращает `DOMPoint` (en-US), представляющий позицию типографического символа после выполнения макета текста.

**Примечание:** В SVG 1.1 этот метод вернул `SVGPoint` (en-US).

`SVGTextContentElement.getEndPositionOfChar()`

Возвращает `DOMPoint` (en-US), представляющий конечную позицию типографического символа после выполнения макета текста.

**Примечание:** В SVG 1.1 этот метод вернул `SVGPoint` (en-US).

`SVGTextContentElement.getExtentOfChar()`

Возвращает `DOMRect` (en-US), представляющий вычисляемые габариты ячейки глифа, соответствующие заданному типографическому символу.

`SVGTextContentElement.getRotationOfChar()`

Возвращает поплавок `float`, представляющий поворот типографического символа.

`SVGTextContentElement.getCharNumAtPosition()`

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

`SVGTextContentElement.selectSubString()`
Устарело

Выбирает текст внутри элемента.

Характеристики
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTextContentElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


BeforeUnloadEvent - Интерфейсы веб API

BeforeUnloadEvent
=================

Событие **`beforeunload`** (en: перед\_выгрузкой) происходит (непосредственно) перед выгрузкой окна, документа и их ресурсов.

Если присвоено ненулевое значение свойству `returnValue` Event, всплывает диалоговое окно: "Вы действительно хотите покинуть эту страницу?" (см. пример ниже). Если значение не присвоено, то событие не отображается. В некоторых случаях диалоговое окно всплывает только после взаимодействия пользователя с фреймом или любым встроенным фреймом. См. детали Browser compatibility

|  |  |
| --- | --- |
| Всплывающие окна | Нет |
| Возможность отмены | Да |
| Целевые Объекты | defaultView |
| Интерфейс | `Event` |

Примеры
-------

```js
window.addEventListener("beforeunload", function (event) {
  event.returnValue = "\\o/";
});

//is equivalent to
window.addEventListener("beforeunload", function (event) {
  event.preventDefault();
});
```

Webkit-based browsers не следуют спецификации диалоговых окон . Самый кросс-браузерный работающий пример выглядит примерно так: см. ниже.

```js
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage; //Webkit, Safari, Chrome etc.
});
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-beforeunloadevent-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`
* Выгрузка Документов - Запрос на выгрузку документа


Gamepad API - Интерфейсы веб API

Gamepad API
===========

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

Интерфейсы
----------

`Gamepad`

Представляет собой геймпад/контроллер, подключённый к компьютеру.

`GamepadButton`

Представляет собой кнопку одного из подключённых контроллеров

`GamepadEvent`

Объект события, представляющий запущенные события, связанные с геймпадами.

### Экспериментальные расширения геймпада

`GamepadHapticActuator` (en-US)

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

`GamepadPose` (en-US)

Представляет собой позу контроллера (например, положение и ориентацию в трёхмерном пространстве) в случае контроллера WebVR. Это не используется в более новом стандарте WebXR.

Сморите также extensions to the Gamepad interface (расширения интерфейса геймпада) для функций, которые позволяют получить доступ к вышеуказанной информации.

### Расширения для других интерфейсов

#### Навигатор

`Navigator.getGamepads()`

Расширение объекта `Navigator`, возвращающее массив объектов `Gamepad` по одному для каждого подключённого геймпада.

#### События окна

`Window.ongamepadconnected` (en-US)

Представляет собой обработчик событий, который будет выполняться при подключении геймпада (когда срабатывает событие `gamepadconnected (en-US)`).

`Window.ongamepaddisconnected` (en-US)

Представляет собой обработчик событий, который будет выполняться при отключении геймпада (когда срабатывает событие `gamepaddisconnected (en-US)`).

Учебные пособия и руководства
-----------------------------

* Using the Gamepad API
* Implementing controls using the Gamepad API
Спецификации
------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Прочтите также
--------------

* The Gamepad API, авторы: Тед Мельчарек и Роберт Найман
* Simple API demo page (source)


DOMStringList - Интерфейсы веб API

DOMStringList
=============

Тип возвращаемый некоторыми API, который содержит список DOMString (строки).

Свойства
--------

`DOMStringList.length` (en-US) Только для чтения

Возвращает длину списка.

Методы
------

`DOMStringList.item()` (en-US)

Возвращает `DOMString`.

`DOMStringList.contains()` (en-US)

Возвращает `Boolean` с указанием, есть ли данная строка в списке.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # the-domstringlist-interface |


AudioBuffer - Интерфейсы веб API

AudioBuffer
===========

Сводка
------

`AudioBuffer` - это интерфейс короткого звукового ресурса (audio asset), находящегося в памяти и созданного из аудиофайла методом `AudioContext.decodeAudioData()` (en-US), или из исходных данных с помощью метода `AudioContext.createBuffer()` (en-US). Помещённые в AudioBuffer звуковые данные могут быть воспроизведены в `AudioBufferSourceNode` (en-US).

Объекты этого типа предназначены для хранения небольших звуковых фрагментов, обычно менее 45 секунд. Для более длинных звуков, объекты реализующие `MediaElementAudioSourceNode` являются более подходящими. Этот буфер содержит данные в формате неперемещаемого IEE754 32-битного линейного ИКМ с номинальным диапазоном от -1 до +1, то есть 32-битный буфер с плавающей точкой каждого звукового фрагмента (samples) от -1.0 до 1.0. Если `AudioBuffer` имеет несколько каналов, то они хранятся в отдельном буфере.

Конструктор
-----------

`AudioBuffer()` (en-US)

Создаёт и возвращает новый объект `AudioBuffer`.

Свойства
--------

`AudioBuffer.sampleRate` (en-US) Только для чтения

Возвращает число с плавающей точкой - частоту дискретизации (sample rate), хранящих в буфере данных ИКМ в звуковых фрагментах (samples) в секунду.

`AudioBuffer.length` (en-US) Только для чтения

Возвращает целое число - длину в кадрах, хранящихся в буфере данных ИКМ.

`AudioBuffer.duration` (en-US) Только для чтения

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

`AudioBuffer.numberOfChannels` (en-US) Только для чтения

Возвращает целое число - количество аудиоканалов в буфере, описываемых данными ИКМ.

Методы
------

`AudioBuffer.getChannelData()` (en-US)

Возвращает `Float32Array`, содержащий связанные с каналом данные ИКМ. Определяется параметром канала (с 0 - первого канала).

`AudioBuffer.copyFromChannel()` (en-US)

Копирует звуковые фрагменты (samples) из указанного канала AudioBuffer в массив.

`AudioBuffer.copyToChannel()` (en-US)

Копирует звуковые фрагменты (samples) из массива в указанный канал AudioBuffer.

Пример
------

В этом примере показывается как создать объект AudioBuffer и заполнить его случайными белыми шумами. Вы можете найти полный пример в репозитории webaudio-examples. Так же доступна live версия.

```js
// Стерео
var channels = 2;

// Создаёт пустой двухсекундный стерео-буфер
// с частотой звука AudioContext (sample rate)
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(
  channels,
  frameCount,
  audioCtx.sampleRate,
);

button.onclick = function () {
  // Заполняет буфер белыми шумами;
  // просто случайные значения от -1.0 до 1.0
  for (var channel = 0; channel < channels; channel++) {
    // Получаем массив данных канала
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var i = 0; i < frameCount; i++) {
      // Math.random() находится в [0; 1.0]
      // аудио должно быть в интервале [-1.0; 1.0]
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  // Получает AudioBufferSourceNode.
  // AudioNode для проигрывания из AudioBuffer
  var source = audioCtx.createBufferSource();

  // устанавливает буфер в AudioBufferSourceNode
  source.buffer = myArrayBuffer;

  // присоединяет AudioBufferSourceNode к
  // destination, чтобы мы могли слышать звук
  source.connect(audioCtx.destination);

  // Начать воспроизведение с источника
  source.start();
};
```

Спецификация
------------

| Specification |
| --- |
| Web Audio API # AudioBuffer |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование Web Audio API (en-US)


FileReader - Интерфейсы веб API

FileReader
==========

Общая информация
----------------

Объект `FileReader` позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты `File` или `Blob`, с помощью которых задаётся файл или данные для чтения.

Объекты `File` можно получить через объект `FileList`, который возвращается как результат при выборе файлов пользователем с помощью элемента `<input>`, через drag and drop из объекта `DataTransfer`, или с помощью `mozGetAsFile()`, метода доступного в API элемента `HTMLCanvasElement`.

**Предупреждение:** Важное замечание: `FileReader` используется только для безопасным образом чтения содержимого файла из пользовательской (удалённой) системы. Его нельзя использовать для простого чтения файла по пути из файловой системы. Для чтения файла по пути в JavaScript следует использовать стандартное решение Ajax для чтения файла на стороне сервера с разрешение CORS при кроссдоменном чтении.

**Примечание:** Эта возможность доступна в Web Workers

Конструктор
-----------
```

FileReader FileReader();
```

Более детально, с примерами см. использование файлов в веб-приложениях.

Свойства
--------

`FileReader.error` Только для чтения

`DOMError` (en-US) представляет собой ошибку, происходящую при чтении файла.

`FileReader.readyState` (en-US) Только для чтения

Число обозначающее состояние объекта `FileReader`. Принимает одно из значений State constants.

`FileReader.result` (en-US) Только для чтения

Данные из файла. Значение свойства действительно только когда завершится операция чтения, причём формат данных зависит от способа, с помощью которого процесс был вызван.

### Обработка событий

`FileReader.onabort`

Обработчик для события `abort (en-US)`. Это событие срабатывает каждый раз, когда прерывается операция чтения.

`FileReader.onerror` (en-US)

Обработчик для события `error (en-US)`. Это событие срабатывает каждый раз, когда при чтении возникает ошибка.

`FileReader.onload` (en-US)

Обработчик для события `load (en-US)`. Это событие срабатывает при каждом успешном завершении операции чтения.

`FileReader.onloadstart`

Обработчик для события `loadstart (en-US)`. Это событие срабатывает каждый раз, при запуске процесса чтения.

`FileReader.onloadend`

Обработчик для события `loadend (en-US)`. Это событие срабатывает каждый раз по окончании процесса чтения (не важно, успешном или нет).

`FileReader.onprogress`

Обработчик для события `progress (en-US)`. Это событие срабатывает во время чтения данных из `Blob`.

**Примечание:** Замечание: т.к. `FileReader` унаследован от `EventTarget`, на все перечисленные события можно подписаться, используя метод `addEventListener`.

### Константы состояния

* `EMPTY`: `0` : Данные ещё не были загружены.
* `LOADING` : `1` : Данные в данный момент загружаются.
* `DONE`: `2` : Операция чтения была завершена.
Методы
------

`FileReader.abort()` (en-US)

Отмена операции чтения. После вызова, значение `readyState` станет равным `DONE`.

`FileReader.readAsArrayBuffer()`

Запускает процесс чтения данных указанного `Blob`, по завершении, атрибут `result` будет содержать данные файла в виде `ArrayBuffer`.

`FileReader.readAsBinaryString()`

Запускает процесс чтения данных указанного `Blob`, по завершении, атрибут `result` будет содержать бинарные данные файла в виде строки.

`FileReader.readAsDataURL()`

Запускает процесс чтения данных указанного `Blob`, по завершении, атрибут `result` будет содержать данные файла в виде `data:` URL.

`FileReader.readAsText()`

Запускает процесс чтения данных указанного `Blob`, по завершении, атрибут `result` будет содержать данные файла в виде текста.

Спецификация
------------

| Specification |
| --- |
| File API # APIASynch |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Примечания по реализации

* Для IE9 есть File API Lab.
* Opera предоставляет частичную поддержку в версии 11.1.

#### Относительно движка Gecko

* В версиях Gecko ниже 2.0 beta 7 (Firefox 4.0 beta 7), все параметры `Blob` были параметрами `File`; в последствии это было изменено, для соответствия спецификации.
* В версиях Gecko ниже 13.0 свойство `FileReader.error` возвращало объект `FileError`. Этот интерфейс был упразднён и теперь свойство `FileReader.error` возвращает объект `DOMError` (en-US), что соответствует определению FileAPI последней спецификации.
Смотрите также
--------------

* Использование файлов в веб-приложениях
* `File`
* `Blob`
* nsIDOMFileReader - For addons/privileged scope


DOMParser - Интерфейсы веб API

DOMParser
=========

`DOMParser` может парсить XML или HTML источник содержащийся в строке в DOM Document (en-US). Спецификация `DOMParser находится в` DOM Parsing and Serialization.

Заметьте, что XMLHttpRequest (en-US) поддерживает парсинг XML и HTML из интернет ресурсов (по ссылке)

Создание DOMParser
------------------

Для того чтобы создать `DOMParser` просто используйте `new DOMParser()`.

Для большей информации о создании `DOMParser` в расширениях Firefox, пожалуйста прочитайте документацию : `nsIDOMParser`.

Парсинг XML
-----------

Как только вы создали объект парсера, вы можете парсить XML из строки, используя метод `parseFromString`:

```js
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
```

### Обработка ошибок

Заметьте, если процесс парсинга не удастся , `DOMParser` теперь не выдаёт исключение, но вместо этого выдаёт документ ошибки (see Firefox bug 45566):

```xml
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
(Описание ошибки)
<sourcetext>(отрывок XML документа)</sourcetext>
</parsererror>
```

Ошибки синтаксического анализа также сообщаются в консоль ошибок, с идентификатором URI документа (см. Ниже) в качестве источника ошибки.

Разбор SVG или HTML
-------------------

`DOMParser` так же может быть использован для разбора SVG документа Gecko 10.0 или HTML документа Gecko 12.0. На выходе возможны 3 варианта, в зависимости от переданного MIME типа. Если MIME тип передан как `text/xml`, результирующий объект будет типа `XMLDocument`, если `image/svg+xml`, соответственно `SVGDocument`, а для MIME типа `text/html` - `HTMLDocument`.

```js
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
// возвращает Document, но не SVGDocument или HTMLDocument

parser = new DOMParser();
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
// возвращает SVGDocument, который так же является экземпляром класса Document.

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// возвращает HTMLDocument, который так же является экземпляром класса Document.
```

### DOMParser HTML для устаревших браузеров

```js
/\*
 \* DOMParser HTML extension
 \* 2012-09-04
 \*
 \* By Eli Grey, http://eligrey.com
 \* Public domain.
 \* КОД РАСПРОСТРАНЯЕТСЯ БЕЗ КАКИХ ЛИБО ГАРАНТИЙ. ИСПОЛЬЗУЙТЕ НА СВОЙ СТРАХ И РИСК.
 \*/

/\*! @source https://gist.github.com/1129031 \*/
/\*global document, DOMParser\*/

(function (DOMParser) {
  "use strict";

  var proto = DOMParser.prototype,
    nativeParse = proto.parseFromString;
  // Firefox/Opera/IE throw errors on unsupported types
  try {
    // WebKit returns null on unsupported types
    if (new DOMParser().parseFromString("", "text/html")) {
      // text/html parsing is natively supported
      return;
    }
  } catch (ex) {}

  proto.parseFromString = function (markup, type) {
    if (/^\s\*text\/html\s\*(?:;|$)/i.test(type)) {
      var doc = document.implementation.createHTMLDocument("");
      if (markup.toLowerCase().indexOf("<!doctype") > -1) {
        doc.documentElement.innerHTML = markup;
      } else {
        doc.body.innerHTML = markup;
      }
      return doc;
    } else {
      return nativeParse.apply(this, arguments);
    }
  };
})(DOMParser);
```

### DOMParser from Chrome/JSM/XPCOM/Privileged Scope

Смотрите статью по ссылке: nsIDOMParser

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-parsing-and-serialization |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Анализ и сериализация XML (en-US)
* XMLHttpRequest (en-US)
* XMLSerializer (en-US)
* Parsing HTML to DOM


WindowClient - Интерфейсы веб API

WindowClient
============

Интерфейс `WindowClient` ServiceWorker API (en-US) представляет область действия клиента сервис-воркера, который представляет собой документ в контексте просмотра, управляемый активным исполнителем. Клиент сервис-воркера самостоятельно выбирает и использует сервис-воркера для собственной загрузки и загрузки подресурсов.

Методы
------

*`WindowClient` наследует методы от своего родительского интерфейса `Client` (en-US).*

`WindowClient.focus()` (en-US)

Фокусирует пользователя на текущем окне.

`WindowClient.navigate()` (en-US)

Загружает указанный URL-адрес на управляемую клиентскую страницу.

Свойства
--------

*`WindowClient` наследует методы от своего родительского интерфейса `Client` (en-US).*

`WindowClient.focused` (en-US) Только для чтения

Логическое значение, указывающее, находится ли текущая страница в фокусе.

`WindowClient.visibilityState` (en-US) Только для чтения

Указывает, отображается ли текущая страница. Это значение может быть одним из `"hidden" (скрыта)`, `"visible" (отображена)` или `"prerender" (предварительно отрисована)`.

Пример
------

```js
self.addEventListener("notificationclick", function (event) {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // Проверяем, открыто ли окно и
  // сфокусированы ли на нем
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == "/" && "focus" in client) {
            client.focus();
            break;
          }
        }
        if (clients.openWindow) return clients.openWindow("/");
      }),
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Service Workers # windowclient |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование сервис-воркеров (en-US)
* Пример базового кода сервис-воркеров
* Is ServiceWorker ready?
* Promises
* Использование веб-воркеров (en-US)
* Channel Messaging API (en-US)


FormData - Интерфейсы веб API

FormData
========

XMLHttpRequest 2 добавляет поддержку для нового интерфейса FormData. Объекты FormData позволяют вам легко конструировать наборы пар ключ-значение, представляющие поля формы и их значения, которые в дальнейшем можно отправить с помощью метода `send()` (en-US).

FormData использует такой же формат на выходе, как если бы мы отправляли обыкновенную форму с encoding установленным в "multipart/form-data".

**Примечание:** О деталях использования FormData можно прочитать в статье Использование объекта FormData (en-US).

Конструктор
-----------

`FormData()`

Создаёт объект `FormData`.

Методы
------

`FormData.append()`

Добавляет новое значение существующего поля объекта `FormData`, либо создаёт его и присваивает значение.

`FormData.delete()`

Удаляет пару ключ-значение из объекта `FormData`.

`FormData.get()`

Возвращает первое значение ассоциированное с переданным ключом из объекта `FormData`.

`FormData.getAll()`

Возвращает массив всех значений ассоциированных с переданным ключом из объекта `FormData`.

`FormData.has()`

Возвращает булево значение касательно наличия в объекте `FormData` конкретной пары ключ-значение.

`FormData.set()`

Устанавливает новое значение для существующего ключа объекта `FormData`, или добавляет пару ключ-значение, если таковой не обнаружено в объекте.

`FormData.keys()`

Возвращает `iterator` , который позволяет пройтись по всем ключам для каждой пары "ключ-значение" , содержащимся внутри объекта `FormData`

`FormData.entries()`

Возвращает `iterator` который позволяет пройтись по всем парам "ключ-значение", содержащимся внутри объекта `FormData`

`FormData.values()`

Возвращает `iterator` , который позволяет пройтись по всем значениям , содержащимся в объекте `FormData`

**Примечание:** Разница между `FormData.set()` и `FormData.append()` заключается в том, что если указанный ключ найден в объекте, `FormData.set()` перезапишет его новым значением, тогда как `FormData.append()` добавит новое значение в конец существующего. Смотрите дополнительные материалы с примерами.

Спецификация
------------

| Specification |
| --- |
| XMLHttpRequest Standard # interface-formdata |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `XMLHTTPRequest`
* Using XMLHttpRequest (en-US)
* Использование объектов FormData (en-US)
* `<form>`


ANGLE_instanced_arrays - Интерфейсы веб API

ANGLE\_instanced\_arrays
========================

Расширение **ANGLE\_instanced\_arrays** является частью API WebGL и позволяет рисовать один и тот же объект или группы похожих объектов несколько раз, если они используют одни и те же данные вершин, количество примитивов и тип.

Доступ к WebGL расширениям можно получить с помощью метода `WebGLRenderingContext.getExtension()` (en-US). Для получения дополнительной информации см. также в Использование расширений (en-US) в WebGL руководстве.

**Примечание:** Это расширение доступно только для WebGL1 контекстов. В WebGL2 (en-US), функциональность этого расширения доступна в контексте WebGL2 по умолчанию, а константы и методы доступны без суффикса " `ANGLE` ".

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

Константы
---------

Это расширение предоставляет одну новую константу, которую можно использовать в `gl.getVertexAttrib()` (en-US) методе:

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

Возвращает `GLint` (en-US) , описывающий частотный делитель, используемый для упомянутого перевода в `gl.getVertexAttrib()` (en-US) в качестве параметра `pname`.

Методы
------

Это расширение предоставляет три новых метода:

`ext.drawArraysInstancedANGLE()` (en-US)

Behaves identically to `gl.drawArrays()` (en-US) except that multiple instances of the range of elements are executed, and the instance advances for each iteration.

`ext.drawElementsInstancedANGLE()` (en-US)

Ведёт себя идентично `gl.drawElements()` (en-US) за исключением того, что выполняется несколько экземпляров набора элементов и экземпляр перемещается между каждым набором

`ext.vertexAttribDivisorANGLE()` (en-US)

Изменяет скорость продвижения общих атрибутов вершин при визуализации нескольких экземпляров примитивов с помощью `ext.drawArraysInstancedANGLE()` (en-US) и `ext.drawElementsInstancedANGLE()` (en-US).

Примеры
-------

Включение расширения:

```js
var ext = gl.getExtension("ANGLE\_instanced\_arrays");
```

Спецификации
------------

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)


HTMLCanvasElement - Интерфейсы веб API

HTMLCanvasElement
=================

Интерфейс **`HTMLCanvasElement`** предоставляет свойства и методы для управления расположением и представлением элементов canvas. Он также наследует свойства и методы интерфейса `HTMLElement`.

Свойства
--------

*Наследуются от родителя,* *`HTMLElement`.*

`HTMLCanvasElement.height`

Положительное целое число, отражающее HTML-атрибут `height` элемента `<canvas>` (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется значение по умолчанию `— 150`.

`HTMLCanvasElement.mozOpaque` (en-US)
Non-standard

Объект `Boolean`, отражающий HTML-атрибут `moz-opaque` элемента `<canvas>`. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.

`HTMLCanvasElement.width`

Положительное целое число, отражающее HTML-атрибут `width` элемента `<canvas>` (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется значение по умолчанию `— 300`.

`HTMLCanvasElement.mozPrintCallback`
Non-standard

Is a `function` that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.

Методы
------

*Наследуются от родителя,* *`HTMLElement`.*

`HTMLCanvasElement.captureStream()`
Экспериментальная возможность

Возвращает `CanvasCaptureMediaStream` (en-US) — поток видео, которое захватывается в реальном времени с поверхности холста.

`HTMLCanvasElement.getContext()`

Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром `"2d"` возвращает объект `CanvasRenderingContext2D`, тогда так вызов с параметром `"experimental-webgl"` (или `"webgl"`) возвращает объект `WebGLRenderingContext`. Этот контекст поддерживается только в браузерах, в которых реализован WebGL.

`HTMLCanvasElement.toDataURL()`

Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре `type` (по умолчанию `png`). Возвращаемая картинка имеет разрешение 96dpi.

`HTMLCanvasElement.toBlob()`

Создаёт объект `Blob`, представляющий картинку, которая содержится в холсте. Этот файл может быть кеширован на диске или сохранён в памяти на усмотрение user agent.

`HTMLCanvasElement.transferControlToOffscreen()`
Экспериментальная возможность

Передаёт управление объекту `OffscreenCanvas` (en-US), либо в main thread либо в worker.

`HTMLCanvasElement.mozGetAsFile()` (en-US)
Non-standard

Устарело

Возвращает объект `File` представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified `name`. Если тип не указан, используется `image/png`.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # htmlcanvaselement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML element implementing this interface: `<canvas>`.


Screen - Интерфейсы веб API

Screen
======

Интерфейс `Screen` представляет экран, обычно отображающий текущее окно, его можно получить с помощью `window.screen`.

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

Свойства экземпляра
-------------------

*Также наследует свойства от своего родительского объекта `EventTarget`*.

`Screen.availHeight` (en-US)

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

`Screen.availWidth` (en-US)

Возвращает размер доступного окну горизонтального пространства в пикселях.

`Screen.colorDepth` (en-US)

Возвращает глубину цвета экрана.

`Screen.height` (en-US)

Возвращает высоту экрана в пикселях.

`Screen.isExtended` (en-US)
Экспериментальная возможность
 Secure context

Возвращает `true` если устройство пользователя имеет несколько экранов и `false` в противном случае.

`Screen.orientation` (en-US)

Возвращает экземпляр `ScreenOrientation` (en-US) связанный с экраном.

`Screen.pixelDepth` (en-US)

Возвращает количество битов информации на один пиксель экрана.

`Screen.width` (en-US)

Возвращает ширину экрана.

`Screen.mozEnabled` (en-US)
Non-standard

Устарело

Значение типа `Boolean`. Установка в `false` отключает экран.

`Screen.mozBrightness` (en-US)
Non-standard

Устарело

Управляет яркостью экрана. Ожидается значение в диапазоне от 0 до 1.0.

Методы экземпляра
-----------------

*Также наследует методы от своего родительского объекта `EventTarget`*.

`Screen.lockOrientation` (en-US)
Устарело

Блокирует ориентацию экрана (доступно только в полноэкранном режиме или для установленных приложений)

`Screen.unlockOrientation` (en-US)
Устарело

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

### События

`change` (en-US)
Экспериментальная возможность
 Secure context

Возникает, когда происходит изменение экрана — его ширины или высоты, доступной ширины или высоты, глубины цвета или ориентации.

`orientationchange` (en-US)
Устарело

Non-standard

Возникает, когда происходит изменение ориентации экрана.

Примеры
-------

```js
if (screen.colorDepth < 8) {
  // использовать версию страницы с неполным количеством цветов
} else {
  // использовать обычную полноцветную версию страницу
}
```

Спецификации
------------

| Specification |
| --- |
| CSSOM View Module # the-screen-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.