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

Use aria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format) #37587

Merged
merged 3 commits into from
Dec 28, 2022

Conversation

hannahiss
Copy link
Contributor

@hannahiss hannahiss commented Dec 5, 2022

…when it contains mandatory info (e.g. data format)

Description

In order to ensure that user will have all the needed information with a screen reader, it could be better to link form-text (helper text) to input with aria-labelledby (instead of aria-describedby) when it contains mandatory information, like data format. When helper text is not so important, it can still be linked with aria-describedby.

  • the first example (exampleInputEmail1) stays with aria-describedby
  • the Bootstrap callout "Associating form text with form controls" has been updated to explain when aria-labelledby or aria-describedby should be used
  • the examples below (inputPassword5 and inputPassword6) now use aria-labelledby
  • the example in input-group should be linked to input with aria-describedby

Motivation & Context

This PR is coming form an exchange with @Aniort, Orange accessibility expert.
It is due to the fact that aria-labelledby is better supported by all assistive technologies than aria-describedby, and that reading of aria-describedby may be disabled, depending on settings.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

…when it contains mandatory info (e.g. data format)
@hannahiss hannahiss marked this pull request as ready for review December 6, 2022 10:55
@mdo mdo requested a review from patrickhlauke December 26, 2022 23:37
@patrickhlauke
Copy link
Member

incidentally, would love more information on the assertion that

aria-labelledby is better supported by all assistive technologies than aria-describedby

@mdo mdo merged commit a99234d into twbs:main Dec 28, 2022
@XhmikosR XhmikosR changed the title Use aria-labelledby to associate form-text (helper) with input field … Use aria-labelledby to associate form-text (helper) with input field Dec 28, 2022
@XhmikosR XhmikosR changed the title Use aria-labelledby to associate form-text (helper) with input field Use aria-labelledby to associate form-text (helper) with input field when it contains mandatory info (e.g. data format) Dec 28, 2022
ffoodd added a commit that referenced this pull request May 16, 2023
mdo pushed a commit that referenced this pull request Jun 1, 2023
* docs(forms): switch to aria-describedby

* docs(forms): revert #37587 callout change

* docs(forms): improved sizing select examples labels
romankupchak93 pushed a commit to romankupchak93/bootstrap that referenced this pull request Jan 5, 2024
* docs(forms): switch to aria-describedby

* docs(forms): revert twbs#37587 callout change

* docs(forms): improved sizing select examples labels
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants