2016-12-13 7 views
0

WAI reference, MDN reference.Роль «диалога» - правильный выбор для всплывающего окна?

WAI говорит:

Диалог представляет собой окно приложения, который предназначен для прерывания текущей обработки заявки в целях оперативного пользователя, чтобы ввести информацию или требует ответа.

Как я понял, отображается диалоговое окно с запросом некоторой информации. Его цель - не показывать отдельный раздел. Поэтому он применим в случае, если в диалоговом окне содержатся кнопки «да/нет», «продолжить». Или когда формы существуют.

MDN говорит:

диалог роль используется для размечать диалоговое приложение DHTML на основе или окна, которое отделяет содержание или интерфейс от отдыха веб-приложения или страницы. Визуально диалоги обычно размещаются поверх остальной части содержимого страницы с помощью наложения.

Что я получил от этой цитаты, вы можете использовать диалог для обычных всплывающих окон.

Кроме того, Bootstrap4 также считается MDN.

Кто такой? Какова действительная роль dialog и какую роль следует использовать для простых всплывающих окон (разделенные разделы) (может быть, «документ»)?

+0

«требуется ответ» может означать любую форму взаимодействия, включая принуждение пользователя закрыть его, нажав кнопку «отменить» или значок «Х», чтобы получить доступ к странице. Это не только кнопки или формы. Нажатие кнопки «закрыть» все еще является ответом. Даже если вы не пытаетесь побудить пользователя вводить информацию, вам все равно требуется ответ, препятствуя содержанию подстилающего содержимого, прежде чем принудительно закрыть диалоговое окно. – Skerrvy

+1

Проверьте шаблон с W3C. В спешке, не может предложить больше сейчас. https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog – aardrian

+0

@Skerrvy Я думаю, что это не подходящий пример. Это то же самое, что показать окно браузера, чтобы закрыть его (так как кнопка «закрыть»).Основной вывод в всплывающем окне - это контент, который отделен от основного документа – FreeLightman

ответ

0

Да, я думаю, что диалог, поскольку роль - лучший выбор для всплывающего окна. но также будьте осторожны с семантикой содержимого внутри диалогового окна, например, вы не можете использовать клавиши навигации для чтения содержимого внутри диалогового окна, вместо этого вам нужно нажать клавишу «Вставить + Пробел» («Пользователь на рабочем столе»). Это для других NVDA читатели на экране, такие как JAWS и Voice Over, будут читать отлично, я думаю, не нажимая никаких специальных клавиш.

+0

Не понимаю. Если я реализую элемент 'dialog', как говорит WAI, мне нужно управлять фокусом через js и держать его в диалоговом окне. – FreeLightman

+0

Да, но попробуйте поместить таблицу внутри этого диалога, nvda не читает это, если только указанный мной ключ не нажат, поскольку элементы управления навигации не работают внутри диалогового окна. –

0

Имейте в виду, что <dialog> element может быть лучшим выбором, а не <div role="dialog">.

Элемент HTML <dialog> представляет собой диалоговое окно или другой интерактивный компонент, например, инспектор или окно.

Обращаем ваше внимание на текущий poor browser support.