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

paper-input form label , Screen readers not announcing the form field label #707

Open
uxdesignz opened this issue Oct 22, 2020 · 1 comment

Comments

@uxdesignz
Copy link

Actual Result :
form field label element is referenced by the form input using aria-labelledby but it has visibility:hidden applied to it. Screen readers may not announce the form field label.
To hide content from both visual and screen reader users, use the CSS instructions display:none; and visibility:hidden;.

Expected Results :
Need to remove the visibility:hidden CSS property and to use visually-hidden text instead.

CSS used to hide content visually, but make it available to assistive technology users :
.visually-hidden{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
HTML demonstrating use of the class :

This paragraph is present in the DOM and accessible to assistive technologies, but is visually hidden.

@uxdesignz
Copy link
Author

Any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant