A Pen by Long Lazuli.

CSS-Tabs-with-keyboard-accessibility.markdown

CSS Tabs with keyboard accessibility

My goal here is to keep accessibility with keyboard. It is a very simple tabs component in css.

I use SASS for the generation of the code. It works in Firefox, Chrome/Chromium and Opera. I can't test this on IE for the moment.

A Pen by Long Lazuli on CodePen.

License.

index.html

  <fieldset class='tabs'>
    
    <!-- those input must have the same attribute 'name'
         and them 'id' will be used in CSS -->
		<input type="radio" name="tab_option" id="tab_1" checked />
		<input type="radio" name="tab_option" id="tab_2" />
		<input type="radio" name="tab_option" id="tab_3" />
    
		<!-- here are the tabs titles -->
    <legend>
			TABS : <label for="tab_1">hello</label> - <label for="tab_2">crusty</label> - <label for="tab_3">world</label>
		</legend>
		
    <!-- here are the differents contents -->
    <section for="tab_1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, erat ut venenatis adipiscing, justo risus convallis felis, quis rhoncus justo quam eu ante. Cras nulla lorem, commodo nec odio vitae, iaculis feugiat erat. Quisque scelerisque nec metus eget euismod. Ut vitae lorem augue. Pellentesque aliquet, sapien et consectetur semper, sem velit faucibus felis, nec varius elit ante et tortor. Donec interdum, quam eu ultricies pretium, justo leo feugiat orci, vel elementum nulla augue et augue. Maecenas sollicitudin urna sed metus dignissim venenatis. Aenean ultricies faucibus fermentum. Quisque posuere enim lacinia felis aliquam faucibus. Aenean elit ipsum, ornare in condimentum quis, tempus non velit. Proin non eros non tortor volutpat gravida vitae sed ligula. Proin eu lacus enim. Aliquam ultrices iaculis arcu tempus ornare. Nulla est nisl, pellentesque ultricies turpis at, elementum viverra nisl. Suspendisse nec quam elementum est ultrices euismod.</p>

      <p>Sed quis magna eu lorem imperdiet auctor eu ac diam. Praesent libero velit, tempus non pellentesque vitae, fringilla vitae erat. Vivamus volutpat leo mi, ac accumsan elit placerat et. Nullam fermentum magna ut nunc ultrices, non dignissim diam iaculis. Sed vel diam vel lorem dignissim viverra. Cras sed erat at quam adipiscing mollis at posuere ipsum. Praesent vel nunc lorem. Aenean mi leo, aliquam eget metus et, placerat porttitor massa. Suspendisse hendrerit justo vitae faucibus rhoncus. Curabitur aliquam id velit ultricies congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum rhoncus sollicitudin eros, at tempor odio convallis aliquam. Phasellus mollis ante vel massa tincidunt, sed porttitor odio pretium. Integer ac eros aliquam, euismod augue id, molestie mauris.</p>
      
		</section>
		<section for="tab_2">
      <p>Cras condimentum egestas sollicitudin. Mauris dui magna, dictum a tellus a, dapibus imperdiet neque. Proin gravida nisl et lectus facilisis ornare. Nunc commodo sed nisl at mollis. Ut lacinia diam risus, pellentesque interdum orci mattis sit amet. Donec viverra augue et tellus sollicitudin ornare. Donec nec leo ac urna fermentum accumsan id vel sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in justo velit. Phasellus malesuada blandit tortor, at dapibus erat pellentesque sit amet. Nullam velit nunc, elementum non tempor et, consequat eget tortor.</p>
      
		</section>
  
    <section for="tab_3">
      <p>Hope you like it.</p>
      
		</section>
  
	</fieldset>

style.scss

@import "compass";
// this define for how many tabs we will generate the code :
$max-tabs: 3;

// let's define a default behavior :
$max-tabs: 3!default;
.tabs {
  
	input[type="radio"] {
  // Hide the radio inputs :
    position: absolute;
    pointer-events: none;
	  opacity: 0;
    // the others are for Opera :
    height: 0;
    width: 0;
    border: none;
    padding: 0;
  }

  input[type="radio"]:focus ~ legend {
  // show when the tab selector has the focus :
    outline: darkgrey solid 2px;
  }
	legend label {
  // show that label is clickable :
			cursor: pointer;
			&:hover { color: #955; }
	}

  
	section[for] {
  // by default, section are hidden :
		display: none;
	}

  // for the number of tabs we decided to handle :
  @for $tab-num from 1 through $max-tabs {
    // this is the id of the radio :
    $tab-id: tab_ + $tab-num;
    
    input[type="radio"]##{$tab-id}:checked {
	    // we show the section related to the checked radio:
      ~ section[for="#{$tab-id}"] {display: block;	}
      // we defined how the tab title is shown :
		  ~ legend label[for="#{$tab-id}"] {	text-decoration: underline;}
      // we help the navigation highlighting the label corresponding to the radio focused :
		  &:focus ~ legend label[for="#{$tab-id}"] { color: #F00;	} 
	  }

}


}