Focus active hover: Стилизуйте состояния hover, focus и active по-разному | by Uriy

Leave a Comment / Разное / By /

Стилизуйте состояния hover, focus и active по-разному | by Uriy

Перевод статьи Zell Liew Style hover, focus, and active states differently

Много лет я стилизовал hover, focus и active одинаково. Я даже не могу вспомнить, когда я начал это делать таким образом. Вот пример кода, который я обычно использую:

// Not the best approach. I'll explain why in this article
.selector {
&:hover, 
&:focus,
&:active {
// Styles here
}
}

Как только я начал уделять больше внимания доступности (и как следствие уделять больше внимания состоянию focus), я начал понимать, что мы не должны стилизовать состояния hover, focus и active одинаковым образом.

Состояния hover, focus и active не должны быть стилизованы одинаково.

Вот простая причина для этого: это разные состояния!

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

Давайте начнем с hover.

Состояние hover инициируется, когда пользователь наводит свою мышь на элемент.

Состояние hover обычно представлено изменениями background-color (и\или color). Разница стилей между состоянием hover и его отсутствием не обязательно должна быть ярко выраженная, потому что пользователь уже знает, что он навел мышку на что-то.

button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}

focus активируется, когда происходит фокусировка на элементе. Это может происходить в одном из двух случаев:

  1. Когда пользователь переключается с помощью кнопки tab между элементами
  2. Когда пользователь кликает на элемент, который поддерживает состояние focus

Следующие элементы поддерживают состояние focus:

  • Ссылки (<a>)
  • Кнопки (<button>)
  • Элементы формы (input, textarea, и тому подобное)
  • Элементы со свойством tabindex

Пара важных моментов:

  1. Пользователь не может переключиться с помощью кнопки tab на элемент со свойством tabindex=”-1″, но он может кликнуть на него, тем самым переключив элемент в состояние focus
  2. В браузерах Safari и Firefox (на Mac) клик на элемент button не вызывает состояние фокусировки. Подробнее по этой ссылке https://zellwk.com/blog/inconsistent-button-behavior/
  3. Когда вы нажимаете на элемент <a>, фокус остается на <a> до тех пора, пока вы не уберете палец с мыши. Когда вы все же уберете палец, фокус будет смещен в другой элемент, если атрибут href указывает валидный id элемента на вашей странице.

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

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

Использование стилизации по умолчанию состояния focus в большинстве случаев достаточно. Если же вы хотите сделать свой собственный дизайн для состояния focus, то подумайте о следующих вещах:

  1. Использование css свойства outline.
  2. Создание анимации с движением.
  3. Изменение css свойства background-color.
  4. Изменение css свойства color.

Так как зачастую css свойства background-color и color используются для состояния hover, то имеет смысл использовать css свойство outline или анимации для состояния focus.

Вы можете комбинировать свойства outline, border и box-shadow, чтобы создать хорошо выглядящие стили для focus. Я писал об этом в статье “Создание своих стилей для focus” https://zellwk.com/blog/creating-focus-style/

button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}

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

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

  1. Удержание левой кнопки мыши на элементе (даже на тех, которые не поддерживают состояние focus).
  2. Удержание кнопки пробела (на элементах button).
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}

Два странных момента, на которые нужно обратить внимание:

  1. Удержание кнопки пробел вызывает состояние active на элементах button, но удержание кнопки ввод этого не делает.
  2. Нажатие на кнопку ввод активирует переход по ссылке, но не меняет их состояние на active. Нажатие на пробел не делает этого вообще.

Стили по умолчанию для ссылок

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

Связь между состояниями active и focus

Когда вы зажимаете левую кнопку мыши на элементе, который поддерживает состояние focus, то вы переводите его в состояние active. В тоже время вы так же вызываете состояние focus.

👆 Это условие работает для всех элементов, на которых возможна фокусировка, кроме ссылок и кнопок.

