javascriptcross-browserwai-aria

How can I get an element's Accessible Name in javascript in the browser?


The accessible name computation seems complex with an algorithm and 17 subcases for HTML. How can I get an element's Accessible Name in javascript in the browser?


Solution

  • Perhaps a couple years too early for your question. The Accessibility Object Model (AOM), similar to the Document Object Model (DOM), is currently being worked on. When finished, it'll allow you to query the accessible name from javascript.

    Note that your "17 subcases" are all just restatements of the accessible name computation rules. I'm not sure why the W3C has that page. For example, the first bullet point for <input type="text"> says:

    1. If the control has an aria-label or an aria-labelledby attribute the accessible name is to be calculated using the algorithm defined in Accessible Name and Description: Computation and API Mappings.
    2. Otherwise use the associated label element or elements accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces.
    3. If the accessible name is still empty, then: use the control's title attribute.

    Point #1 is the same as step 2B and 2C in https://www.w3.org/TR/accname-1.1/#step2

    Point #2 is the same as step 2D

    Point #3 is the same as step 2I

    Perhaps the 17 subcases is easier to read/understand than the actual accessible name computation? Not sure. But they say the same thing.

    Each browser calculates the accessible name so you really need an API into the browser to get the accessible name.