Did you know that the <button> element's content, and the content of its decendants may be concatenated to create an accessible name.
Lets start by looking at the different methods that can be used to generate an accessible name for the <button>.
Option 1
If an aria-labelledby is present, the contents of one or more another elements could be used to generate an accessible name:
Hello world
<button aria-labelledby="aaa"></button>
<p id="aaa">Hello world</p>Option 2
If there is no aria-labelledby present, the content of the aria-label attribute could be used:
<button aria-label="Hello world"></button>Option 3
If there is no aria-labelledby or aria-label present, the <button> element's content could be used. This is the preferred method as it provides a matching visible text label and accessible name.
<button>Hello world</button>Option 4
And finally, if there is no aria-labelledby, aria-label or content present, the content of the title attribute could be used.
<button title="Hello world"></button>More on button content
Let's look more closely at "Option 3", where the <button> element's content is used for the accessible name.
This accessible name is concatenated from:
- Any content (text strings) directly within the element
- The accessible names of all child or descendant elements, if relevant
The result of these two possible sources generates the final accessible name, expressed as text strings.
The <button> element below has 6 child elements. For each of these, any possible accessible name must be calculated before being applied to the overall accessible name.
In this case, the final accessible name is: "Hello how are you doing today?"
today
<button>
Hello
<span>how</span>
<span>are</span>
<span>you</span>
<span role="img" aria-label="doing"></span>
<span role="img" aria-labelledby="bbb"></span>
<span title="?"></span>
</button>
<p id="bbb">today</p>