Фокусы со стилями для фокуса

Методы focus/blur

Методы и устанавливают/снимают фокус.

Например, запретим посетителю переключаться с поля ввода, если введённое значение не прошло валидацию:

Это сработает во всех браузерах, кроме Firefox (bug).

Если мы что-нибудь введём и нажмём Tab или кликнем в другое место, тогда вернёт фокус обратно.

Отметим, что мы не можем «отменить потерю фокуса», вызвав в обработчике потому, что срабатывает после потери фокуса элементом.

Потеря фокуса, вызванная JavaScript

Потеря фокуса может произойти по множеству причин.

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

• переводит фокус на себя – элемент теряет фокус (событие ), а когда закрывается – элемент получает фокус обратно (событие ).
• Если элемент удалить из DOM, фокус также будет потерян. Если элемент добавить обратно, то фокус не вернётся.

Из-за этих особенностей обработчики могут сработать тогда, когда это не требуется.

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

Как отключить залипание клавиш на Windows 10 различными способами?

Работая за компьютером, многие пользователи для выполнения различных команд используют либо сочетание клавиш, либо функционал правой кнопки мыши. Однако, пользователям Виндовс 10 с ограниченными возможностями достаточно сложно набрать комбинацию клавиш одной рукой, если она состоит из набора нескольких символов, расположенных в различных частях клавиатуры. Конечно, можно воспользоваться компьютерной мышкой. Однако её функционал также ограничен. Для такого случая разработчики Майкрософт предусмотрели такую функцию, как залипание клавиш, которая позволяет включать и выключать на постоянной основе определённую функциональную клавишу или целый набор. Это позволяет человеку набрать сочетание в удобной последовательности и оно сработает. Рассмотрим, как включить и как отключить залипание клавиш Windows 10 различными способами.

Залипание клавиш – это специальная опция ОС Windows (не только Десятки), которая позволяет людям с ограниченными возможностями активировать клавишу-модификатор, к примеру, Ctrl или Shift, на постоянной основе. Что это означает?

Выбранная функциональная кнопка будет залипать в момент набора определенной комбинации, в которой она состоит. К примеру, юзеру нужно вызвать Диспетчер задач. Для этого необходимо набрать Ctrl+Shift+Esc. Поскольку клавиатура ноутбука и стационарного ПК достаточно широкая, человек не сможет нажать несколько клавиш. Для этого он активирует залипание и набирает только часть комбинации или медленно по одной кнопке задает верную команду.

Включить залипание клавиш на компьютере с Windows 10 можно тремя различными методами.

Способ №1

Первый способ самый простой. Нужно пять раз подряд (в некоторых случаях более пяти повторений) нажать клавишу Shift.

Вы услышите своеобразный звуковой сигнал (писк) и на рабочем столе появиться сообщение об активации функции залипания. Жмем «ОК», чтобы её включить.

Способ №2

• Жмем «Пуск», «Параметры» и выбираем «Специальные возможности».
• В меню слева выбираем раздел «Клавиатура» и перетаскиваем ползунок в положение «Включено» в разделе «Залипание клавиш».

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

Способ №3

• Нажимаем правой кнопкой мыши на значке «Пуск» и выбираем «Панель управления».
• Выбираем «Центр специальных возможностей», «Облегчение работы с клавиатурой».

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

Эти самые простые способы, как активировать данную опцию в этой ОС.

В отличие от включения, есть пошаговых инструкций, как отключить залипание клавиш на Windows 10, или другой ОС, установленной на ПК или ноутбук.

Итак, чтобы выполнить отключение залипаний клавиш на ПК с Windows 10, стоит воспользоваться такими рекомендациями.

Способ №1. Отключение через Панель управления

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

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

Способ №2. Отключение через сочетание клавиш

Поскольку залипание предполагает невозможность одновременного набора нескольких клавиш, отключать залипание клавиш можно, одновременно нажав любую комбинацию «Shift+Ctrl» или «Shift+Del».

Способ №3. Отключение через меню Параметров Windows 10

Этот метод самый простой. Нужно перейти в «Параметры», выбрать «Специальные возможности». В меню слева выбираем «Клавиатура». В окне справа перетаскиваем ползунок в положение «Отключено» в разделе «Залипание клавиш».

Способ №4. Отключение залипания клавиш с помощью системного реестра

Для того, чтобы отключить эту функцию через системный реестр, стоит выполнить такие шаги:

• Откроется редактор реестра. Переходим по ветке «HKEY_CURRENT_USER/Control Panel/Accessibility/StickyKeys».
• В последней папке, а именно в «StickyKeys», есть файл «Flags». Нужно его открыть и задать значение «506». Если задать «510», то залипание будет включено.

Сохраняем результаты и перезагружаем систему.

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

Динамические псевдо-классы

Динамические псевдо-классы – это :active, :hover, :focus. Динамические псевдо-классы срабатывают по определённому действию на странице, они работают для всех тегов, а не только для ссылок как многие думают и даже утверждают в своих блогах! Рассмотрим их применение:

p:active {background: red;} /* стиль, который применится к тегу по нажатию на него (клику мышью) */
input:focus {width: 400px;} /* стиль, который применится к элементу, на котором в данный момент фокус (работает, к примеру, для текстовых полей ввода: textarea, input). В данном случае по взятию в фокус, ширина input станет равна 400 пикселей, удобно использовать для красивого эффекта удлинения поля по клику. */
div:hover {background: green;} /* срабатывает по наведению курсора на элемент, в основном применяется для создания красивого эффекта при наведении на ссылки. */

Примените данные стили к нашему примеру выше, и вы сами всё увидите.

Селекторы class и id

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

<div id="first">текст в первом диве</div>
<div class="second">текст во втором диве</div>
<div id="third" class="first second third">текст в третьем диве</div>

На что стоит обратить внимание:

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

Как обратиться к классу или id в файле стилей (CSS)?

Смотрим пример:

#first {color: red;} /* обращаемся к id с именем first */
.second {color: blue;} /* обращаемся к классу с именем second */
#first .second {color: orange;} /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */
.first .third {color: grey;} /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

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

В чём различие class и id?

Кроме приведённых выше различий, стоит ещё отметить, что у свойств заданных id приоритет выше, чем у свойств, заданных классу. То есть, если мы напишем:

 <style>
#first {color: red;}
.blue {color: blue;}
</style>
<div id="first" class="blue">текст в диве</div>

То цвет текста станет красным, несмотря на то, что класс находится ниже по коду и если бы у них был равный приоритет текст стал бы синим.

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

.myclass {свойства} /* применятся ко всем тегам, которые содержат класс myclass */
div.myclass {свойства} /* применятся только к тегам div, которые содержат класс myclass */

Для id это тоже будет работать, но такая запись лишена всякого смысла, так как id не может повторяться на странице, а значит достаточно просто объявлять id, без тега к которому оно относится:

<style>
#super {свойства} /* правильно */
div#super {свойства} /* Неправильно, но работать будет */
</style>
<div id="super">текст</div>

Вроде бы осталось только одно неоговорённое отличие, и оно касается темы, которую в ближайшем будущем я не планировал затрагивать на этом блоге – Javascript. Но всё же обязан доложить вам о нём: если вы хотите обратиться к элементу с помощью Javascript, то для этой цели очень удобным будет наличие id у этого элемента. Чтобы обратиться к элементу по его классу в Javascript нет такой встроенной возможности, вам придётся использовать вспомогательные функции + это не всегда кроссбраузерно.

Итог: id и class используем, но в меру, при этом всегда спрашивая себя, а можно ли здесь обойтись без них и насколько это целесообразно.

Итак, каков ответ?

Удалите уродливые очертания и добавьте собственные визуальные подсказки, указывающие на фокус.

Вот очень простой пример того, что я имею в виду.

Я удаляю контур и добавляю нижнюю границу на : focus и : active. Я также удаляю границы по умолчанию на верхней, левой и правой сторонах, установив их прозрачными на : focus и : active (личные предпочтения )

Итак, мы пробуем описанный выше подход на нашем «реальном» примере из более раннего:

Это можно расширить с помощью внешних библиотек, которые основаны на идее изменения «схемы», а не полного ее удаления, как Materialize а>

Вы можете получить что-то не уродливое и работающее с очень небольшими усилиями.

Знакомство с inertСкопировать ссылку

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

Я намеренно избегаю использования для модального окна из-за многочисленных проблем с поддержкой.

Атрибут задан элементу , следующему сразу после модального окна сохранения изменений. Теперь всё содержимое не может попасть в фокус и по нему нельзя кликнуть.

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

Помните: событие закрытия модального окна может быть вызвано не только нажатием на кнопки внутри нашего модального окна из примера, но и при нажатии на Esc. А ещё некоторые модальные окна могут быть закрыты по клику на оверлей.

Поддержка Скопировать ссылку