Для ссылок:

  1. Когда вы зажимаете левую кнопку мыши: инициализируются состояния active и focus в браузерах Firefox и Chrome, но в браузере Safari (проверено только на Mac) инициализируется только состояние active.
  2. Когда вы отпускаете левую кнопку мыши: состояние focus остается на ссылке (кроме тех случаев, когда ссылка ведет на элемент на той же самой странице), но в браузере Safari фокус переходит обратно на элемент body.

Для кнопок:

  1. Когда вы зажимаете левую кнопку мыши: инициализация состояний active и focus происходит только в браузере Chrome. Состояние focus не инициализируется при тех же самых действиях в браузерах Safari и Firefox (Mac). Я писал об этом странном поведении https://zellwk. com/blog/inconsistent-button-behavior/

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

document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})

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

  1. Когда вы зажимаете левую кнопку мыши: инициализуется состояние active во всех браузерах. При этом focus происходит только в Chrome.
  2. Когда вы отпускаете левую кнопку мыши: переключается состояние focus в браузерах Safari и Firefox (Mac). Фокус остается на кнопках в остальных браузерах.

Поведение кнопки в браузере Safari после добавления приведенного выше фрагмента JavaScript

Теперь вы знаете все о состояниях hover, focus и active. Давайте поговорим о их стилизации.

Следующая магическая комбинация позволяет пользователю получать обратную связь, когда происходит изменение состояний hover, focus и active, и взаимодействовать с элементами.

Вот тот кусочек css, который вам потребуется:

.element:hover,
.element:active {
/* Change background/text color */ 
}.element:focus {
/* Show outline /* 
}

Для пользователей мыши:

  1. Когда пользователь наводит на элемент, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.
  2. Когда пользователь кликает на элемент, используется свойство outline. Таким образом он получают обратную связь.

Для пользователей клавиатуры:

  1. Когда пользователь переключается между элементами с помощью tab, то используется свойство outline. Таким образом он получают обратную связь.
  2. Когда пользователь взаимодействует с элементов, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.

Лучшее из двух миров!

  1. Я не очень тщательно проверял эту магическую комбинацию. Это лишь доказательство концепции. Я буду благодарен, если вы поможете мне различными тестами и дадите мне знает, как она будет использоваться в реальной жизни.
  2. Для ваших тестов не используете Codepen. Поведение состояния focus очень странно в Codepen. Если вы наведете на ссылку, то контур (outline) ссылки будет удален. Почему? Я не знаю. Иногда я думаю, что лучше проверять подобные вещи без всяких модных инструментов. Используйте старый добрый HTML, CSS и JS.

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

Вот что происходит в случае Safari и Firefox (Mac):

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

Если для вас этого достаточно, то тогда магическая комбинация работает достаточно хорошо. Вам больше ничего не требуется.

Но если вы считаете иначе, то вам необходимо стилизовать состояния hover, focus и active независимо друг от друга.

.element:hover {
/* Change background/text color */ 
}.element:active {
/* Another change in background/text color */
}.element:focus {
/* Show outline /* 
}

Поведение кнопки в Safari, если вы применили все три стиля.

И это все! Надеюсь, что вы выучили сегодня что-то полезное.

Спасибо за чтение. Помогла ли вам эта статья? Если да, то я надеюсь, вы поделитесь ей. Это может помочь кому-то еще. Большое спасибо!

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

.selector {
  &:hover, 
  &:focus,
  &:active {
    ...
  }
}

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

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

Давайте начнём с :hover.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

  1. при выборе элемента кнопкой «Tab»
  2. при щелчке на элемент мышью

К фокусным элементам относятся:

  1. Ссылки (<a>)
  2. Кнопки (<button>)
  3. Элементы формы (<input>, <textarea> и т.д)
  4. Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

  1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
  2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>
  3. При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте
    href     указан существующий на этой же странице id

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

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

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

  1. Добавление обводки (outline)
  2. Создание анимаций
  3. Изменение background-color
  4. Изменение color

Поскольку изменение свойств background-color

и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

button {
  background-color: #dedede;
}
 
button:hover {
  background-color: #aaa;
}
 
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px lightskyblue;
}

Стилизация активного состояния (:active)

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

На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active. Вызывается это состояние, когда вы взаимодействуете с элементом

. Под взаимодействием в данном случае подразумевается:

  1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
  2. Удержание кнопки пробела (на кнопках)
button:active {
  background-color: #333;
  border-color: #333;
  color: #eee;
}

Две особенности, которые следует принять к сведению:

  1. Удержание пробела вызывает состояние :active у кнопок (<button>), но при удержании Enter этого не происходит
  2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

  1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)
  2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>

Для кнопок:

  1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus
    вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

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

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

Добавление этого кода изменит поведение нажатия кнопок на следующее:

  1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
  2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

.element:hover,
.element:active {
  /* Изменить цвет фона/текста  */
}
 
