The primary consumers of these properties are user agents such as screen readers for blind people. So in the case with a Bootstrap modal, the modal's div
has role="dialog"
. When the screen reader notices that a div
becomes visible which has this role, it'll speak the label for that div
.
There are lots of ways to label things (and a few new ones with ARIA), but in some cases it is appropriate to use an existing element as a label (semantic) without using the <label>
HTML tag. With HTML modals the label is usually a <h>
header. So in the Bootstrap modal case, you add aria-labelledby=[IDofModalHeader]
, and the screen reader will speak that header when the modal appears.
Generally speaking a screen reader is going to notice whenever DOM elements become visible or invisible, so the aria-hidden
property is frequently redundant and can probably be skipped in most cases.