Комментарии 55
Не очень наглядно без картинок показывающих как выглядят кнопки в каждом примере.
Да ну, это все мелочи. Главный антипаттерн — это когда область клика/тапа меньше чем видимая часть кнопки, или когда она не кликается с первого раза.
НЛО прилетело и опубликовало эту надпись здесь
А клик по этому полупикселю триггерит поп-ап и три поп-андера!
Не стоит забывать, что эта кнопка "закрыть" появляется только через N секунд после того как сам поп-ап элемент на экране возникнет.
И на самом деле это не кнопка «закрыть», а очередной «скрыто» спрятанный попандер. А реальная кнопка «закрыть» с другой стороны окна бледным текстом и мелким шрифтом (чтобы никто, не дай бог, не догадался).
Бывает тоньше — кнопка [x] есть сразу, но ровно через N.M секунд примерно соответствующих времени реакции пользователя она прыгает в другую область баннера.
Ну и толсто — тупо реагирующие на мышь и уползапющие тоже встречались.
И потом эти люди жалуются что такие нехорошие пользователи ставят адблок
Ну и толсто — тупо реагирующие на мышь и уползапющие тоже встречались.
И потом эти люди жалуются что такие нехорошие пользователи ставят адблок
Это, конечно, было интересное исследование, но вы упустили, на мой взгляд, самый приятный вариант:
1. Делаем попап, внутрь (на одном уровне) кладём кнопку и обёртку контента. В кнопку кладем пустой span, он будет ловить клики вне попапа (ну и/или не только клики).
2. Попапу задаём z-index: 999 (можно больше), кнопке закрыть — z-index: 1, контенту — z-index: 2. Таким образом, всё содержимое кнопки всегда будет ниже содержимого контента
Для тега span (который внутри кнопки) задаём z-index: -1, за счёт этого он не будет мешать остальному содержимому кнопки (тексту, например). Хотя если оно не важно, можно оставить как есть.
4. Саму кнопку размещаем где хотим.
5. Для span'а задаём фиксированное позиционирование (за счёт чего он забивает на то, что его родитель (кнопка) маленькая, и спокойно примет заданные размеры, а их мы зададим во весь экран).
5. С помощью псевдоэлементов ::before и ::after делаем две полоски, поворачиваем, закругляем углы — делаем вообще всё, что придёт в голову. Размещаем их справа, делаем из них крестик.
6. При наведении на кнопку ставим любое действие с псевдоэлементами, чтобы было красиво. Можно их вращать, скалировать, перекрашивать, добавлять обводки — в общем, делать вообще всё, что в голову взбредет.
Профит.
Скринридеры читают «Закрыть» внутри кнопки, псевдоэлементы делают красиво, span прикрепляет область вокруг попапа к кнопке.
Пример, сделанный за 15 минут на коленке =)
P.S. Чтобы текст закрашивался с той же скоростью, что и крестик, откройте codepen в отдельной вкладке. Не знаю, почему, но во вставленном варианте плохо работает анимация.
1. Делаем попап, внутрь (на одном уровне) кладём кнопку и обёртку контента. В кнопку кладем пустой span, он будет ловить клики вне попапа (ну и/или не только клики).
2. Попапу задаём z-index: 999 (можно больше), кнопке закрыть — z-index: 1, контенту — z-index: 2. Таким образом, всё содержимое кнопки всегда будет ниже содержимого контента
Для тега span (который внутри кнопки) задаём z-index: -1, за счёт этого он не будет мешать остальному содержимому кнопки (тексту, например). Хотя если оно не важно, можно оставить как есть.
4. Саму кнопку размещаем где хотим.
5. Для span'а задаём фиксированное позиционирование (за счёт чего он забивает на то, что его родитель (кнопка) маленькая, и спокойно примет заданные размеры, а их мы зададим во весь экран).
5. С помощью псевдоэлементов ::before и ::after делаем две полоски, поворачиваем, закругляем углы — делаем вообще всё, что придёт в голову. Размещаем их справа, делаем из них крестик.
6. При наведении на кнопку ставим любое действие с псевдоэлементами, чтобы было красиво. Можно их вращать, скалировать, перекрашивать, добавлять обводки — в общем, делать вообще всё, что в голову взбредет.
Профит.
Скринридеры читают «Закрыть» внутри кнопки, псевдоэлементы делают красиво, span прикрепляет область вокруг попапа к кнопке.
Пример, сделанный за 15 минут на коленке =)
P.S. Чтобы текст закрашивался с той же скоростью, что и крестик, откройте codepen в отдельной вкладке. Не знаю, почему, но во вставленном варианте плохо работает анимация.
Автору, видимо, платят за количество символов в статье. А что, удобно. Проблема 1 — несемантичная иконка (5 вариантов). Проблема 2 — несемантичная кнопка (3 варианта — button/div/a). Получаем 15 комбинаций итоговой разметки — есть про что писать!
Несколько вопросов со стороны человека не в теме.
Элемент — это элемент, которым пользуются в крайнем случае, тогда, кода для решения некоей задачи просто нет другого, более подходящего элемента. Использование вместо более подходящих элементов ведёт к плохой доступности проекта.
Это собственно почему и отчего? Подается просто как факт ничем не объясненный и не подкрепленный.
Событие click элемента вызывается только в том случае, если по нему щёлкают мышью. А, например, такое же событие элемента вызывается и по щелчку мыши, и по нажатию клавиш Enter и Пробел на клавиатуре.
Лично я предпочту клик мышью, увереность что при энтере в попапе сработает закрытие очень странная. Попап обычно совсем не для того открывался.
Значок ✕ не является чем-то таким, что можно напрямую соотнести с командой «Закрыть». Этот значок используется для записи математических выражений, в которых одно число умножается на другое (вроде 2✕2). Не стоит использовать его для оформления кнопки «Закрыть».
Кто такое решил? Я уверен, для большинства это именно символ закрытия. Так сложилось исторически и ничего уже с этим не поделать. В целом очень похоже на измышления Лебедева про дефис и тире.
Средства для чтения с экрана «озвучат»
Что это, для чего и почему об этом стоит думать?
Использование вместо более подходящих элементов ведёт к плохой доступности проекта.
Речь идет о том, что у тега
Есть люди (теоретически, практически никого не видел, но где-то такие есть), которые для навигации по сайту используют клавишу Tab.
Эта клавиша умеет переключаться по некоторым элементам. И если «Закрыть» будет кнопкой, то её можно будет щелкнуть, наведясь на неё с помощью Tab.
Средства для чтения с экрана «озвучат»
Это нужно для слепых, например (им специальные программы озвучивают, что происходит на экране).
Речь идет о том, что у тега
<button></button>Есть люди (теоретически, практически никого не видел, но где-то такие есть), которые для навигации по сайту используют клавишу Tab.
Эта клавиша умеет переключаться по некоторым элементам. И если «Закрыть» будет кнопкой, то её можно будет щелкнуть, наведясь на неё с помощью Tab.
Средства для чтения с экрана «озвучат»
Это нужно для слепых, например (им специальные программы озвучивают, что происходит на экране).
Это нужно для слепых, например (им специальные программы озвучивают, что происходит на экране).
Если они таким способом серфят общие ресурсы то я им искренне соболезную :(
Да, такая себе ситуация. Но это позволяет им хоть как-то взаимодействовать с Интернетом.
Что интересно, если разработчики реально заморочились с сайтом, это даже может быть удобно.
P.S. В инструментах разработчика относительно недавно даже появилась вкладка, которая помогает работать с доступностью. Там показывается дерево страницы (секции, заголовки, элементы навигации и т.д.). Интересная, хоть и довольно сложная для повседневной поддержки при разработке тема.
Что интересно, если разработчики реально заморочились с сайтом, это даже может быть удобно.
P.S. В инструментах разработчика относительно недавно даже появилась вкладка, которая помогает работать с доступностью. Там показывается дерево страницы (секции, заголовки, элементы навигации и т.д.). Интересная, хоть и довольно сложная для повседневной поддержки при разработке тема.
Такое ощущение что вы последние лет 5 не заходили на Хабр, а то и вовсе находились в коме. Да, мы тут перестали делить интернет на «для своих» и «для этих». Ну, во всяком случае стараемся.
Мой коментарий как триггер каких-то ваших внутренних проекций? Или всерьез считаете что общий веб (не адаптированный для) удобен для слепых, глухих человеков и носимых устройств?
Я всерьёз считаю что:
- Никакого «общего» и «специального» веба нет, он один для всех.
- Мы должны стараться создавать веб таким чтобы он был удобен для максимально широкой группы людей, тем более ничего сложного в этом нет, нужно лишь соблюдать довольно простые методики, которые помимо прочего сделают веб более комфортным и для «обычных» людей.
статье уже лет 5, но с тех пор мало что поменялось:
Как программируют слабовидящие программисты?
Как программируют слабовидящие программисты?
Нда. Мрак и ужас. Людям этим конечно мое почтение за упорство. Но не очень понятно зачем работодатель ввязывается в подобное? Ему с этого какая выгода?
И что в этом ужасного? То что это не укладывается в ваши рамки восприятия мира?
По-вашему всех людей непохожих на вас нужно куда нибудь деть, чтобы они не доставляли вам дискомфорт?
Ужасного, на мой взгляд, в этом то что люди живут вопреки, не решая задачу а в большей степени борясь с окружающим миром.
ЗЫ Не стоит приписывать мне свои измышления, это некрасиво.
ЗЫ Не стоит приписывать мне свои измышления, это некрасиво.
На самом деле таки люди бывают даже более продуктивны, так как в некоторых случаях могут воспринимать информацию быстрее на слух, чем могли бы на зрение. Плюс я думаю меньше вещей, на который они могут отвлекаться. Во всяком случае, они точно не хуже.
Так что работодатель ничего не теряет, да и ещё может попонтоваться, что смотрите, какие мы прогрессивно-толерантная компания.
Так что работодатель ничего не теряет, да и ещё может попонтоваться, что смотрите, какие мы прогрессивно-толерантная компания.
Понимаете что меня смущает в ваших словах — «бывают», «в некоторых случаях» а вывод следует что как работники «точно не хуже». Бывает, да, наверняка. А что про прочие случаи?
Я вот был свидетелем как фирма брала на работу ограниченно годных людей, и знаете, ни один не прижился. И не столько потому что неспособны были быть программистами, а скорее потому что весь процесс производства был заточен на обычных людей. И переделать его или не смогли, или не захотели. А есть еще вопрос организации труда, там тоже наверняка куча сложностей и особенностей, выливающихся в том числе и в немалые деньги.
Это не отменяет возможность существования гения ради которого пойдут на многое. Но речь то за средние числа.
Вариант про попонтоваться он очевиден, интересны другие варианты, хочется верить что они есть.
Я вот был свидетелем как фирма брала на работу ограниченно годных людей, и знаете, ни один не прижился. И не столько потому что неспособны были быть программистами, а скорее потому что весь процесс производства был заточен на обычных людей. И переделать его или не смогли, или не захотели. А есть еще вопрос организации труда, там тоже наверняка куча сложностей и особенностей, выливающихся в том числе и в немалые деньги.
Это не отменяет возможность существования гения ради которого пойдут на многое. Но речь то за средние числа.
Вариант про попонтоваться он очевиден, интересны другие варианты, хочется верить что они есть.
Я лично был свидетелем того, как с больничного вернулся человек, у которого в результате лечения от рака сильно просело зрение. Он вполне вписался на прежнее место и продолжил работать. Но да, там ему были рады, инструментарий, организующий рабочий процесс, в значительной степени был свой и под него подстраивались все, включая руководство. Контора была небольшой. С другой стороны, я не помню, чтобы там что-то сильно поменялось, так что всё зависит от грамотности изначального построения процесса.
Некоторые страны дают небольшие налоговые льготы компаниям за то, что у них в штате есть работники с особыми потребностями
Не только это. Есть ещё вопрос качества разработки: только получив сильную просадку зрения, понимаешь, как выглядит мир «с той стороны». И несколько разработчиков и тестеров со слабым зрением сильно повысят качество продукта, если работодатель по какой-то причине заинтересован в этой категории пользователей.
Если работодатель хочет, чтобы его продукт был доступен пользователям со слабым зрением, он правильно делает, нанимая людей со слабым зрением: даже один-два таких разработчика или тестера сильно повысят качество продукта. Если разработчик не может примерить продукт на себя, он никогда не сделает его качественным. В качестве примера могу предложить мобильные приложения Google: места занимают столько, что только флагманы их нормально и тянут, на карту памяти не переносятся и так далее. А посади их на месяц другой на смартфоны за $40 — сразу «запоют» по-другому. Кажется, в Facebook пытались вводить «день 2G», чтобы разработчики почувствовали на себе, каково это — работать с их приложениями в местах, где связь еле живая.
а не надо нам соболезновать. когда соблюдаются стандарты семантического веба — серфить как вы сказали "общие ресурсы" очень даже приятно.
О том и речь. Часто соблюдается-то на общих ресурсах не заточенных специально?
на иностранных часто. у хабра тоже не все так плохо. хотя и есть некоторые недоработки. я лишь хочу сказать что работать в вебе незрячим не так сложно, как вы себе возможно представляете. и уж точно для этого не нужны специальные сайты.
А я просто хочу сказать что на общих ресурсах без adblock, зачастую, у зрячих то глазки выпадают. А уж что творится при озвучивании страшно даже представить. Оттого и соболезнования.
Потыкал firefox в настройках, с целью поглядеть практически на что похоже это озвучивание. Не нашел ничего и близко похожего. Это через где включается?
Потыкал firefox в настройках, с целью поглядеть практически на что похоже это озвучивание. Не нашел ничего и близко похожего. Это через где включается?
Не для слепых, а для слабовидящих, если быть точным. То есть для тех, кто кнопки и ссылки «приблизительно» видит, зоны экрана различает, по кнопкам и ссылкам попасть может, но вот при чтении текста испытывает затруднения. Примерно для той же категории используется шрифт Брайля, только те, кому нужен шрифт Брайля, видят, обычно, ещё хуже. Это как я себе представляю.
«Значок ✕ не является чем-то таким, что можно напрямую соотнести с командой «Закрыть»» и… и вынес в заголовок картинку со значком "✕". Логично же!!!
Я потормошил свой склероз, но к сожалению про крестик в Win 3.10 (1990 год) он мне не смог ничего сказать, вроде бы там были стрелочки. Но в Windows 95 (1995-й год) крестики на окнах уже точно были. Посмотрел в уголок браузера, там тоже стоит крестик (2020-й год). То есть уже 25 лет как минимум. Из какого года или из какой системы пишет автор, что крестик для него не ассоциируется с закрытием окна?
Я потормошил свой склероз, но к сожалению про крестик в Win 3.10 (1990 год) он мне не смог ничего сказать, вроде бы там были стрелочки. Но в Windows 95 (1995-й год) крестики на окнах уже точно были. Посмотрел в уголок браузера, там тоже стоит крестик (2020-й год). То есть уже 25 лет как минимум. Из какого года или из какой системы пишет автор, что крестик для него не ассоциируется с закрытием окна?
почему Вы не используете аттрибуты alt и title? как раз их у будут озвучивать «Средства для чтения с экрана» которые почти везде указаны как критерий
<img alt="close">
<button title="close">
<input alt="close">
Любопытно. Старые статьи (и вопрос на SO) говорят про нестабильность работы title в разных комбинациях ридер/браузер.
Но вот тут есть свежие тесты — и на 2020 год все выглядит очень неплохо c title на кнопках
НЛО прилетело и опубликовало эту надпись здесь
Паттерн №6: aria-expanded
атрибут aria-expanded показывает развёрнут или свёрнут текущий элемент
Соответственно, если меню открыто, то нужно заменить значение атрибута aria-expanded на true.
атрибут aria-expanded показывает развёрнут или свёрнут текущий элемент
<button aria-expanded="false">
<svg aria-hidden="true"></svg>
</button>Соответственно, если меню открыто, то нужно заменить значение атрибута aria-expanded на true.
Самый "прекрасный" закрыть, который я видел возникал при нажатии на крестик одного оконного приложения. Касался он не вёрстки, а UX:
Появлялось окошко с двумя кнопками (и крестиком, ага!):
[ЗАКРЫТЬ] [ДАЛЬШЕ]При нажатии на "Закрыть" закрывалось окно подтверждения закрытия приложения. Но не само приложение.
А вот при нажатии на "Дальше" приложение закрывалось.
P.S. Столкнувшись со столь изумительной логикой, я написал автору. И получил еще более изумительный ответ: "Если у более чем полутора тысяч купивших мое приложение не возникло проблем с тем, как его закрыть — значит идиот — ты".
Немного офтопик, но всё же: интересно, как часто люди в жизни используют слово "местозаполнитель"?
Кнопка должна быть кнопкой, КНОПКОЙ!, а не всякими дивами, спанами и другими элементами, которые прикручивают всякие дизайнеры.
Крестик это закрыть, а знак умножить, это звездочка.
Крестик это закрыть, а знак умножить, это звездочка.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кнопки «Закрыть»: паттерны и антипаттерны