Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Associating labels with input fields explicitly #1866

Closed
grigorzyapkov opened this issue Jun 24, 2020 · 0 comments · Fixed by #1873
Closed

Associating labels with input fields explicitly #1866

grigorzyapkov opened this issue Jun 24, 2020 · 0 comments · Fixed by #1873
Assignees

Comments

@grigorzyapkov
Copy link

Hello,

I just find that the screen reader is not able to read label text when the focus is on the input element associated with that label. I tried to set for attribute on the label that points to the input's id, like the example below:

<ui5-label for="myInput" required show-colon>First name</ui5-label>
<ui5-input id="myInput" aria-required="true"></ui5-input>

I also tried to set aria-labelledby attribute on the input element that points to the label id, like the example below:

<ui5-label id="myLabel" required show-colon>First name</ui5-label>
<ui5-input aria-labelledby="myLabel"></ui5-input>

Unfortunately, both ways don't work for the screen readers. I also found that the second approach work only for native input.

Regards,
Grigor

@vladitasev vladitasev self-assigned this Jun 25, 2020
ilhan007 pushed a commit that referenced this issue Jul 30, 2021
Part of #3107 

BREAKING CHANGE: The support for ```aria-labelledby``` have been deprecated in favour of  new attribute ```accessible-name-ref``` for the following components:
- ComboBox (Requested by SF #1916)
- DatePicker (Requested by SF #2107)
- Input (Requested #1866)
- List (Requested by SF #1886)
- Rating Indicator
- Select (Requested by SF #2107)
- StepInput (Implemented as part of the initial implementation #2804)
- TextArea (Requested by SF #2107)
- WizardStep (Implemented as part of the initial implementation #2400)
The ```aria-labelledby``` has been deprecated for the following component:
- Button (Requested by SF #1425)
The ```accessible-name``` has been deprecated for the following components:
- Link (Requested by SF #2356)
 Both ```aria-labelledby``` and ```accessible-name``` have been deprecated for the following components:
- Card (Requested by CBC #2127)
- CheckBox (Requested by SF #2265)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants