[Translate ru] Accessibility -> focus

src/content/ru/fundamentals/accessibility/focus/index.md

@@ -0,0 +1,150 @@
+project_path: /web/fundamentals/_project.yaml
+book_path: /web/fundamentals/_book.yaml
+description: Overview of screen focus in accessibility
+
+{# wf_blink_components: Blink>Accessibility #} {# wf_updated_on: 2019-06-08 #}
+{# wf_published_on: 2016-10-04 #}
+
+# Введение в Focus {: .page-title}
+
+{% include "web/_shared/contributors/megginkearney.html" %}
+{% include "web/_shared/contributors/dgash.html" %}
+{% include "web/_shared/contributors/robdodson.html" %}
+
+В этом уроке мы поговорим о *фокусе* и том, как вы можете управлять им в своем
+приложении. Фокус говорит о том, какой элемент управления на экране (элемент
+ввода, такой как поле, флажок, кнопка или ссылка) в текущий момент получает ввод
+с клавиатуры и из буфера обмена, когда вы вставляете контент.
+
+Это отличное место, чтобы начать узнавать о доступности, потому что все мы знаем
+как использовать клавиатуру, это легко понять и протестировать, и это приносит
+пользу практически всем пользователям.
+
+Пользователи с моторными нарушениями, которые могут быть любыми начиная с
+постоянного паралича на растянутом запястье, могут полагаться на клавиатуру или
+переключающее устройство, чтобы перемещаться по вашей странице, поэтому хорошая
+стратегия фокуса имеет решающее значение для обеспечения хорошего опыта для них.
+
+А для опытных пользователей, которые знают все горячие клавиши на своем
+компьютере, возможность быстро перемещаться по сайту, безусловно, сделает их
+более продуктивными.
+
+Таким образом, хорошо реализованная стратегия фокуса гарантирует, что все, кто
+использует ваше приложение, получат лучший опыт. На следующих уроках мы увидим,
+что усилия, которые вы вкладываете в фокус, являются важной основой для
+поддержки пользователей, использующих вспомогательных технологий и,
+действительно, всех пользователей.
+
+## Что такое фокус?
+
+Фокус определяет в какое место страницы попадут события клавиатуры в каждый
+момент времени. Например, если вы сфокусируете текстовое поле ввода и начнете
+печатать, то текстовое поле получит события клавиатуры и отобразит введенные
+вами символы. Пока оно сфокусировано, оно также будет получать вставленные
+входные данные из буфера обмена.
+
+![keyboard focus in a text field](imgs/keyboard-focus.png)
+
+Объект, сфокусированный в данный момент, часто обозначается  *кольцом фокуса
+(focus ring)*, стиль которого зависит как от браузера, так и от стилей,
+применяемых автором страницы. Например, Chrome, как правило, выделяет
+сфокусированные элементы синей рамкой, тогда как Firefox использует пунктирную
+границу.
+
+![sign up button](imgs/sign-up.png)
+
+Некоторые пользователи работают со своим компьютером почти полностью управляя им
+с клавиатуры или другого устройства ввода. Для таких пользователей фокус - это
+важно; это их основное средство достижения всего на экране. По этой причине
+контрольный список Web AIM указывает в разделе 2.1.1, что [все функциональные
+возможности страницы должны быть доступны с помощью
+клавиатуры](http://webaim.org/standards/wcag/checklist#sc2.1.1){: .external },
+кроме случаев, когда это то, что не может быть сделано с помощью клавиатуры,
+например, рисование от руки.
+
+Как пользователь вы можете контролировать какой элемент в настоящее время
+сфокусирован используя `Tab`,  `Shift+Tab` или клавиши со стрелками. В Mac OSX
+это работает несколько иначе: в то время как Chrome всегда позволяет вам
+перемещаться с помощью `Tab`, в других браузерах, таких как Safari, вам нужно
+нажать `Option+Tab` чтобы изменить фокус. (Вы можете изменить этот параметр в
+разделе «Клавиатура» в системных настройках.)
+
+![keyboard preferences dialog](imgs/system-prefs2.png)
+
+Порядок, в котором фокус двигается вперед и назад через интерактивные элементы с
+использованием `Tab` называется, что не удивительно, *порядок табуляции (tab
+order)*. Уверенность в том, что вы проектируете страницу с логичным порядком
+табуляции, является важным шагом, который мы рассмотрим позже.
+
+## Что можно сфокусировать?
+
+Встроенные интерактивные HTML элементы, такие как текстовые поля, кнопки и
+списки для выбора являются *неявно фокусируемыми*, что означает, что они
+автоматически вставляются в порядок табуляции и имеют встроенную обработку
+событий клавиатуры без вмешательства разработчика.
+
+![implicitly focusable fields](imgs/implicitly-focused.png)
+
+Но не все элементы являются фокусируемыми; paragraph, div и различные другие
+элементы страницы не фокусируемы, когда вы просматриваете страницу, и это
+преднамеренно. Как правило, нет необходимости что-то фокусировать, если
+пользователь не может взаимодействовать с этим.
+
+![not all elements are focusable](imgs/not-all-elements.png)
+
+## Испытание фокуса
+
+Давайте попробуем некоторые из методов фокусировки, которые мы только что
+обсудили. Используя Chrome, перейдите сюда [airline site mockup
+page](http://udacity.github.io/ud891/lesson2-focus/01-basic-form/){: .external }
+и найдите конкретный билет **используя только клавиатуру**. Эта страница не
+принимает ввод мыши, поэтому вы не сможете сделать упражнение кое-как (не потому
+что мы вам не доверяем ;-).
+
+![airline site mockup](imgs/airlinesite2.png)
+
+Параметры билета, которые вы должны указать:
+
+- в одну сторону (One Way)
+- в Melbourne (Arrival)
+- отправляющийся (Depart Date) 12 октября 2017 (10/12/2017)
+- прибывающий (Return Date) 23 октября 2017 (10/23/2017)
+- место у окна (Window seat)
+- не получать рекламные предложения (Receive promotional offers?)
+
+Когда вы успешно заполните форму без ошибок ввода и активируете кнопку поиска,
+форма просто очистится и перезагрузится. Идите и заполните форму, а затем
+возвращайтесь назад.
+
+Давайте рассмотрим, как форма использует ваш ввод с клавиатуры. Начиная с ваших
+первых нажатий `Tab`, браузер подсвечивает элементы навигации для рейсов
+(Flights), отелей (Hotels) и проката автомобилей (Rental Cars). По мере того,
+как вы продолжите нажимать `Tab` вы перейдете к группе переключателей, где вы
+сможете выбрать из поездки в обе стороны (Round Trip), в одну сторону (One Way)
+или многогородней поездки (Multi City) используя кнопки со стрелками.
+
+Продолжайте пройдя через поля имени и адреса, заполнив необходимую информацию.
+Когда вы придете к элементу выбора пункта назначения, вы сможете использовать
+клавиши со стрелками, чтобы выбрать город, или вы можете начать вводить текст
+для автозаполнения поля. Аналогично, в полях даты вы можете использовать клавиши
+со стрелками или просто ввести дату.
+
+Выбор типа посадки также зависит от клавиш со стрелками, либо вы можете ввести
+«w», «a» или «n», чтобы перейти к конкретной опции посадки. Затем вы можете
+отключить рассылку рекламных предложений по умолчанию, нажав пробел когда флажок
+сфокусирован. Наконец, сфокусируйте кнопку «Поиск» (Search) и нажмите `Enter`,
+чтобы отправить форму.
+
+Это очень удобно взаимодействовать с формой, используя только клавиатуру, и не
+нужно переключаться на мышь и обратно, чтобы выполнить задачу. Поскольку все
+элементы, используемые в форме, являются собственными тегами HTML с неявным
+фокусом, форма отлично работает с клавиатурой, и вам не нужно писать какой-либо
+код для добавления или управления фокусом.
+
+
+Translated by
+{% include "web/_shared/contributors/ann40a.html" %}
+
+## Feedback {: #feedback }
+
+{% include "web/_shared/helpful.html" %}