Does adding a "title" attribute to the "label" element instead of the "input" harm accessibility?

Question

I'm creating an HTML interface that has an input text field with a label attached. The label has a short name for the input and I want a more detailed description to appear as a popup for visual users, but also to be accessible for screen readers.

This can be done with the title attribute, but if I attach the title to the input element, it will only show when hovering over the input. If I attach it to the label element, then both the label and the input can be hovered to see the tooltip.

I am wondering if this will impact screen readers somehow, and read the title out in a way that could confuse non-visual users.

Here's an example of the code:

<label title="Some extra details">
    Your Input:
    <input type="text" />
</label>

I haven't found any such usage in the W3 docs, but I there was one suggestion from StackOverflow. I'm just concerned it might impact accessibility.

Answer 1

Screen readers read the label for a given input, making it a good accessible option

Only use label with certain kinds of inputs (manually make a label if still needed for those)

Don't rely on title for accessibility

Consider alternative tooltips

The last question is: if title isn't sufficient and label or tooltip is, what if I still want to provide a title for environments that happen to use it correctly? Would I risk harming the screen reader experience?

The worst that can happen is repetition. It won't misdirect. If the user uses the title being read out loud to focus, the label thus focused will select the input for the user (at least, it's supposed to, with the elements listed as compatible in the Mozilla link).

N.B. This is based on reading, not a test with a screen reader.

Answer 2

Do not use the title attribute. As stated on webaim.org, the title attribute should...

• NOT provide vital information or information necessary for accessibility.
• NOT present the obvious. If the advisory title does not provide additional, useful information, it can be removed.
• NOT be used as a replacement for alternative text, form labels, table headers, etc.

_{Taken from https://webaim.org/articles/gonewild/#title}

The tooltip is hidden for screen reader, keyboard and touch screen users. You will be having a hard time making that accessible. Keep it simple by showing the description near the label. The aria-describedby attribute will make the connection for screen reader users. If there isn't enough space for the description think about a "more info" link with popup/tooltip*. If you want to use a for that don't forget to add the alt attribute if it is an image (img) or aria-label otherwise.

_{* Article about user-friendly popups/tooltips with tips for accessibility}