Comparison
aria-labelvsaria-labelledby
aria-label
you gave the icon-only button a name in an attribute because there was no visible text to use.
An attribute supplying an accessible name directly as a string. It is right for controls with no visible text, and it overrides the element's own content, which means it can silently replace a perfectly good label. It is invisible to sighted users and untranslated by page translation in some paths, so visible text remains the better answer whenever there is room for it.
Full entry →aria-labelledby
you pointed the dialog at the id of its own heading instead of repeating the text in an attribute.
An attribute naming an element by referencing the id of other elements whose text becomes the name. It beats `aria-label` in the precedence order and keeps the accessible name in sync with what is on screen, which is why it is preferred wherever visible text exists. It takes a list of ids and concatenates them, and a reference to a missing id fails silently.
Full entry →