Tabs Video Tutorial accessible with CustomElement

In this video I suggest you discover how to create a tab system based on the principle of CustomElement and respecting the principles of accessibility.

Our goal is to have the simplest HTML structure possible in order to have an operation that is easy to set up.

    Tab 1
    Tab 2
    Tab 3

Aliquid ea doloribus eum exercitationem sunt! Reiciendis modi saepe nostrum ipsa laborum, laudantium natus consequuntur sint, ratione nesciunt tenetur quo obcaecati velit porro! Repudiandae vel cum unde quia rem similique.

Laudantium architecto asperiores voluptatem, quam voluptate, omnis nulla neque distinctio odio sint magni provident veniam, eos quidem. Voluptate, veniam. Magni ad nihil reprehenderit placeat amet facilis laudantium autem dolorem cum?


Accessibility here covers two important aspects for the proper functioning of our tab system:

  • Navigation must be possible using the keyboard (without using the mouse).
  • Items must be properly marked to allow a screen reader to function properly.

The W3C also offers complete specifications on the operation of such a system and you will just have to follow the recommendations on this page.