question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

Edit on CodeSandbox

Steps to reproduce

  1. Open the reproduction link in Chrome
  2. Enable MacOS VoiceOver utility and focus the “First Name” field - the form label is not read aloud
  3. Inspect the Form.Item “First Name” label in your browser dev tools
  4. Delete the “title” attribute on the label element in dev tools
  5. 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:open
  • Created 2 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
afc163commented, Aug 12, 2021
  1. Your codesandbox doesn’t include Form component.
  2. Could you record a video to show how Screen Reader cannot work?
0reactions
afc163commented, Aug 20, 2021

Screen Reader works well in Firefox browser but read as edit text blank in Chrome.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found