Skip to content

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

@uxdesignz

Description

@uxdesignz

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions