Created by: hannahiss
…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