Difference between revisions of "ARIA Tabs- Javascript"
Jump to navigation
Jump to search
Tab List and Tab Panels
| Line 1: | Line 1: | ||
| − | |||
| − | |||
<html lang="en-us"> | <html lang="en-us"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
| − | <title> | + | <title>Tab List and Tab Panels</title> |
<style> | <style> | ||
body{font-family:verdana, arial, 'sans-serif'; font-size:100%;} | body{font-family:verdana, arial, 'sans-serif'; font-size:100%;} | ||
| − | h1{font-size:1.5rem;} | + | h1{font-size:1.5rem;} |
h2{font-size:1.25rem;} | h2{font-size:1.25rem;} | ||
| Line 21: | Line 19: | ||
.off-screen{height:1; left:-500px; overflow:hidden; position: absolute; top:0; width:1;} | .off-screen{height:1; left:-500px; overflow:hidden; position: absolute; top:0; width:1;} | ||
| − | |||
| − | |||
.tab-container ul li:focus{border:2px solid red;} | .tab-container ul li:focus{border:2px solid red;} | ||
| Line 72: | Line 68: | ||
activeElem= links[i]; | activeElem= links[i]; | ||
links[i].addEventListener("keydown", navigateTabs); | links[i].addEventListener("keydown", navigateTabs); | ||
| + | links[i].addEventListener("click", activatePanels, false); | ||
} | } | ||
}; | }; | ||
| + | function activatePanels(elem){ | ||
| + | this.setAttribute('aria-selected', 'true'); | ||
| + | this.setAttribute('tabindex', '0'); | ||
| + | |||
| + | var aParent=this.parentNode; | ||
| + | var nextSib= aParent.nextElementSibling; | ||
| + | var prevSib=aParent.previousElementSibling; | ||
| + | if(nextSib !=null){//For IE | ||
| + | nextSib.childNodes[0].setAttribute('aria-selected', 'false'); | ||
| + | nextSib.childNodes[0].setAttribute('tabindex', '-1'); | ||
| + | nextSib.removeAttribute('class'); | ||
| + | } | ||
| + | |||
| + | if (prevSib != null){ | ||
| + | prevSib.childNodes[0].setAttribute('aria-selected', 'false'); | ||
| + | prevSib.childNodes[0].setAttribute('tabindex', '-1'); | ||
| + | prevSib.removeAttribute('class'); | ||
| + | } | ||
| + | aParent.setAttribute('class', 'selected'); | ||
| + | setPanel(this); | ||
| + | |||
| + | } | ||
| − | |||
function navigateTabs(e){ | function navigateTabs(e){ | ||
e = e || window.event; | e = e || window.event; | ||
| Line 99: | Line 117: | ||
if (e.which==32){ | if (e.which==32){ | ||
| − | setPanel( | + | setPanel(activeElem); |
var aParent=activeElem.parentNode; | var aParent=activeElem.parentNode; | ||
| − | + | if (aParent.nextElementSibling != null){ | |
| − | aParent.previousElementSibling.childNodes[0].setAttribute('aria-selected', 'false'); | + | aParent.nextElementSibling.childNodes[0].setAttribute('aria-selected', 'false'); |
| + | } | ||
| + | |||
| + | if (aParent.previousElementSibling != null){ | ||
| + | aParent.previousElementSibling.childNodes[0].setAttribute('aria-selected', 'false'); | ||
| + | } | ||
| + | |||
activeElem.setAttribute('aria-selected', 'true'); | activeElem.setAttribute('aria-selected', 'true'); | ||
activeElem.setAttribute('tabindex', '0'); | activeElem.setAttribute('tabindex', '0'); | ||
| Line 115: | Line 139: | ||
} | } | ||
| − | function setPanel( | + | function setPanel(activeElem){ |
var eID= activeElem.getAttribute('id').toString(); | var eID= activeElem.getAttribute('id').toString(); | ||
var pID= null; | var pID= null; | ||
Revision as of 13:46, 17 April 2014
ARIA Tabs and Tab Panels
Home Information
This is information regarding the home tab
Our Services and What we Do
This is information regarding the Services tab
General Information About Accessibility
This is information regarding the General tab
Who We Are
This is information regarding the About Us
Ways to Contact Us
This is information about the Contact us tab
