Что такое «role-dialog» и «labelledby»?

Question

[Александр Веселов]

Прямиком из документации,
В гугл не посылать, я знаю что такое google translate, итак :
Make modals accessible
Be sure to add role="dialog" and aria-labelledby="...", referencing the modal title, to .modal, and role="document" to the .modal-dialog itself.

Additionally, you may give a description of your modal dialog with aria-describedby on .modal.

Answer 1

[Александр Кетов]

Собственно, role - это атрибут, который добавляет семантики элементу. Что это - можно почитать тут.
Браузеры, которые эту семантику уже распознают, будут лучше воспринимать вашу верстку, оценивая какой блок за что отвечает (dialog,button,header,footer), а следовательно лучше ее парсить.
Получается, что в вашем случае браузер поймет, что этот кусок html, которые не отображается на странице, это диалог, а, например, не скрытый кусок для продвижения в поисковике (такое раньше было).
Со вторым атрибутом можно ознакомиться здесь.