Forms API drupal_process_states() hidden content is not visible to screen readers

Created on 10 April 2013, over 11 years ago
Updated 11 July 2023, about 1 year ago

Thanks to @merlinofchaos in #1963124-7: Resolve WCAG2 accessibility errors on main settings page β†’ I learned that the #states mechanism uses CSS display:none; to hide content.

Unfortunately, this means that for screen reader users, nothing gets presented to the user. For a keyboard only user this isn't a problem because when they select a checkbox new ones appear, but screen reader users need to either have access to all of the checkboxes or be alerted that there is a change to the page.

I think the best approach is to simply mimic what we did with element-hidden & element-invisible and make a:

.js .js-hide {
 display: none;
}
.js .js-invisible {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

I think that would address the problem, but it ties into core/misc/states.js

Any thoughts on this would be appreciated.

πŸ› Bug report
Status

Closed: cannot reproduce

Version

9.5

Component
FormΒ  β†’

Last updated less than a minute ago

Created by

πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Since there hasn't been a follow up to #36 in a year going to close for now.

    But please if still a bug reopen, updating issue summary where needed.

    Thanks!

Production build 0.71.5 2024