Фокусируются ли элементы при щелчке мышью по ним? Они показывают индикацию фокуса, как пунктирная граница или кольцо фокусировки?
Ответ всегда был положительным — и, на мой взгляд, так и должно быть, — однако поведение браузера в последние годы изменилось как тонким, так и значительным образом.
Теперь, если вы выполните быстрый поиск способов подавления контуров фокуса, вы получите тысячи результатов. Как мне избавиться от этой уродливой пунктирной границы, которая портит мой красивый дизайн?
приходит крик Интернет-индустрия всегда была переполнена людьми, которые, кажется, думают, что все в порядке — которые думают, что их произвольная эстетика важнее, чем доступность; кто не просто хочет убрать визуальную индикацию фокуса, но и вообще не позволяет ссылкам и полям формы брать фокус.
Значительное количество разработчиков даже не понимают разницы, поэтому я полагаю, что могу быть сочувствующим тем, кто продает такие решения:
<a onfocus="this.blur()">Когда все, что они действительно хотели, было это:
a:focus { outline:none; }
Оба из них являются бедствиями доступности, но последнее понятно с точки зрения дизайна; или, по крайней мере, понятно, что касается фокусировки, вызванной мышью . Позвольте мне прояснить: вы никогда не должны препятствовать тому, чтобы элементы захватывали фокус, и вы не должны удалять индикацию фокуса, когда пользователь вкладывает элемент (если, конечно, вы не заменили его чем-то другим).
Но даже меня искушали такие решения:
a:focus:not(:hover) { outline:none; }
Так можно ли предотвратить отображение фокуса, когда пользователь щелкает мышью ? Производители браузеров все чаще думают так, и многие больше не добавляют собственный план в этой ситуации. Фактически, в некоторых случаях они вообще не фокусируют элемент.
Чтобы попытаться прояснить ситуацию, я провел несколько тестов . Вот заголовки:
- В Firefox ссылки не отображают собственный контур фокуса при щелчке мышью, если только вы не использовали клавишу Tab во время текущего просмотра страницы.
- В Opera и IE10 ссылки никогда не отображают контур основного фокуса при щелчке мышью.
- В Chrome и Safari ссылки вообще не фокусируются при щелчке мышью, если только они не имеют
tabindex - В Firefox для Mac, Chrome и Safari некоторые типы полей формы вообще не фокусируются при щелчке мышью; это поведение ограничено полями, которые не имеют типизированного ввода, такими как радио, флажки, кнопки, палитры цветов и ползунки.
Также есть кое-что интересное, что следует отметить с такими элементами, как <span>tabindex Помните, что элементы с tabindex="0"tabindex="-1"программно .
За исключением того, что это не так:
- Во всех браузерах элементы с отрицательным индексом табуляции можно сфокусировать, щелкнув их мышью, они просто не в порядке табуляции.
Я обнаружил, что самая любопытная аномалия из всех — элементы, доступные для клавиатуры, не могут быть сфокусированы с помощью мыши, но элементы, ориентированные на мышь, не доступны для клавиатуры!
Так что же делать со всем этим? Ну, честно говоря, трудно быть уверенным. Такое поведение не совсем новое, но оно довольно недавнее. Например, если мы вернемся к Firefox 3.6, мы обнаружим, что ни одно из отмеченных предупреждений не применимо — все фокусируемые элементы получают фокус при щелчке по ним мышью, и все показывают индикацию собственного фокуса.
Возможно, мы можем поместить это в некоторый контекст, если мы посмотрим на соглашения о платформах . Например, в диалоговых окнах Mac текстовые поля и меню фокусируются, когда вы щелкаете их мышью, а кнопки, радиоприемники и ползунки — нет. Это соответствует поведению, которое мы отмечали ранее, в Firefox для Mac, Chrome и Safari. Мы не видели такого поведения в Firefox для Windows, и, действительно, все диалоговые виджеты в Windows фокусируются при нажатии на них. Тем не менее, в Chrome для Windows мы получаем то же поведение, что и для Mac, поэтому Chrome не может утверждать, что соблюдает соглашения платформы, как Firefox.
Но насколько важны соглашения платформы для веб-приложений? У сети есть свои собственные соглашения, и я не думаю, что это хорошая идея навязывать ей соглашения о платформах. Достаточно сложно заставить разработчиков позаботиться о доступности, не думая об этом с точки зрения платформы !
Лично я не думаю, что все это хорошо. Я думаю, что все фокусируемые элементы должны фокусироваться любыми средствами взаимодействия, и всегда должны показывать собственный контур фокуса, когда они это делают (за исключением элементов с tabindex="-1" Но я также не наивен на пожелания дизайнеров, и у меня есть определенное сочувствие к тому, как фокус может раздражать дизайн.
Тем не менее, самая важная вещь — это потребности пользователей, а потребности пользователей в доступе стоят на первом месте . Кто-нибудь из нас когда-либо имел жалобы от пользователей, говоря, что им не нравятся эти пунктирные линии или ярко-синие кольца? Пользователи не ценят такие вещи, как мы, они просто хотят, чтобы они работали.