Сегодня я неожиданно обнаружил очень странную проблему. Некоторые веб-сайты, посвященные CSS, XHTML, Web 2.0 и веб-стандартам, обсуждают, как удалить пунктирную рамку (контур) вокруг гиперссылки при щелчке мыши, например, контур: нет или контур: 0 . Возможно, иногда появление пунктирной рамки (контура) по умолчанию будет влиять на внешний вид, но ее существование должно иметь свою причину: то есть для улучшения удобства использования веб-сайта, особенно для обеспечения большего удобства для людей, использующих навигацию с помощью клавиатуры. Обсуждая семантику и простоту использования, мы всегда делаем вещи, которые им противоречат.
1. Пунктирная рамка (контур) упрощает навигацию с помощью клавиатуры.
У меня есть привычка при чтении статей: я редко пользуюсь мышью и в основном полагаюсь на клавиатуру. Наиболее часто используемые из них — это клавиша Tab, PageUp, PageDown, Enter и четыре клавиши направления. Клавиша Tab используется для навигации по гиперссылкам. Выбрав ссылку, нажмите Enter непосредственно для входа (теперь вы можете использовать клавишу Tab, чтобы увидеть эффект на этой странице). Когда клавиша Tab фокусируется на ссылке, вокруг ссылки появляется пунктирная рамка (контур), указывая, что ссылка находится в фокусе и к ней можно получить доступ после подтверждения. Конечно, многие могут сказать, ведь так удобно пользоваться мышкой, зачем клавиатура? Здесь я хотел бы привести несколько причин.
Говорят, что одним из критериев того, чтобы стать настоящим мастером компьютера, является способность выполнять все операции без использования мыши. Иногда, когда я читаю статью, то, что я держу кофе в правой руке и печатаю на клавиатуре левой рукой, не влияет на мое чтение.
Особые потребности особых групп людей. Ваш веб-сайт предназначен не только для вас. Вы не можете влиять на то, как другие используют ваш веб-сайт.
Новый стиль при использовании клавиши Tab для фокусировки на ссылке (он может различаться в разных браузерах, но в каждом браузере есть эта функция, что показывает ее необходимость)
2. Худший пользовательский опыт
Используйте Outline:none или Outline:0, чтобы удалить внешнюю пунктирную рамку. Хотя по ссылке не видно никаких изменений, по крайней мере, информацию о ссылке можно увидеть в строке состояния. Но еще хуже для пользователя использовать событие onfocus в JavsScript. Когда пользователь фокусируется на ссылке, он немедленно отменяет фокус, а это означает, что вы никогда не сможете сфокусироваться на этой гиперссылке, поэтому, если вы не используете мышь, вы можете это сделать. Посетите любую ссылку на этой странице. Некоторые эксперты разработали методы использования JQuery для удаления контуров. Если вы погуглите «удалить пунктирные линии из ссылок», вы получите десятки тысяч результатов. Кажется, многим это нужно и они исследуют это. Но он нарушил принцип простоты использования Интернета и вообще не принял во внимание пользовательский опыт.
3. Альтернативные варианты
Если вы действительно думаете, что появление пунктирной рамки повлияет на внешний вид, у вас определенно может быть лучший выбор. То есть использовать псевдокласс :focus в CSS. Например, используя
а: фокус {цвет фона: # f00 }
/*или*/
a:hover, a:focus {text-decoration:underline;}
При срабатывании фокуса фон ссылки становится красным и т. д. Конечно, при необходимости вы можете создавать более сложные стили, а также устанавливать фокус и наводить курсор на тот же стиль. Но есть одно но, заблокировать механизм срабатывания фокусировки нельзя.
Поэтому никогда не удаляйте пунктирную рамку вокруг гиперссылки, по крайней мере, чтобы не заблокировать срабатывание фокуса.