paper-input icon indicating copy to clipboard operation
paper-input copied to clipboard

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

Open uxdesignz opened this issue 3 years ago • 1 comments

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 avatar Oct 22 '20 11:10 uxdesignz