What should happen if label element contains child elements

[dd8]

This code has a label whose only content is a span containing nested label text. The HTML content model for the label element allows phrasing content (other than descendant label elements).

<fieldset>
 <label for="search-field"><span>Search</span></label>
 <input data-dataurl="https://www.breckland.gov.uk/article/2852/Search" id="search-field" class="" placeholder="I'm searching the Breckland website for..." name="q" value="" type="text" maxlength="100" autocomplete="off">
 <input type="image" src="./images/search-icon.png" alt="Search">
</fieldset>

https://www.breckland.gov.uk/

All of the mainstream browsers ignore the span contents nested inside the label.

• Chrome accessibility inspector shows the accessible name of search-field as label=""
• Apple Accessibility Inspector on Safari shows <empty string> for the accessible name
• Firefox uses the placeholder attribute as the accessible name

This looks like a bug, but it's not clear what the correct behaviour is after reading accname and html-aam.

The spec says:

5.1.1 input type="text", input type="password", input type="search", input type="tel", input type="email", input type="url" and textarea Element Accessible Name Computation Otherwise use the associated label element(s) accessible name(s) - if more than one label is associated; concatenate by DOM order, delimited by spaces. https://www.w3.org/TR/html-aam-1.0/#input-type-text-input-type-password-input-type-search-input-type-tel-input-type-email-input-type-url-and-textarea-element-accessible-name-computation

and

5.7.1 Other Form Elements Accessible Name Computation Otherwise use label element. https://www.w3.org/TR/html-aam-1.0/#other-form-elements-accessible-name-computation

There seems to be an an unintended difference between 5.1.1 and 5.7.1. I also can't see anywhere that explicitly specifies how to calculate the accessible name for label. Step D in accname just refers back to host language

Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that defines a text alternative, return that alternative in the form of a flat string as defined by the host language

[JAWS-test]

The problem on the page has nothing to do with the span. The text content of a label is always correctly recognized as a label, no matter how it is nested. The error is that the label was marked with display:none

[dd8]

If I remove the `display:none' the label is calculated correctly in Chrome and Firefox, but not Safari - it still shows as an empty string.

[stevefaulkner]

If I remove the `display:none' the label is calculated correctly in Chrome and Firefox, but not Safari - it still shows as an empty string.

check the accessibility API title property, that is where the acc name shows up for labels on Mac as i recall

[JAWS-test]

I have only tested it in Firefox and Chrome, as I unfortunately do not have Safari.

For the output of hidden labels see: https://github.com/w3c/accname/issues/57

[dd8]

The label with display:none is definitely causing interop issues. It's treated inconsistently between browsers and Chrome isn't even internally consistent.

<fieldset>
 <label for="search-field" style="display:none"><span>Search</span></label>
 <input id="search-field" class="" title="This is a title" 
 placeholder="This is a placeholder" name="q" value="" type="text" maxlength="100" autocomplete="off">
 <input type="image" src="./images/search-icon.png" alt="Search">
</fieldset>

	Safari	Firefox	Chrome
acc name	empty	This is a placeholder	empty string and 'This is a title'
acc desc	empty	This is a title	none

Chrome: the Accessibility tab in DevTools shows the calculated name as the empty string and shows the placeholder and title attributes as ignored using a strikethrough. The accessibility info popup that appears over the rendered element shows input#search-field with name='This is a title'

[JAWS-test]

However, this has changed the content of the issue. Can you please change the title because the question in the title has been answered, right?

[stevefaulkner]

If I remove the `display:none' the label is calculated correctly in Chrome and Firefox, but not Safari - it still shows as an empty string.

check the accessibility API title property, that is where the acc name shows up for labels on Mac as i recall

it is in fact the "Title UIElement" property that exposes the label element text in Safari