Все последние версии , если включены экспериментальные функции веб-платформ. Также скоро появится его поддержка в Firefox! Единственное исключение — Safari, как мобильный, так и десктопный.

Мне бы очень хотелось, чтобы Apple реализовала встроенную поддержку . Хоть полифил и существует, но у него . Нехорошо!

Вдобавок хочется обратить внимание на :

Перемещение по DOM подразумевает, что JavaScript в полифиле требует высокой вычислительной мощности и, следовательно, в конечном итоге замедлит использование.

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

SafariСкопировать ссылку

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

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

К сожалению, Apple держит в тайне, когда появится поддержка этого атрибута. Поэтому поддержка  — всё ещё открытый вопрос.

IgaliaСкопировать ссылку

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

Одно из предложений Igalia — это . Если вы искали возможность принять участие в улучшении доступности веба, но не знали с чего начать, я могу вам её предоставить. 5 $, 10 $, 25 $ — совсем необязательно жертвовать большие суммы, даже маленький вклад ценен.

Включаем фокусировку на любом элементе: tabindex

Многие элементы по умолчанию не поддерживают фокусировку.

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

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

Это можно изменить HTML-атрибутом .

Любой элемент поддерживает фокусировку, если имеет . Значение этого атрибута – порядковый номер элемента, когда клавиша Tab (или что-то аналогичное) используется для переключения между элементами.

То есть: если у нас два элемента, первый имеет , а второй , то находясь в первом элементе и нажав Tab – мы переместимся во второй.

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

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

Есть два специальных значения:

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

  Обычно используется, чтобы включить фокусировку на элементе, но не менять порядок переключения. Чтобы элемент мог участвовать в форме наравне с обычными .

• позволяет фокусироваться на элементе только программно. Клавиша Tab проигнорирует такой элемент, но метод будет действовать.

Например, список ниже. Кликните первый пункт в списке и нажмите Tab:

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

Свойство тоже работает

Мы можем добавить из JavaScript, используя свойство . Это даст тот же эффект.

Закрывающиеся диалоги (модальные окна)

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

Чтобы дать пользователю доступ к кнопкам диалогового окна, необходимо перевести фокус на это окно точно так же, как мы фокусировались на фрагменте страницы из предыдущего примера. При использовании jQueryUI фокус будет переведен на первую в окне кнопку (в нашем случае на кнопку “Подтвердить”). В другой реализации фокус переводится на контейнер диалогового окна. Другими словами, пользователя программным способом перемещают к нужному месту.

$('dialog button:first-of-type').focus();

Другой вопрос, что происходит с фокусом, когда окно закрывается? Если мы ничего не сделаем, то скрытый диалог потеряет фокус, и фокус никуда автоматически не сместится. В большинстве браузеров это означает, что по умолчанию фокус будет перемещен на элемент <body>, и пользователю из-за этого придется проходить весь путь до необходимого элемента заново.

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

$(this).attr('data-dialog-trigger', true);

В конце метода закрытия диалога мы просто сместим фокус на оригинальный элемент:

$('').focus();

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

Отключение залипания в XP

Предложение об активации этой функции постоянно появляется после пятикратного нажатия клавиши Shift
. Чтобы убрать эти назойливые уведомления необходимо следовать такому алгоритму:

Во всплывающем окне нажимаем кнопку Параметры.

Попав в меню настроек специальных возможностей в первой же вкладке Клавиатура переходим в настройки функции Залипание клавиш.

В верхней части следующего окна находится чекбокс активации этого режима после пяти нажатий Shift. Его необходимо снять.

После принятия изменений и перезагрузки системы необходимость постоянно закрывать надоедливое окно после нескольких нажатий Shift отпадёт.

Псевдо-классы

В отличие от классов, псевдо-классы не нужно указывать в HTML разметке, они сами вычисляются браузером. У нас есть 4 статических псевдо-класса и 3 динамических псевдо-класса, без учёта CSS 3, о нём ближе к концу. К статическим относятся ( :first-child, :link, :visited, : lang() ):

<style>
p:first-child {color: green;} /* сработает, если p является первым ребёнком своего родителя */
</style>
<div>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <span>
      <p>Третий уровень</p>
    </span>
  </span>
  <p>Прямой наследник (первый уровень)</p>
  <span>
    <p>Второй уровень</p>
  </span>
  <p>Прямой наследник (первый уровень)</p>
</div>

Результат:

Естественно можно комбинировать селекторы как захотим, например:

