3 ms·

While you can add some interactivity without JavaScript, it doesn't necessarily mean you should do this. If you ask yourself, what is the purpose of CSS vs Jav

While you can add some interactivity without JavaScript, it doesn't necessarily mean you should do this. If you ask yourself, what is the purpose of CSS vs JavaScript, you will see that this type of functionality probably falls outside the scope of what CSS is meant to do. Also it may take extra time to explain how this works to every new developer. Also accessibility.

extra88 10y ago
What accessibility problems, specifically? It's all operable and navigable by keyboard. It could be further enhanced with ARIA tab panel attributes.
- grahamel 10y ago
  Well the final example[1] isn't usable via keyboard at all [1]http://codepen.io/CiTA/pen/ALVWzg http://codepen.io/CiTA/pen/ALVWzg
  - extra88 10y ago
    Sure it is, I did so before I posted.
  - deadcast 10y ago
    I had to first click on one of the tabs before it started letting me use the keyboard.
  - grahamel 10y ago
    but that's tabbing with the left/right keys instead of the tab key, which is how I tab through a website ignoring the fact that there's no :active styling in the css, there is nothing to indicate that to change the tab you need to use different keys
  - TylerH 10y ago
    Yes it is; I can switch between tabs just fine with arrow keys.
    - aplummer 10y ago
      I have had a WCAG AA 2.0 audit failure doing this because this approach is not obvious to a sighted keyboard only use that space bar and arrow keys and not tab + enter is the control mechanism. Also a non sighted user will need hidden text before the tabs at a minimum to explain how they work.
paulojreis 10y ago
If using the :target approach, I actually think it's an appropriate use of CSS and HTML. It's not a stretch to consider a tab as a fragment of the document, which can be accessed using the fragment identifier of the URI. After this, hiding the other fragments while showing the target one can also be considered a style choice which is, adequately, achieved via CSS. Probably people will end up using JS for this, and that's OK, but I really think this approach actually fits the way standards "define" HTML and CSS.

extra88 10y ago

What accessibility problems, specifically? It's all operable and navigable by keyboard. It could be further enhanced with ARIA tab panel attributes.

grahamel 10y ago
Well the final example[1] isn't usable via keyboard at all [1]http://codepen.io/CiTA/pen/ALVWzg http://codepen.io/CiTA/pen/ALVWzg
- extra88 10y ago
  Sure it is, I did so before I posted.
- deadcast 10y ago
  I had to first click on one of the tabs before it started letting me use the keyboard.
- grahamel 10y ago
  but that's tabbing with the left/right keys instead of the tab key, which is how I tab through a website ignoring the fact that there's no :active styling in the css, there is nothing to indicate that to change the tab you need to use different keys
- TylerH 10y ago
  Yes it is; I can switch between tabs just fine with arrow keys.
  - aplummer 10y ago
    I have had a WCAG AA 2.0 audit failure doing this because this approach is not obvious to a sighted keyboard only use that space bar and arrow keys and not tab + enter is the control mechanism. Also a non sighted user will need hidden text before the tabs at a minimum to explain how they work.

paulojreis 10y ago

If using the :target approach, I actually think it's an appropriate use of CSS and HTML. It's not a stretch to consider a tab as a fragment of the document, which can be accessed using the fragment identifier of the URI. After this, hiding the other fragments while showing the target one can also be considered a style choice which is, adequately, achieved via CSS. Probably people will end up using JS for this, and that's OK, but I really think this approach actually fits the way standards "define" HTML and CSS.