Comparison
aria-labelvsLabel association
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 →Label association
you clicked the label text and the checkbox toggled, which is how you know it is wired up.
Connecting a `label` to its control by `for` and `id`, or by wrapping the control, which gives the field its accessible name and makes the label a click target. Placeholder text is not a label: it disappears on input, often fails contrast, and is not reliably announced. This is the most common accessibility defect in real forms and one of the easiest to fix.
Full entry →