Dans cette vidéo, je vous propose de découvrir comment créer un système d'onglet en se basant sur le principe des CustomElement et en respectant les principes d'accessibilité.
Notre objectif est d'avoir la structure HTML la plus simple possible afin d'avoir un fonctionnement facile à mettre en place.
<nav-tabs class="nav-pills">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3" aria-selected="true">Tab 3</a>
</nav-tabs>
<div>
<div id="tab1" hidden="hidden">
<p>Lorem ipsum dolor <a href="https://grafikart.fr">sit</a> 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.</p>
<p>Consequuntur dolores accusantium eos consequatur consectetur aperiam totam praesentium maxime molestiae, et eligendi hic itaque vel vero deserunt laborum quam debitis, placeat repellat quibusdam quo reprehenderit voluptas minus facilis. Commodi!</p>
</div>
<div id="tab2" hidden="hidden">
<p>Eum libero nemo excepturi labore exercitationem et? Et, perspiciatis maiores ipsum nisi rerum expedita quos amet optio corrupti illum exercitationem quasi numquam quae autem esse accusamus recusandae sint nulla magnam!</p>
<p>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!</p>
</div>
<div id="tab3">
<p>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.</p>
<p>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?</p>
</div>
</div>L'accessibilité
L'accessibilité couvre ici deux aspects importants pour le bon fonctionnement de notre système d'onglet :
- La navigation doit être possible au clavier (sans utiliser la souris).
- Les éléments doivent être convenablement balisés afin de permettre à un lecteur d'écran de fonctionner convenablement.
Le W3C propose d'ailleurs des spécifications complètes sur le fonctionnement d'un tel système et il faudra juste suivre les recommandations proposées sur cette page.
