How to make a fully accessible Tab Control using AccDC! Here's one way to do it. Say you have an html file named Home.html, and the following three links are included: Tab Page 1 Tab Page 2 Tab Page 3 Plus a container tag like so:
Now, in another file on your server at 'files/tabs.html' you include the html syntax like so:
Here is my content for tab 1.
Here is my content for tab 2.
Here is my content for tab 3.
Then in your JavaScript file, you have the following code: // Instantiate an array of AccDC Objects $A([ // Obj1 { // A unique ID for the object id: 'tab1', // A descriptive role role: 'Settings Tab', // Open this tab first when the page loads autoStart: true, // Specify the triggering element, an A tag with both classes 'tab' and 'page1' trigger: 'a.tab.page1', // Point to the file containing the tabs, and the ID attribute of the correct tab container source: 'files/tabs.html #tabContent1', // Run optional script after loading completes to setup additional handlers and stuff runAfter: function(dc){ // 'dc' is the current AccDC Object instance ('this' in other words) // e.g. dc.role will return 'Settings Tab' // Do stuff... } }, // Obj2 { id: 'tab2', role: 'Help Tab', trigger: 'a.tab.page2', source: 'files/tabs.html #tabContent2', }, // Obj3 { id: 'tab3', role: 'About Tab', trigger: 'a.tab.page3', source: 'files/tabs.html #tabContent3', } ], { // Now set shared parameters to be merged with all above AccDC Objects // Set the triggering element event handler bind: 'click', // Set the container where tab content will be loaded into isStatic: '#tabContent', // Declare that all above objects are tab controls isTab: true, // Set the rendering mode to 1 so that content will be loaded from an external file. mode: 1, // Prevent the tab from being closed by screen reader users via a hidden close link showHiddenClose: false, // Set forceFocus to true to move keyboard focus to the beginning of new content when loaded, // or false to leave focus on the triggering element. forceFocus: true, }, true); // The true parameter in the last argument sets AccDC to wait until the page fully loads before registering all of these objects. So this will 1) register all of the click event handlers for the triggering elements, 2) add hidden role and state information within each triggering link to indicate the role of 'Tab' and 'Selected' when a tab is open for screen reader users (which can be changed programmatically for localization as desired), 3) add an 'href' attribute to all of the triggering links to ensure keyboard accessibility (since it's missing on purpose), 4) load content into the page from each tab when the triggering element is clicked, and 5) set focus appropriately based on the desired setting. This is just a simple example using external files. You could do the same thing using hidden tab content within the same file (Home.html), by doing the following: Say you have three hidden tags at the bottom of the file Home.html like so: Then you just change the 'mode' parameter in the previous example from 1 to 0, and then change the 'source' parameter like so for each AccDC Object declaration: // For tab1, using $A.query source: $A.query('div.hidden.tabContent1 > *')[0], // For tab2, using the ID attribute instead source: document.getElementById('tab2').innerHTML, // For tab3, using $A.query and the ID attribute instead source: $A.query('#tab3')[0].innerHTML, Any of which will work, you just need to put the inline code version within a Window load handler so it can find the right tags at runtime. Plus you can add inline scripting as well, within the tab source code or within the AccDC Object using flow controlled script methods like runBefore, runDuring, runAfter, and so on; whatever you like. And that's it; you will then have Tab Controls that are automatically accessible to screen reader and keyboard only users! It's really easy after you wrap your brain around the AccDC object model. What's really cool, is that you can dynamically create AccDC Objects such as these at runtime, so you can create advanced controls like this without having to use hard coded HTML markup; you just use Core DOM Manipulation! ( http://www.quirksmode.org/dom/w3c_core.html )