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
commented
3 years ago
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.