What is "role-dialog" and "labelledby"?

Question

Bootstrap

Straight from the docs,
Don't send to google, I know what google translate is, so :
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

Actually, role is an attribute that adds semantics to an element. What is it - you can read here .
Browsers that already recognize this semantics will perceive your layout better, evaluating which block is responsible for what (dialog, button, header, footer), and therefore it is better to parse it.
It turns out that in your case the browser will understand that this piece of html that is not displayed on the page is a dialog, but, for example, not a hidden piece for promotion in a search engine (this used to be).
The second attribute can be found here .