Skip to content

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