PUBLIC MARKS from decembre with tags css & tab

KIS (Keep It Simple) A simple succession of headings and divs should lead users to assume - rightly - that those headings are followed by their respective section (by the content they "introduce"). This alone is enough for screen-reader users to make sense of the markup—after all, when it comes to content, this is the most common markup pattern on the Web.

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

A style I made for fun, to round the first tab top left corner, and new tab top right corner. A good demonstration of using child tokens

(Better) Tabs with Round Out Borders We'll show how you can use the CSS :before and :after pseudo elements to create a rounded bottom border edge for each tab without using images.

Pour un clic sur un onglet, masquer tous les panneaux, montrer celui qui correspond à l'onglet juste cliqué.