CODEWITHSUNDEEP
cssaccessibilityhidescreen-readers
user9011377
user9011377

Reputation:

Does my sr-only alternative seem correct to you?

display:none or visibility:hidden are not good ideas to hide a focusable element, because screen readers cannot see them.

This is the "traditional" way to hide an element from view but keep it accessible :

.sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

I started to use my own like this for check boxes, radio buttons that I style with their labels :

[type=radio], [type=checkbox] {
  position: absolute;    /* keeps it out of flow */
  opacity: 0;            /* makes it invisible */
  pointer-events: none;  /* being able to click the content below */
}
[type=radio] + label , [type=checkbox] + label {
  /* custom styling */
}
[type=radio]:checked + label , [type=checkbox]:checked + label {
  /* custom styling */
}

Do you see any big issue with that idea ?

New proposal edit after investigations :

.hidden {
  position: absolute;
  opacity: 0.001;
  pointer-events: none;
}
/* OR */
.hidden {
  position: absolute;
  opacity: 0.001;
  z-index: -999
}

For tests : https://jsfiddle.net/pLyo52f3/

Upvotes: 1

Views: 1388

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13668

I would suggest that the problem here is that you are applying .sr-only styling to style focusable form elements. If you look at a library like Bootstrap, they have a set of utility classes for focusable and non-focusable screen reader text. You'll note that in their example they are applying the "focusable" variant to anchor text.

Bootstrap indeed has custom styled radio buttons and other form elements. However, you'll note that they are not extending or otherwise leveraging their screen reader text styling. Instead, they are utilizing appearance: none to remove platform-specific styles and allow for custom styling of the form element. This is the idiomatic and accessible manner in which to achieve custom styled form elements.

Slugolicious's comment is quite apt. While you may not opt to leverage Bootstrap (or a similarly mature UI framework) directly, feel free to borrow liberally from them; they have spent years honing and iterating on this code to maximize consistency and accessibility across platforms. Spinning your own would likely be wasted effort.

Upvotes: 0

Related Questions