div>span p:first-child {color: green;} /*сработает, если p является первым ребёнком своего родителя и находится внутри тега span, который является прямым потомком тега div */

Название представленного выше псевдо-класса говорит само за себя first-child — первый ребёнок.

Следующие два статических псевдо-класса применяются только к тегу гиперссылки (:link, :visited), они применяют CSS свойства в зависимости от того, посещалась данная ссылка конкретным пользователем или нет:

a:link {color: blue;} /* у не посещённых ссылок задаём синий цвет, и по умолчанию они подчёркнуты */
a:visited {color: green; text-decoration: none;} /* у посещённых ссылок текст будет зелёным, убираем подчёркивание */

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

q:lang(de) {quotes: "\201E" "\201C";} /* кавычки для немецкого языка */
q:lang(en) {quotes: "\201C" "\201D";} /* кавычки для английского языка */
q:lang(ru) {quotes: "\00AB" "\00BB";} /* кавычки для русского языка */

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

Что делать, если залипание клавиш не отключается

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

Включение и выключение настроек залипания

Попробуйте зайти в «Параметры» или «Панель управления» и включить все пункты, отвечающие за залипание. Перезагрузите компьютер, затем таким же образом отключите все включенные параметры. Снова выполните перезапуск ПК. Этот вариант иногда оказывается эффективным для пользователей, отключающих залипание клавишей Shift.

Настройка электропитания клавиатуры

У некоторых моделей клавиатуры рассматриваемая проблема появляется из-за некоторых программных конфликтов. Устранить их помогает изменение одной настройки электропитания.

1. Нажмите ПКМ по «Пуску» и перейдите в «Диспетчер устройств».

Найдите список «Клавиатуры» и разверните его. Вызовите свойства подключенного устройства, нажав по нему дважды левой кнопкой мыши.

Переключитесь на вкладку «Управление электропитанием» и снимите галочку с пункта «Разрешить этому устройству выводить компьютер из ждущего режима». Сохраните и закройте окно кнопкой «ОК».

Дополнительно проверьте, отключено ли в текущей сессии залипание клавиш. Если нет, отключите их, перезапустите Windows 10 и проверьте, была ли устранена неполадка.

Устранение проблем с драйвером

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

Обновление драйвера

1. Снова откройте «Диспетчер устройств» и найдите там свою клавиатуру. Кликните по ней правой кнопкой мыши и выберите пункт «Обновить драйвер».

Воспользуйтесь автоматическим поиском.

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

Удаление драйвера клавиатуры

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

1. В «Диспетчере устройств» найдите клавиатуру, кликните по ней правой кнопкой мыши и используйте пункт «Удалить устройство».

Ответьте утвердительно в окне с предупреждением.

Отправьте компьютер на перезагрузку.

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

Помимо этой статьи, на сайте еще 12010 инструкций. Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Люди

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

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

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

Селекторы атрибутов

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

p {свойства} /* применить ко всем тегам p, у которых есть атрибут align */
p {свойства} /* где значение атрибута align равно center */
p {свойства} /* где значение атрибута align начинается на center */
p {свойства} /* где значение атрибута align содержит center */
p {свойства} /* где site может находиться среди других слов, отделенных пробелами (<p class="support site magazine"></p>) */
p {свойства} /* где значение атрибута class состоит только из слова site или начинается им, после чего ставится дефис и пишется остальная часть значения (<p class="site-On"></p> или <p class="site-off"></p>) */
p {свойства} /* где значение атрибута align заканчивается на site */

Заключение

Объединение новомодных веяний с доступностью контента является распространенной ошибкой разработчиков. Даже если вы позаботились о том, как поведет себя страница с новыми фишками при выключенном JavaScript, это не означает, что она стала “доступнее”. Конечно, страница доступна для тех, у кого выключен JavaScript, но большинство пользователей программ чтения с экрана или клавиатур взаимодействуют с вашим приложением с помощью JavaScrip более, чем другие. Хитрость использования JavaScript состоит в его использовании таким образом, чтобы покрыть разнообразные модели поведения всех типов пользователей и вспомогательных технологий, которые они могут использовать.

И еще одно: если вы когда-либо работали (или работаете) с библиотеками для построения одностраничных приложений, такими как Ember.js или AngularJS, прошерстите ваш код на использование JavaScript-метода . Такие приложения полностью переделывают страничную навигацию, используя “виды” и динамическое перестроение единичной страницы. Без аккуратного управления фокусом такое перестроение DOM может весьма пагубным образом сказаться на удобстве использования страницы.