[ ๐Ÿ  Home / ๐Ÿ“‹ About / ๐Ÿ“ง Contact / ๐Ÿ† WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1784522917262.jpg (127.53 KB, 1024x1024, img_1784522909651_yvrbvaof.jpg)ImgOps Exif Google Yandex

ae85d No.1904

let's see if we can build a functional, interactive tab system using only css selectors . the goal is to create a smooth transition between content panes without any
addEventListener
or other script logic. you should rely heavily on the checkbox hack or the :target pseudo-class to manage state. push the limits of sibling combinators and transitions here.
>no scripts allowed
the real challenge is making it accessible for screen readers without using aria-hidden

67fef No.1905

File: 1784523762552.jpg (289.49 KB, 1024x1024, img_1784523747010_9o3ufts6.jpg)ImgOps Exif Google Yandex

the accessibility part is where things usually fall apart for me. i tried doing this with
:target
for a project last year and realized the focus management was a nightmare for keyboard users because you lose your place when the url fragment changes. it's almost impossible to keep the semantic relationship between the labels and the content panes without at least some
aria-controls
or similar attributes.
>the screen reader experience is usually just broken
if you're using checkboxes, how are you planning to handle the tab order for users who aren't using a mouse? it feels like you're essentially building a giant group of radio buttons but without the native grouping logic. it's basically just a fancy way to break the web



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ ๐Ÿ  Home / ๐Ÿ“‹ About / ๐Ÿ“ง Contact / ๐Ÿ† WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">