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
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, quis incidunt culpa vel aut repellendus pariatur at, sapiente, saepe mollitia magnam! Obcaecati eum quasi velit architecto. Cupiditate esse perspiciatis veniam.
Consequuntur dolores accusantium eos consequatur consectetur aperiam totam praesentium maxime molestiae, and eligendi hic itaque vel vero deserunt laborum quam debitis, placeat repellat quibusdam quo reprehenderit voluptas minus facilis. Commodi!
Eum libero nemo excepturi labore exercitationem et? And, perspiciatis maiores ipsum nisi rerum expedita quos amet optio corrupti illum exercitationem quasi numquam quae autem esse accusamus recusandae sint nulla magnam!
Hic temporibus eos placeat ex aperiam! Repellat illum dolorum veritatis. Culpa at facere repellendus maxime vero voluptatibus beatae soluta in voluptates et explicabo repellat aspernatur, voluptas nihil quaerat tempore natus!
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
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.
