Understanding Accessible Name Computation
We'll use Chrome Dev Tools to understand where the accessible name comes and how the accessible name priority is computed depending on what attributes you use.
[0:00] Instructor: Here, we have an HTML button with the text ButtonText. If we inspect that element and then go to the accessibility dev tools, when we scroll down to the computed properties, we'll look at the name. The name is ButtonText, which is derived from the contents. However, there are multiple ways to name a button.
[0:16] If we go to the code and add an aria label equals updated button text and save that and go back to the browser and refresh, you'll notice in the computed properties it changed to that updated button text. The aria label overrode the contents. This override is due to the accessible name computation.
[0:36] Now if we go back to the code and create a span with an id of label-1, and inside that span we put the text of "very cool label," and then associate that button with an aria labeled by equals label-1, and we go back to the browser, you'll notice that the name changes to very cool label.
[1:01] In general, we should stick to one strategy with labeling our buttons, but this shows how that computation works. What this means is that when we're using assistive technology, this is the name that gets read for this element.
[1:13] We can also use this for form inputs. If we create an input with an ID of name-1, and then create a label, and in the for-attribute we'll associate that input, so we'll type name-1, and then inside the label, we'll type name.
[1:30] If we refresh this browser, we'll see we have an input. If we inspect that input, we'll see that the accessible name is name. We can go back to the code and add an aria label, and we can type in updated name, refresh that and inspect it, we'll see that that name is changed to updated name.
[1:46] Then we can go back to the code and type in aria labeled by, and we can associate it with that same span, so label-1. Now if we refresh, the accessible name is very cool label. As you can see, if there are multiple strategies of creating a name, aria labeled by gets the top priority. In these dev tools, it will go from top to bottom of the priority.
[2:07] A few caveats is we shouldn't use placeholder or title because they're not the most reliable with assistive technology. Again, you should try to only use one strategy to label your elements.