Для вас, модальный windows
1 может быть благословением дополнительного экрана недвижимости, обеспечивая способ доставки контекстной информации, уведомления и другие действия, относящиеся к текущему экрану.С другой стороны, модальности могли бы чувствовать себя, как взломать, что вы были вынуждены совершить для того, чтобы втиснуть дополнительное содержание на экране.Это крайние концы спектра, и пользователи поймали в середине.В зависимости от того, как пользователь просматривает Интернет, модальные окна могут быть совершенно confusing .
Модальности быстро перейти визуальный фокус из одной части веб-сайта или приложения в другую область (надеюсь связанных с ними) содержания.Действие, как правило, не дребезжащий, если по инициативе пользователя, но это может раздражать и дезориентировать, если это происходит автоматически, как это происходит со злыми двоюродных братьев модальное окно годов, “пилить экран” и
Тем не менее, модальности являются лишь умеренного раздражения в конце концов, не так ли?Пользователь просто должен нажать кнопку “Закрыть”, быстро снимать часть контента или заполнить форму, чтобы убрать его .
Ну, представьте себе, что вы должны были перемещаться в Интернете с помощью клавиатуры.Предположим, что появилась модальное окно на экране, и вы имели очень мало контекст, чтобы знать, что это такое и почему это заслоняя содержание вы пытаетесь просмотреть.Теперь, если вам интересно, “Как я общаюсь с этим?” Или “Как я могу избавиться от него?”, Потому что фокус на клавиатуре не автоматически перемещаются в модальном окне .
Этот сценарий является более распространенным, чем она должна быть.И это довольно легко решить, как долго, как мы делаем наш контент доступным для всех на основе рациональной практики юзабилити .
Для примера, я создал демо недоступном модальный window 2 , что появляется при загрузке страницы, и это не совсем семантический.Во-первых, взаимодействовать с ним с помощью мыши, чтобы увидеть, что она действительно работает.Затем попробуйте взаимодействуя с ним, используя только клавиатуру .
Лучшие Семантика привести к улучшению юзабилити и Accessibility
Юзабилити и доступность не хватает во многих модальных окон.Если они используются для обеспечения дополнительных действий или входы для взаимодействия со страницей, чтобы включить более подробную информацию о том или ином участке содержания, или представление уведомлений, которые могут быть легко сбросить со счетов, модальности должны быть легко для всех использовать .
Для достижения этой цели, сначала мы должны сосредоточиться на семантике разметки модальный-х годов.Это может показаться не слишком задумываясь, но шаг не всегда следуют .
Предположим, что популярный игровой сайт имеет всю страницу модальный наложения и внедрила кнопку “Закрыть” на код ниже:
<div id="modal_overlay">
<div id="modal_close" onClick="modalClose()">
X
</div>
…
</div>
Это div элемент не имеет семантическогосмысл за ней.Зрением, посетители будут знать, что это кнопка “Закрыть”, потому что это выглядит как один.Она имеет состояние парения, так что есть визуальная индикация, что он может быть взаимодействовал с .
Но этот элемент не имеет наследует смысловую нагрузку для людей, которые используют клавиатуры или экрана читателя .
Там нет никакого способа, по умолчанию, чтобы позволить пользователям вкладке в div без добавления tabindex к нему атрибут.Тем не менее, мы также должны добавить :focus состояние визуально указать, что это активный элемент.Это по-прежнему не дает чтения с экрана достаточно информации для пользователей, чтобы различить смысл элемента.”X” является только ярлык здесь.В то время как мы можем предположить, что люди, которые используют чтения с экрана будет знать, что буква “X” означает “близко”, если бы это было знак умножения (используя HTML сущности ×) или крестик (❌), то некоторыедля чтения с экрана не читал бы его вообще.Мы должны лучше запасной вариант .
Мы можем обойти все эти вопросы просто написав правильный, семантическую разметку для кнопки и добавления метки Ария для чтения с экрана:
<div id="modal_overlay">
<button type="button" class="btn-close" id="modal_close" aria-label="close">
X
</button>
</div>
Изменяя div к кнопке, мы значительно улучшили семантику нашей кнопку “Закрыть”.Мы обратились к общей надежду, что кнопка может быть с вкладками, чтобы с клавиатурой и выглядят целенаправленными, и мы предоставили контекст, добавив метку Ария для чтения с экрана .
Это только один пример того, как сделать разметку из наших глагола более сложная, но мы можем сделать гораздо больше, чтобы создать полезный и доступный опыт .
Создание модальности более удобным и Accessible
Семантической разметки проходит долгий путь к созданию полностью рабочую и доступной модальное окно, но еще более CSS и JavaScript можно взять опыт на следующий уровень .
В том числе Фокус States
Обеспечение состояние фокусировки!Это, очевидно, не только для модальных окон;многие элементы не имеют должной государственной фокусировки в той или иной форме, кроме базовой одного умолчанию браузера (который может или, возможно, не была очищена вашим сброса CSS).По крайней мере, пара состояние фокусировки с государством наведении вы уже, направленные на:
.btn:hover, .btn:focus {
background: #f00;
}
Тем не менее, из-за фокусировки и колеблется в различные виды взаимодействия, давая состояние фокусировки свой собственный стиль имеет смысл .
.btn:hover {
background: #f00;
}
:focus {
box-shadow: 0 0 3px rgba(0,0,0,.75);
}
Действительно, любой элемент, который может быть сфокусирован должны иметь состояние фокусировки.Имейте это в виду, если вы расширяете умолчанию пунктирной линией браузера .
Сохранение Последнее посещение Element
Если модальный грузы окна, элемент, который пользователь последний раз общались с должны быть сохранены.Таким образом, когда модальное окно закрывается и пользователь возвращается туда, где они были, будет были сохранены акцент на этом элементе.Думайте об этом как закладки.Без него, когда пользователь закрывает модальный, они будут отправлены обратно в начале документа, осталось найти свое место.Добавить следующее открытие и закрытие функций вашего модальные, чтобы сохранить и повторно включить фокус пользователя .
var lastFocus;
function modalShow () {
lastFocus = document.activeElement;
}
function modalClose () {
lastFocus.focus(); // place focus on the saved element
}
СмещениеFocus
При модальные нагрузки, усилия должны быть сосредоточены от последнего активного элемента либо самого модального окна или первой интерактивной элемента в модальном, например в качестве входного элемента.Это сделает модальный более удобным, потому что зрячие посетители не должны будут достичь своей мыши нажать на первом элементе, и пользователи клавиатуры не придется вкладке через кучу элементов DOM, чтобы попасть .
var modal = document.getElementById('your-modal-id-here');
function modalShow () {
modal.setAttribute('tabindex', '0');
modal.focus();
}
Идет полным Screen
Если модальный берет на себя весь экран, а затем скрыть содержимое основного документа для обоих зрячих пользователей и пользователей чтения с экрана.Без этого не случилось, пользователь клавиатуры может легко закладка их путь вне модального того не осознавая, что может привести к их взаимодействии с основным документом до завершения то, что модальное окно просит их сделать .
Используйте следующую наличие ограничиться внимание пользователя на модальном окне, пока не будет уволен:
function focusRestrict ( event ) {
document.addEventListener('focus', function( event ) {
if ( modalOpen && !modal.contains( event.target ) ) {
event.stopPropagation();
modal.focus();
}
}, true);
}
В то время как мы хотим, чтобы пользователи табуляции через остальной части документа, а модальный открыт, мы не хотим, чтобы предотвратить их от доступа хром браузера (в конце концов, дальновидные пользователи будут не ожидал быть застрял ввкладке браузера, в то время модальное окно открыто).JavaScript выше пр …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров