DEV Community

Cover image for Pure HTML CSS Tabs
Imia Hazel
Imia Hazel

Posted on

Pure HTML CSS Tabs

HTML tabs are perfect for web applications. Different subjects can easily be displayed with tabs ui design. You will love these simple and well designed tabs.

Layout

Tabs layout is enhanced with Google material icons. These are CSS only tabs and are compatible with modern browsers.

Responsive

These Pure HTML CSS tabs are responsive. You will observe a behaviour of accordion tabs on small displays.

Responsive CSS Tabs

Tools

  • HTML
  • CSS

Features

  • Material Icons Support
  • Responsive CSS Tabs
  • Modern Design
  • Clean Code

Details

Feedback

Your feedback will help us to improve these tabs.

Top comments (5)

Collapse
 
sidcraftscode profile image
sid

@inhuofficial I don't think these are accesible any feedback

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

No they aren't, it is impossible to make fully accessible tabs without JS as you need to update certain WAI-ARIA properties I am afraid.

However I only do my accessibility rants when someone says they are accessible (which Imia hasn't).

It might be something I write an article on as there are a reasonable number of things to consider.

As this is @imiahazel first post I will not go full on "angry accessibility man"...I will on your next post though Imia 😋😉.

For now, here is an example of accessible tabs from W3 that shows all the keyboard controls expected and WAI-ARIA properties to label it for a screen reader.

Only thing I will say is don't use these tabs as they are in production as they will end up excluding some people.

p.s. This being summoned for accessibility stuff is quite funny!

Still gets a ❤ and 🦄 from me as the CSS is nice and first articles should always be encouraged, I hope to see more from you Imia (and my accessibility rants are for fun and to help if you ever end up getting one from me in the comments, don't let me put you off! 🤣)!

Collapse
 
imiahazel profile image
Imia Hazel

Thanks @inhuofficial for your valuable comments.

Yes, these tabs are not accessible. We will keep this point in mind and will try to update tabs if possible.

Again thanks for your time, valuable comments and straight suggestions.
:)

I found lot of encouragement from these comments. Love to all Dev community.

Collapse
 
sidcraftscode profile image
sid

😁😁😁

Collapse
 
imiahazel profile image
Imia Hazel

Yes, these are not accessible.
Thanks Siddharth for your time and comments.