From 03725b108723e3b10ad914a571ae7028e6888c94 Mon Sep 17 00:00:00 2001 From: dmitryskripunov Date: Thu, 6 Feb 2020 05:59:49 +0000 Subject: [PATCH] Translate index.md via GitLocalize --- .../fundamentals/accessibility/focus/index.md | 150 ++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 src/content/ru/fundamentals/accessibility/focus/index.md diff --git a/src/content/ru/fundamentals/accessibility/focus/index.md b/src/content/ru/fundamentals/accessibility/focus/index.md new file mode 100644 index 00000000000..97d3abedcbc --- /dev/null +++ b/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" %}