Open dd8 opened 4 years ago
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
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.
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
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
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'
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?
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
This code has a
label
whose only content is aspan
containing nested label text. The HTML content model for the label element allows phrasing content (other than descendant label elements).https://www.breckland.gov.uk/
All of the mainstream browsers ignore the
span
contents nested inside thelabel
.search-field
aslabel=""
<empty string>
for the accessible nameplaceholder
attribute as the accessible nameThis looks like a bug, but it's not clear what the correct behaviour is after reading accname and html-aam.
The spec says:
and
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