Tabs

Examples

Tabs

<div class="ys-tabs" role="tablist" aria-label="Provide a label that describes ALL of the tabs">
    <button class="ys-tabs__tab" role="tab" aria-selected="true" aria-controls="tabTarget01" id="tab01">Tab One</button>
    <button class="ys-tabs__tab" role="tab" aria-selected="false" aria-controls="tabTarget02" id="tab02" tabindex="-1">Second Tab</button>
    <button class="ys-tabs__tab" role="tab" aria-selected="false" aria-controls="tabTarget03" id="tab03" tabindex="-1">The Third Tab</button>
</div>

HTML Guidelines

These tabs must always be implemented in an accessible manner — please refer to https://w3c.github.io/aria-practices/examples//tabs/tabs-1/tabs.html for HTML Structure and JavaScript functionality.

UX and Design Guidelines