- PVSM.RU - https://www.pvsm.ru -
На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».
Взглянем на HTML-код, используемый для создания кнопки «Закрыть»:
<div class="close"></div>
Вот стили:
.close::after {
background: url("close.png");
content: "";
}
Ниже приведён список проблем, которые характерны для данного варианта реализации кнопки «Закрыть». Зная об этих проблемах, можно наметить пути их решения.
<div>
— это элемент, которым пользуются в крайнем случае, тогда, кода для решения некоей задачи просто нет другого, более подходящего элемента. Использование <div>
вместо более подходящих элементов ведёт к плохой доступности проекта.click
элемента <div>
вызывается только в том случае, если по нему щёлкают мышью. А, например, такое же событие элемента <button>
вызывается и по щелчку мыши, и по нажатию клавиш Enter
и Пробел
на клавиатуре.<div>
не поддерживает получение фокуса с клавиатуры.Вот разметка:
<div class="close">
✕
</div>
<div>
при оформлении кнопок «Закрыть» читайте в разделе «Паттерн №1».Вот HTML-разметка:
<div class="close">
<i class="fas fa-times"></i>
</div>
Вот CSS-код:
.fa-times::before {
content: 'f00d';
}
aria-hidden=«true»
элемента <i>
.::before
. Ассистивные технологии могут озвучить Unicode-эквивалент соответствующей иконки, что в данном примере приведёт к сообщению о том, что тут имеется символ умножения («times»). Дело в том, что fa-times [3] — это не символ-крестик, а знак умножения. Обратите внимание на то, что Talkback и VoiceOver при обработке подобного кода вообще ничего не «говорят».<i>
представляет собой фрагмент текста, который, при использовании средств для чтения с экрана, должен озвучиваться другим голосом или с другой интонацией. То есть это — фрагмент, который система должна «прочитать» не так, как обычный текст. Если всё, что нужно — это текст, набранный курсивом, рекомендуется использовать CSS-стиль font-style: italic;
.<div>
читайте в разделе «Паттерн №1».Вот HTML-код:
<a href="#" class="close">
</a>
Вот стили:
a::after {
font-size: 28px;
display: block;
content: "×";
}
<a>
есть атрибут href
, он представляет собой ссылку на некий ресурс — вроде другой веб-страницы или PDF-документа.<button>
, атрибут type
которого установлен в значение button
. Дело в том, что такой элемент, по умолчанию, не выполняет никаких действий. Он создан специально для того, чтобы вызывать выполнение каких-то действий в ответ на события пользовательского ввода.<a>
или <button>
, посмотрите это [4] видео.Вот HTML-код этого паттерна:
<a href="#" class="close">
Close
</a>
Вот CSS-код:
.close::before {
content: "e028";
}
<a>
и содержимого, генерируемого средствами CSS.Вот разметка:
<a class="close" onclick="close()">×</a>
href
, и это, опять же, ссылка, а не кнопка.<a>
нет атрибута href
, это значит, что элемент представляет собой местозаполнитель элемента, куда могла бы быть вставлена реальная ссылка.href
, или элемент <button>
. Это зависит от того, что именно происходит при щелчке по подобному элементу.<a>
или <button>
, обратитесь к этому [4] видео.Вот HTML-код этого паттерна:
<a onclick="close();">
<img src="close.png">
</a>
Вот HTML-код:
<label class="close" for="close">
<svg> … </svg>
</label>
<input id="close" type="radio">
Вот применяемый здесь стиль:
[type="radio"] {
display: none;
}
<button>
, а не радиокнопки.Как обычно, сначала рассмотрим разметку:
<button class="close" type="button">
×
</button>
HTML-код:
<button class="close">
<svg> … </svg>
</button>
Вот HTML-код, реализующий этот паттерн:
<div role="button" tabindex="0">X</div>
<button>
, в явной настройке семантики кнопки с использованием атрибута role
необходимости нет.<button>
, не нужно применять атрибут tabindex
. HTML-кнопки, по умолчанию, рассчитаны на возможность получения ими фокуса ввода.<div>
читайте в разделе «Паттерн №1».Вот что по этому поводу сказал [7] Макс Бок: «Использовать символ x для кнопок закрытия — это как сыпать соль в кофе только из-за того, что она выглядит так же, как сахар».
Вот [8] CodePen-проект, в котором собраны неудачные паттерны создания кнопок «Закрыть»
Вот разметка, применяема в этом решении:
<button type="button">
Close
</button>
HTML-код:
<button type="button">
Close
<span aria-hidden="true">×</span>
</button>
<span>
с атрибутом aria-hidden=«true»
.Вот HTML-код этого решения:
<button type="button">
<span class="sr-only">Close</span>
<span aria-hidden="true">×</span>
</button>
Вот стиль:
.sr-only {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
.sr-only
.Вот HTML-разметка:
<button type="button" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
aria-label
.Вот, ради полноты изложения, удачный пример кнопки «Закрыть», при создании которой используется Font Awesome:
<button type="button" class="close" aria-label="Close">
<span class="fa fa-times" aria-hidden="true"></span>
</button>
Иногда имеет смысл использовать метки с более подробными описаниями действий, вроде «Закрыть окно», или «Закрыть галерею», или «Закрыть рекламу».
Если вы применяете решения сторонних разработчиков для оформления модальных окон, диалоговых окон и прочего подобного, пожалуйста, перед включением их в состав своего сайта, поинтересуйтесь тем, как именно реализованы эти решения. Не стоит слепо доверять другим в вопросах качества кода и обеспечения доступности контента.
Здесь [9] можно найти примеры реализации удачных паттернов кнопок «Закрыть».
Как сделаны кнопки «Закрыть», которые используются в ваших проектах?
Автор: ru_vds
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/razrabotka/353862
Ссылки в тексте:
[1] Image: https://habr.com/ru/company/ruvds/blog/505758/
[2] документации: https://fontawesome.com/v4.7.0/accessibility/
[3] fa-times: https://fontawesome.com/icons/times
[4] это: https://www.youtube.com/watch?v=8XjwDq9zG4I
[5] кнопки: https://www.youtube.com/watch?v=CZGqnp06DnI
[6] Вот: https://www.deque.com/blog/creating-accessible-svgs/
[7] сказал: https://twitter.com/mxbck/status/1187446513284325376
[8] Вот: https://codepen.io/matuzo/pen/qBOvagg?editors=1100
[9] Здесь: https://codepen.io/matuzo/pen/zYvbmvm?editors=1100
[10] Источник: https://habr.com/ru/post/505758/?utm_source=habrahabr&utm_medium=rss&utm_campaign=505758
Нажмите здесь для печати.