.element:focus {
  /* Показать обводку */
}

Для пользователей мыши:

  1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
  2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

  1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса.
    Происходит отклик.
  2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!

  1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
  2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

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

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover {
  /* Изменить цвет фона/текста  */
}
 
.element:active {
  /* Иные изменения в цвете фона и текста */
}
 
.element:focus {
  /* Показать обводку */
}

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Когда применяются псевдоклассы :hover, :focus и :active?

Когда мы выбираем элемент по его . class или #id , мы используем предопределенные и неизменные атрибуты, которые запекаются в DOM. С помощью псевдоклассов мы можем выбирать элементы, используя информацию, которой еще нет в DOM, и можем изменяться в зависимости от того, как пользователь взаимодействует со страницей.

:hover , :focus и :active — это псевдоклассы, определяемые действиями пользователя. Каждый из них соответствует очень конкретной точке взаимодействия пользователя с элементом на странице, таким как ссылка, кнопка или поле ввода.

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

Когда применяется

:hover

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

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

 кнопка: hover { background-color: #ffdb3a; }

На мобильном устройстве 📱 в основном есть только одно взаимодействие, которое вы можете совершить с любым интерактивным элементом, а именно касание/щелчок по нему. Вы можете заметить, что если вы нажмете на кнопку выше, она также изменит цвет, несмотря на то, что вы не «просто» наводите на нее курсор. Это связано с тем, что на мобильных устройствах события, запускающие эти псевдоклассы, могут быть объединены. посмотрим с :focus и :active также псевдоклассы.

Наконец, для пользователей клавиатурных устройств ⌨️ псевдокласс :hover никогда не запускается. Клавиатура не считается «указательным» устройством и поэтому не может применяться к этому псевдоклассу наведения указателя.

Когда применяется

:focus

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

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

 кнопка: фокус { background-color: #ffdb3a; }

Для пользователей клавиатуры ⌨️ фокусировка на элементе очень похожа на наведение на него курсора для пользователей мыши. Мне нравится думать о псевдоклассе :focus как о состоянии наведения для клавиатурных устройств, потому что это сигнализирует о подобном намерении взаимодействия.

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

Когда

:активен применяется

Наконец, псевдокласс :active применяется в период, когда элемент активируется. Например, при использовании мыши 🐭 это будет время между нажатием кнопки мыши и ее отпусканием.

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

 кнопка: активная {цвет фона: #ffdb3a; }

Псевдокласс :active работает таким же образом для взаимодействия с мышью и клавиатурой ⌨️.

На мобильных устройствах 📱, как и псевдокласс :focus , псевдокласс :active применяется при касании элемента. И опять же, это вообще не применимо в мобильном браузере Safari.

Объединение

:hover , :focus и :active

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

Мы можем проверить это, изменив фон кнопки, только если выполняются все три условия.

 кнопка: наведение: фокус: активный { 
 background-color: #ffdb3a; 
 }

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

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

Порядок стилей —

:hover затем :focus затем :active

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

Допустим, у нас есть следующие стили:

 button:active { 
 background-color: green; 
 } 
 button:focus { 
 background-color: blue; 
 } 
 
 button:hover { 
 цвет фона: красный; 
 }

Будут видны только стили :hover

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

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

 button:hover { 
 цвет фона: зеленый; 
 } 
 button:focus { 
 background-color: blue; 
 } 
 
 button:active { 
 цвет фона: красный; 
 }

Будут видны все стили

Резюме

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

  :наведение :фокус :активный
Мышь 🐭 Да Да Да
Клавиатура ⌨️ Нет Да Да
Сенсорный экран 📱 Да (по щелчку) Да* (по щелчку) Да* (по щелчку)

* Не применимо к мобильному (iOS) Safari

Наведение, фокус, активный | Доступность

Наведение, фокус, активный

 

  • Перейти к:
  • Кто они такие?
  • Дизайн и развитие
  • Ресурсы

Какие они?

Слова «зависание», «фокус» и (в меньшей степени) «активный» часто обсуждаются WCAG и очень важны для доступности. Итак, давайте узнаем, что они означают (и немного больше!).

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

  • Навести: , наведя на него курсор. Наведенный элемент готов к активации с помощью мыши или любой технологии, имитирующей мышь (например, слежение за глазами и движением). 902:30
  • Фокус: сфокусированный элемент готов к активации с помощью клавиатуры или любой технологии, имитирующей клавиатуру (например, устройства переключения).
    • С клавиатурой или эмулятором клавиатуры вы можете перемещаться с помощью табуляции, пока не дойдете до нужного элемента. «Вкладка» может включать простое нажатие клавиши Tab или более сложную комбинацию клавиш, в зависимости от вашего браузера и настроек.
    • Некоторые программы чтения с экрана перемещают фокус на элемент, доступный для фокусировки, когда читают его. Затем фокус остается на этом элементе, пока читатель не встретит другой фокусируемый элемент. 902:30
    • В большинстве браузеров после активации кнопки она остается в фокусе.
  • Активировать: элемент активен, когда он в данный момент активируется.
    • С помощью мыши или эмулятора мыши вы можете щелкнуть мышью, наведя на нее курсор.
    • С клавиатурой или эмулятором клавиатуры:
      • Для ссылок: вы можете нажать клавишу Enter, когда на ней находится фокус.
      • Для кнопок, раскрывающихся списков выбора и многих элементов ввода: вы можете нажать клавишу пробела, когда на ней находится фокус. 902:30

Дизайн и разработка

Hover

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

Focus

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

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

Вот несколько советов по реализации дополнительных стилей фокуса:

  • Убедитесь, что вы разрабатываете стили фокусировки, которые достаточно заметны, особенно для людей с ограниченным зрением. Когда пользователь просматривает вкладку, он не может предсказать, где будет следующий элемент, на который можно сфокусироваться, поэтому стиль фокуса должен привлекать его внимание.
  • Не вмешиваться в стили фокуса по умолчанию: не использовать контур : нет , чтобы заставить их исчезнуть, и не использовать свойство контура для дополнительной подсветки фокуса или чего-либо еще. Многие люди, которые полагаются на видимый фокус для навигации, имеют свои собственные предпочтения и используют свойство структуры , чтобы переопределить настройки браузера по умолчанию; если вы также используете свойство схемы , вы можете переопределить настройки пользователя или привести к непредвиденным результатам.
  • Если вам или клиенту не нравится, как выглядят стили фокуса браузера по умолчанию, вы можете использовать полифилл :focus-visible . Он основан на новом псевдоклассе CSS, который может быть добавлен в следующей версии CSS в дополнение к псевдоклассам hover, focus и active. При использовании :focus-visible , браузер показывает стили фокуса только в том случае, если он определяет, что они необходимы (например, если пользователь перемещается с помощью клавиатуры).

Active

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *