Support for adding ARIA label to Numeral Date Field without displaying visible labels.

[siddhant-sage24]

Description

As a developer using Carbon, I want the Numeral Date Field component to support ARIA labels (such as aria-label or ariaLabe) without requiring a visible label, so that the component remains accessible for screen readers.

Suggested solution

Please can you add support for an aria-label/ariaLabel or similar prop in the Numeral Date Field component, allowing it to provide descriptive labels for screen readers without rendering visible labels.

Demo URL

No response

Alternatives

No response

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[sianford]

@ljemmo @harpalsingh can you please have a look at this and give your opinion on whether this should be an allowed state? It would result in the Numeral Date Input not having a visible label. This has only recently been brought in line with the DS.

[ljemmo]

I can think of some edge cases where this might be needed but its not actively something we would encourage for accessibility reasons. @siddhant-sage24 - do you have an example of the design you can share with us for more context. Feel free to DM me on slack.

[siddhant-sage24]

I can think of some edge cases where this might be needed but its not actively something we would encourage for accessibility reasons. @siddhant-sage24 - do you have an example of the design you can share with us for more context. Feel free to DM me on slack.

Okay, I will connect with you on Slack @ljemmo

[edleeks87]

Hey @ljemmo did we get anywhere with this request?

[ljemmo]

@edleeks87 last i checked, Siddhant was liaising with the accessibility team whether this issue is still needed

[siddhant-sage24]

Hi @edleeks87 @ljemmo , I asked on accessibility channel about this, also checked for work around. But its not giving any solution for this requirement. We will need a "aria-label" prop added to Numeral-Date component, similar to other carbon components in our Carbon library.

[nicktitchmarsh]

FE-7054 has been raised, my suggestion here is for Carbon to automatically provide an aria-labelledby link to the associated label above each field. i.e (day, month, year), this will also then work with the translations. Is this acceptable @siddhant-sage24?

[siddhant-sage24]

FE-7054 has been raised, my suggestion here is for Carbon to automatically provide an aria-labelledby link to the associated label above each field. i.e (day, month, year), this will also then work with the translations. Is this acceptable @siddhant-sage24?

Thanks. Yes, this will work.

For example: Similar to these above "aria" props for other carbon components. If Carbon library is able to add it to "Numeral Date" field, it will be great.

[ljemmo]

@nicktitchmarsh and @sianford there's a reply from Chris here about use of aria:

Hey,
We generally advise against using any aria unless you have to use it.
In this example I would expect a

with a . That would be enough to make it clear to screen reader users that the input fields relate to ‘Date of birth’.
An example from gov uk here

Does this help unblock this issue?

[nicktitchmarsh]

Ok I'll discuss this solution with the team during our refinement

[nicktitchmarsh]

We actually already render this as a fieldset with individual fields and labels. I think the ask here is that @siddhant-sage24 wants to remove the labels of Day Month and Year in favour of aria-labels. I think we need to push back on this design requirement as it would be considered less accessible without labels. @ljemmo can you advise the designer of this screen?

[ljemmo]

@nicktitchmarsh if that is indeed the ask, then i agree that we shouldn't be doing that for accessibility reasons. Unsure who the designer is that i would need to contact here.

[nicktitchmarsh]

I spoke with Siddhant, it seems the issue here is that when the field is set to required, screen readers will read out the field name with "asterisk" as well. I have asked accessibility for a steer on how this should work