Accessibility: Fix Screen Reader Functionality of FormItem; Remove title attribute from FormItemLabel
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
- Open the reproduction link in Chrome
- Enable MacOS VoiceOver utility and focus the “First Name” field - the form label is not read aloud
- Inspect the Form.Item “First Name” label in your browser dev tools
- Delete the “title” attribute on the label element in dev tools
- Focus the “First Name” field - the form label is read aloud
What is expected?
The field label should be read aloud by MacOS VoiceOver utility when the field is focused
What is actually happening?
The field label is not read aloud by MacOS VoiceOver utility
Environment | Info |
---|---|
antd | 4.16.11 |
React | react |
System | MacOS |
Browser | Chrome |
The fix seems as simple as removing title={typeof label === 'string' ? label : ''}
from the FormItemLabel.tsx component. But, I can’t tell from the git history why the label element received the title attribute. I’m happy to create a PR, but I want to validate that attribute is not necessary for other use cases before creating a PR.
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (4 by maintainers)
Top Results From Across the Web
A beginner's complete guide to form accessibility: the 5 things ...
Learn what makes forms accessible, tips on how to make your forms accessible, and exactly how to test your own forms for accessibility....
Read more >Technique H65:Using the title attribute to identify form controls ...
The objective of this technique is to use the title attribute to provide an accessible name for form controls when the visual design...
Read more >Form element labeling is inconsistent, inflexible and bad for ...
Accessibility : When developers don't want labels to appear visually for elements, they cannot easily indicate that the element's #title ...
Read more >Creating accessible PDFs - Adobe Support
Because screen readers use text-to-speech facilities to describe images, ... Change display name from Filename to Document Title.
Read more >14. Form Field Labels | Pearson Accessibility Guidelines
When a form field lacks an explicit label, screen readers will try to ... use markup and other technology features to explicitly associate...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Screen Reader works well in Firefox browser but read as
edit text blank
in Chrome.