3 ms·

This comes up briefly but I do still find it ridiculous that there's no simple standard CSS declaration to hide something from visible display but keep it for s

This comes up briefly but I do still find it ridiculous that there's no simple standard CSS declaration to hide something from visible display but keep it for screenreaders. Everything I've seen still does clip, or positions the content off the side of the page, or something like that. How is this not just an alternative "display" value, or an additional property? There's been a "speak" property floating around in one of those theoretical CSS modules that would accomplish this but as far as I know it has zero uptake among implementers.

alberth 3y ago
> no simple standard CSS declaration to hide something from visible display but keep it for screenreaders ARIA attributes allow for that. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... Example code. https://stackoverflow.com/questions/26032089/in-html-how-can-i-have-text-that-is-only-accessible-for-screen-readers-i-e-fo https://stackoverflow.com/questions/26032089/in-html-how-can...
- zerocrates 3y ago
  aria-label/labelledby is not always a workable solution. Sometimes you really need the text to be sitting there on the page as text for things to work right. Note that the very SO thread you linked to goes immediately to doing position/clipping tricks right after mentioning aria-label.
  - darekkay 3y ago
    In addition, aria labels don't work reliably with some HTML elements [1]. Specifically, the example from SO (div) will not work in some screen readers. [1] https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ https://www.tpgi.com/short-note-on-aria-label-aria-labelledb...
nine_k 3y ago
Why should it be a part of CSS, that handles visual representation, and not part of HTML, which handles data, structure, and semantics? I wonder if a whitespace <div> with a right aria-label could fit the bill.
- zerocrates 3y ago
  CSS's display: none and visibility: hidden already affect what the screenreaders can "see." So it's already involved.
  - zamadatix 3y ago
    And getting sick is a great reason you might use the phone to call into work but it doesn't imply getting sick is therefor the way to run all other phone usage through. I.e. it changes the behavior of the screen reader because it hides the content of the document and a screen reader knows it doesn't make sense to read content that was removed but that doesn't provide any support for why content which only affects screen readers belongs in the styling language as well. Further point, in case you still disagree whether it makes sense for CSS to include the ability or not: CSS supports pseudo-elements but that doesn't mean tags in your page should be turned into pseudo-elements just because you can.
- eismeer 3y ago
  > I wonder if a whitespace <div> with a right aria-label could fit the bill. Aria-label only works on interactive elements. I believe except the div has a `role`, screenreaders will ignore the label.

alberth 3y ago

> no simple standard CSS declaration to hide something from visible display but keep it for screenreaders ARIA attributes allow for that. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... Example code. https://stackoverflow.com/questions/26032089/in-html-how-can-i-have-text-that-is-only-accessible-for-screen-readers-i-e-fo https://stackoverflow.com/questions/26032089/in-html-how-can...

zerocrates 3y ago
aria-label/labelledby is not always a workable solution. Sometimes you really need the text to be sitting there on the page as text for things to work right. Note that the very SO thread you linked to goes immediately to doing position/clipping tricks right after mentioning aria-label.
- darekkay 3y ago
  In addition, aria labels don't work reliably with some HTML elements [1]. Specifically, the example from SO (div) will not work in some screen readers. [1] https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ https://www.tpgi.com/short-note-on-aria-label-aria-labelledb...

nine_k 3y ago

Why should it be a part of CSS, that handles visual representation, and not part of HTML, which handles data, structure, and semantics? I wonder if a whitespace <div> with a right aria-label could fit the bill.

zerocrates 3y ago
CSS's display: none and visibility: hidden already affect what the screenreaders can "see." So it's already involved.
- zamadatix 3y ago
  And getting sick is a great reason you might use the phone to call into work but it doesn't imply getting sick is therefor the way to run all other phone usage through. I.e. it changes the behavior of the screen reader because it hides the content of the document and a screen reader knows it doesn't make sense to read content that was removed but that doesn't provide any support for why content which only affects screen readers belongs in the styling language as well. Further point, in case you still disagree whether it makes sense for CSS to include the ability or not: CSS supports pseudo-elements but that doesn't mean tags in your page should be turned into pseudo-elements just because you can.
eismeer 3y ago
> I wonder if a whitespace <div> with a right aria-label could fit the bill. Aria-label only works on interactive elements. I believe except the div has a `role`, screenreaders will ignore the label.