DBInput: Allow to specify a different ARIA label

[d-koppenhagen]

Currently the DBInput uses the label property to connect a <label> with an <input> which is fine for most use cases.

Sometimes you want to optimize how screenreaders announce fields and therefore it would be great if one can specify a different aria-label.

For example let's say we have a DBInput for defining the minimal time and a new property ariaLabel:

<DBInput
  type="number"
  id="min-connecting-time-input"
  label="mind. Umstiegszeit"
  ariaLabel="minimale Umstiegszeit"
/>

It should lead into something like this (simplified):

<label for="min-connecting-time-input">mind. Umstiegszeit</label>
<input type="number" placeholder=" " aria-label="minimale Umstiegszeit" id="min-connecting-time-input">

As a result a screenreader will announce minimale Umstiegszeit instead of mind. Umstiegszeit.

This change should be considered also for other types of Input controls (e. g. select, checkbox, etc.)

[nmerget]

In general we pass down every data-* and aria-* attributes to the "main" element inside a component. We only exclude data-* and aria-* attributes which we need to automate stuff. In your case (tested with React) everything should work as expected (used aria-label):

[nmerget]

Same for angular:

[mfranzke]

Currently the DBInput uses the label property to connect a <label> with an <input> which is fine for most use cases.

Sometimes you want to optimize how screenreaders announce fields and therefore it would be great if one can specify a different aria-label.

For example let's say we have a DBInput for defining the minimal time and a new property ariaLabel:

<DBInput
  type="number"
  id="min-connecting-time-input"
  label="mind. Umstiegszeit"
  ariaLabel="minimale Umstiegszeit"
/>

It should lead into something like this (simplified):

<label for="min-connecting-time-input">mind. Umstiegszeit</label>
<input type="number" placeholder=" " aria-label="minimale Umstiegszeit" id="min-connecting-time-input">

As a result a screenreader will announce minimale Umstiegszeit instead of mind. Umstiegszeit.

This change should be considered also for other types of Input controls (e. g. select, checkbox, etc.)

Doing so might conflict with WCAG Success Criterion 2.5.3 Label in Name

[d-koppenhagen]

@mfranzke totally. But in some situations it's fine when used with care. The understanding docs saying:

It is important to note that the specification allows authors to override the name calculated through native semantics. Both aria-label and aria-labelledby take precedence in the name calculation, overriding the visible text as the accessible name even when the visible text label is programmatically associated with the control. For this reason, when a visible label already exists, aria-label should be avoided or used carefully, and aria-labelledby should be used as a supplement with care.

So in my case the last part is important: 'used as a supplement with care'

[d-koppenhagen]

In general we pass down every data-* and aria-* attributes to the "main" element inside a component. We only exclude data-* and aria-* attributes which we need to automate stuff. In your case (tested with React) everything should work as expected (used aria-label):

Thanks, I wasn't really aware of it. I think it should be pointed out somewhere in the documentation for all elements / components. Feel free to close this issue since I was able to solve it (or to add a hint to the docs)