aria-label attribute vs. the
aria-label attribute allows for naming an element without a visual representation of that name.
aria-label should be used when there is not visible text that would be an appropriate name for the element. On the other hand, the
aria-labelledby attribute is used to reference visible text to be used as the accessible name. Essentially,
aria-label should be used when there is not already a visible label and you do not want to create one, while
aria-labelledby should be used when there is already a visible label.
aria-labelledby should reference the ID of the element that holds the name you’d like to label the element of interest with. For example:
<span id=”night-mode-label”>Night mode</span> <span role=”switch” aria-checked=”false” tabindex=”0” aria-labelledby=”night-mode-label”></span>
Example and information source: https://w3c.github.io/aria-practices/#naming_with_aria-labelledby