pure CSS, accessable, tabbed content

by feeela

HTML

<dl role="tablist">
    <dt tabindex="0" aria-controls="content1" role="tab">Tab 1</dt>
    <dd id="content1" role="tabpanel">
        Tab 1 content. Tab 1 content. Tab 1 content. Tab 1 content.</dd>
    <dt tabindex="0" aria-controls="content2" role="tab">Tab 2</dt>
    <dd id="content2" role="tabpanel">
        The content of the second Tab. The content of the second Tab. The content of the second Tab. The content of the second Tab.</dd>
    <dt tabindex="0" aria-controls="content3" role="tab">Tab 3</dt>
    <dd id="content3" role="tabpanel">
        Tab 3 content. Tab 3 content. Tab 3 content. Tab 3 content.</dd>
    <dt tabindex="0" aria-controls="content4" role="tab">Tab 4</dt>
    <dd id="content4" role="tabpanel">
        The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab. The content of the fourth Tab.</dd>
</dl>

CSS

:focus {
    outline: 0;
}

[role="tablist"] {
    position: relative;
    width: 50%;
}
[role="tablist"] [role="tab"] {
    display: inline-block;
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-bottom-color .5s linear;
}
[role="tablist"] [role="tabpanel"] {
    position: absolute;
    top: 2em;
    overflow: hidden;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity .7s ease;
}
[role="tablist"] [role="tab"]:hover,
[role="tablist"] [role="tab"]:focus {
    outline: 0;
    border-bottom-color: #555;
}
[role="tablist"] [role="tab"]:focus + [role="tabpanel"] {
    visibility: visible;
    opacity: 1;
}