Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (Darkly)
  • No Skin
Collapse
Brand Logo
  1. Home
  2. Uncategorized
  3. Is there still any point to most styles in visually hidden classes in '26?

Is there still any point to most styles in visually hidden classes in '26?

Scheduled Pinned Locked Moved Uncategorized
cssaccessibility
11 Posts 4 Posters 28 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Ana Tudor 🐯A Ana Tudor 🐯

    Is there still any point to most styles in visually hidden classes in '26?

    Any point to shrinking dimensions to `1px` and setting `overflow: hidden` when `clip-path` to nothing via `inset(50%)`/ `circle(0)` reduces clickable area to nothing? And then no `1px` dimensions means no need for `white-space`.

    Because based on this article https://vispero.com/resources/the-anatomy-of-visually-hidden/ I just don't see why any styles other than `position: absolute` + `clip-path` to nothing would still be necessary.

    #CSS #accessibility

    Jake ArchibaldJ This user is from outside of this forum
    Jake ArchibaldJ This user is from outside of this forum
    Jake Archibald
    wrote last edited by
    #2

    @anatudor that seems good enough to me. I guess the rest is just old habits.

    1 Reply Last reply
    0
    • Ana Tudor 🐯A Ana Tudor 🐯

      Is there still any point to most styles in visually hidden classes in '26?

      Any point to shrinking dimensions to `1px` and setting `overflow: hidden` when `clip-path` to nothing via `inset(50%)`/ `circle(0)` reduces clickable area to nothing? And then no `1px` dimensions means no need for `white-space`.

      Because based on this article https://vispero.com/resources/the-anatomy-of-visually-hidden/ I just don't see why any styles other than `position: absolute` + `clip-path` to nothing would still be necessary.

      #CSS #accessibility

      Patrick H. LaukeP This user is from outside of this forum
      Patrick H. LaukeP This user is from outside of this forum
      Patrick H. Lauke
      wrote last edited by
      #3

      @anatudor the stick in the mud has been odd/unusual behaviour in safari when it comes to focusable elements. if that is now resolved, and no other browsers have since regressed to not exposing content to AT ... sure

      Ana Tudor 🐯A 1 Reply Last reply
      0
      • Patrick H. LaukeP Patrick H. Lauke

        @anatudor the stick in the mud has been odd/unusual behaviour in safari when it comes to focusable elements. if that is now resolved, and no other browsers have since regressed to not exposing content to AT ... sure

        Ana Tudor 🐯A This user is from outside of this forum
        Ana Tudor 🐯A This user is from outside of this forum
        Ana Tudor 🐯
        wrote last edited by
        #4

        @patrick_h_lauke Any link on that? All I could find was Safari ≤ 15 removing visually hidden elements from focus order 👀

        Patrick H. LaukeP 1 Reply Last reply
        0
        • Ana Tudor 🐯A Ana Tudor 🐯

          @patrick_h_lauke Any link on that? All I could find was Safari ≤ 15 removing visually hidden elements from focus order 👀

          Patrick H. LaukeP This user is from outside of this forum
          Patrick H. LaukeP This user is from outside of this forum
          Patrick H. Lauke
          wrote last edited by
          #5

          @anatudor not off the top of my head, but ... you'd need to test (including testing with various browser/screen reader combinations). also noting how safari/ios often behaves differently from safari/macos ...

          Ana Tudor 🐯A ThainT 2 Replies Last reply
          0
          • Patrick H. LaukeP Patrick H. Lauke

            @anatudor not off the top of my head, but ... you'd need to test (including testing with various browser/screen reader combinations). also noting how safari/ios often behaves differently from safari/macos ...

            Ana Tudor 🐯A This user is from outside of this forum
            Ana Tudor 🐯A This user is from outside of this forum
            Ana Tudor 🐯
            wrote last edited by
            #6

            @patrick_h_lauke 😭

            (no access to any apple device, I've gone around the block asking, but nobody has anything like that here)

            1 Reply Last reply
            0
            • Patrick H. LaukeP Patrick H. Lauke

              @anatudor not off the top of my head, but ... you'd need to test (including testing with various browser/screen reader combinations). also noting how safari/ios often behaves differently from safari/macos ...

              ThainT This user is from outside of this forum
              ThainT This user is from outside of this forum
              Thain
              wrote last edited by
              #7

              @patrick_h_lauke @anatudor IIRC there is this one https://bugs.webkit.org/show_bug.cgi?id=163658

              Ana Tudor 🐯A 1 Reply Last reply
              0
              • ThainT Thain

                @patrick_h_lauke @anatudor IIRC there is this one https://bugs.webkit.org/show_bug.cgi?id=163658

                Ana Tudor 🐯A This user is from outside of this forum
                Ana Tudor 🐯A This user is from outside of this forum
                Ana Tudor 🐯
                wrote last edited by
                #8

                @Thain @patrick_h_lauke Wait, what am I missing? How is that related to visually hidden elements?

                (I just wanted to replace the text content of a span with an icon, no links or navigating anywhere else on the page involved)

                Patrick H. LaukeP 1 Reply Last reply
                0
                • Ana Tudor 🐯A Ana Tudor 🐯

                  @Thain @patrick_h_lauke Wait, what am I missing? How is that related to visually hidden elements?

                  (I just wanted to replace the text content of a span with an icon, no links or navigating anywhere else on the page involved)

                  Patrick H. LaukeP This user is from outside of this forum
                  Patrick H. LaukeP This user is from outside of this forum
                  Patrick H. Lauke
                  wrote last edited by
                  #9

                  @anatudor @Thain the wider question was whether or not visually hidden can be simplified down to the bone. but visually hidden is also used to hide things like skip links (and then make them appear on focus). so the generic visually hidden when also used for those cases needs to not break it...

                  Patrick H. LaukeP 1 Reply Last reply
                  0
                  • Patrick H. LaukeP Patrick H. Lauke

                    @anatudor @Thain the wider question was whether or not visually hidden can be simplified down to the bone. but visually hidden is also used to hide things like skip links (and then make them appear on focus). so the generic visually hidden when also used for those cases needs to not break it...

                    Patrick H. LaukeP This user is from outside of this forum
                    Patrick H. LaukeP This user is from outside of this forum
                    Patrick H. Lauke
                    wrote last edited by
                    #10

                    @anatudor @Thain beyond that, there used to be weird inconsistencies even just for hiding text, where some browser/SRs would take visual hints ("oh, this element has zero width/height...") to then also not expose content at all in the accessibility tree ("...so i also won't expose it for screen readers"). and that has historically been finicky and prone to regressions/quirky behaviours. so that part would also need to be tested thoroughly (and may regress again at any point)

                    Ana Tudor 🐯A 1 Reply Last reply
                    0
                    • Patrick H. LaukeP Patrick H. Lauke

                      @anatudor @Thain beyond that, there used to be weird inconsistencies even just for hiding text, where some browser/SRs would take visual hints ("oh, this element has zero width/height...") to then also not expose content at all in the accessibility tree ("...so i also won't expose it for screen readers"). and that has historically been finicky and prone to regressions/quirky behaviours. so that part would also need to be tested thoroughly (and may regress again at any point)

                      Ana Tudor 🐯A This user is from outside of this forum
                      Ana Tudor 🐯A This user is from outside of this forum
                      Ana Tudor 🐯
                      wrote last edited by
                      #11

                      @patrick_h_lauke @Thain Yes, that's exactly what I don't get. Simplifying to the bone = excludes things that historically caused problem like width and height.

                      So what's the problem then and how are the historical problems triggered by the simplification? Where I am not touching the width and height?

                      1 Reply Last reply
                      0
                      • R ActivityRelay shared this topic
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      Powered by NodeBB Contributors
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • World
                      • Users
                      • Groups