Aria-label makes nested content not visible for screen reader
That's correct, specifying aria-label or aria-labelledby generates the accessible name for the element rather than having to nest through all the child elements and concatenating text from each child. All child elements will be ignored. You can see more details regarding child elements at https://www.w3.org/TR/wai-aria-practices-1.2/#naming_with_aria-label. In particular:
When applied to an element with one of the roles that supports naming from child content, aria-label hides descendant content from assistive technology users and replaces it with the value of aria-label.
aria-describedby specifies the accessible description of the element, which is different from the accessible name.
When a screen reader announces an element's name, it will announce the accessible name first, possibly any state information (such as a checked checkbox or an expanded accordion), and then the accessible description.
The accessible name and description calculation has a precedence list which can be seen at https://www.w3.org/TR/accname-1.1/#step2. Essentially it looks in this order. Whichever one is found first is used:
- aria-labelledby
- aria-label
<label>- internal text (such as the text between
<button>and</button>or between<a>and</a>)
Note that there are some limitations to aria-label and aria-labelledby. See https://www.w3.org/TR/using-aria/#label-support