YUI Library Examples: Focus Manager Node Plugin: Accessible TabView

+ +

Focus Manager Node Plugin: Accessible TabView

+ + + +

Setting Up the HTML

+The tabs in the tabview widget will be represented by a list of +<a> elements whose href attribute is set to +the id of an <div> element that contains its content. +Therefore, without JavaScript and CSS, the tabs function as in-page links. +

+<h3 id="tabview-heading">Today's News</h3>
+<div id="tabview-1" class="yui-tabview">
+    <ul>
+        <li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
+        <li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
+        <li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
+        <li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
+        <li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>		
+    </ul>            
+    <div>
+        <div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
+			
+        </div>
+        <div class="yui-tabpanel" id="world-news">
+			
+        </div>
+        <div class="yui-tabpanel" id="entertainment-news">
+			
+        </div>
+        <div class="yui-tabpanel" id="sports-news">
+				        	
+        </div>
+        <div class="yui-tabpanel" id="technology-news">
+			        	
+        </div>			
+    </div>
+</div>
+

+For this example the content of each tab panel is created on the server using +the YQL API to fetch the title and +URL for news stories made available from the various +Yahoo! News RSS feeds. +Here's the PHP: +

+ + +

Progressive Enhancement

+The markup above will be transformed into a tabview widget using both CSS and +JavaScript. To account for the scenario where the user has CSS enabled in +their browser but JavaScript is disabled, the CSS used to style the tabview +will be loaded via JavaScript using the +built-in loader of the YUI Global Object. +Additionally, JavaScript will be used to temporarily hide the tabview markup +while the JavaScript and CSS are in the process of loading to prevent the user +from seeing a flash unstyled content. +

+ + +

ARIA Support

+Through the use of CSS and JavaScript the HTML for the tabview can be +transformed into something that looks and behaves like a desktop tab control, +but users of screen readers won't perceive it as an atomic widget, but rather +simply as a set of HTML elements. However, through the application +of the +WAI-ARIA Roles and States, it is +possible to improve the semantics of the markup such that users of screen +readers perceive it as a tab control. +

+ + +

Keyboard Functionality

+The keyboard functionality for the tabview widget will be provided by the +Focus Manager Node Plugin. The Focus Manager's +descendants +attribute is set to a value of ".yui-tab>a", so that only one tab in the tabview +is in the browser's default tab flow. This allows users navigating via the +keyboard to use the tab key to quickly move into and out of the tabview. Once +the tabview has focus, the user can move focus among each tab using the left +and right arrows keys, as defined by the value of the +keys +attribute. Lastly, the +focusClass +attribute is used to apply a class of yui-tab-focus to the parent +<li> of each <a> when it is focused, +making it easy to style the tab's focused state in each of the +A-Grade browsers. ++// Add a class to the documentElement to prevent the user from seeing +// the unstyled menu while the necessary CSS and JavaScript +// dependancies are being fetched. + +document.documentElement.className = "yui-loading"; + +YUI({ + + base: "../../build/", + modules: { + "tabview-css": { + type: "css", + fullpath: "assets/tabview.css" + } + }, + timeout: 10000 + + }).use("tabview-css", "node-focusmanager", "node-event-simulate", function(Y) { + + + var tabView = Y.Node.get("#tabview-1"), + tabList = tabView.query("ul"), + tabHeading = Y.Node.get("#tabview-heading"), + sInstructionalText = tabHeading.get("innerHTML"); + selectedTabAnchor = tabView.query(".yui-tab-selected>a"), + bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1), + panelMap = {}; + + + // Remove the "yui-loading" class from the documentElement + // now that the necessary YUI dependencies are loaded. + + tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading"); + + + // Apply the ARIA roles, states and properties. + + // Add some instructional text to the heading that will be read by + // the screen reader when the first tab in the tabview is focused. + + tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>")); + tabList.set("aria-labelledby", "tabview-heading"); + + tabList.set("role", "tablist"); + tabView.query("div").set("role", "presentation"); + + + tabView.plug(Y.Plugin.NodeFocusManager, { + descendants: ".yui-tab>a", + keys: { next: "down:39", // Right arrow + previous: "down:37" }, // Left arrow + focusClass: { + className: "yui-tab-focus", + fn: function (node) { + return node.get("parentNode"); + } + }, + circular: true + }); + + + // If the list of tabs loses focus, set the activeDescendant + // attribute to the currently selected tab. + + tabView.focusManager.after("focusedChange", function (event) { + + if (!event.newVal) { // The list of tabs has lost focus + this.set("activeDescendant", selectedTabAnchor); + } + + }); + + + tabView.queryAll(".yui-tab>a").each(function (anchor) { + + var sHref = anchor.getAttribute("href", 2), + sPanelID = sHref.substring(1, sHref.length), + panel; + + // Apply the ARIA roles, states and properties to each tab + + anchor.set("role", "tab"); + anchor.get("parentNode").set("role", "presentation"); + + + // Remove the "href" attribute from the anchor element to + // prevent JAWS and NVDA from reading the value of the "href" + // attribute when the anchor is focused + + if (bGeckoIEWin) { + anchor.removeAttribute("href"); + } + + // Cache a reference to id of the tab's corresponding panel + // element so that it can be made visible when the tab + // is clicked. + panelMap[anchor.get("id")] = sPanelID; + + + // Apply the ARIA roles, states and properties to each panel + + panel = Y.Node.get(("#" + sPanelID)); + + panel.setAttrs({ + role: "tabpanel", + "aria-labelledby": anchor.get("id") + }); + + }); + + + // Use the "delegate" custom event to listen for the "click" event + // of each tab's <A> element. + + Y.on("delegate", function (event) { + + var selectedPanel, + oTarget = event.currentTarget, + sID = oTarget.get("id"); + + // Deselect the currently selected tab and hide its + // corresponding panel. + + if (selectedTabAnchor) { + selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected"); + Y.Node.get(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected"); + } + + selectedTabAnchor = oTarget; + selectedTabAnchor.get("parentNode").addClass("yui-tab-selected"); + + selectedPanel = Y.Node.get(("#" + panelMap[sID])); + selectedPanel.addClass("yui-tabpanel-selected"); + + creatingPaging(selectedPanel); + + // Prevent the browser from following the URL specified by the + // anchor's "href" attribute when clicked. + + event.preventDefault(); + + }, tabView, "click", ".yui-tab>a"); + + + // Since the anchor's "href" attribute has been removed, the + // element will not fire the click event in Firefox when the + // user presses the enter key. To fix this, dispatch the + // "click" event to the anchor when the user presses the + // enter key. + + if (bGeckoIEWin) { + + Y.on("delegate", function (event) { + + if (event.charCode === 13) { + event.currentTarget.simulate("click"); + } + + }, "#tabview-1", "keydown", ">ul>li>a"); + + } + +}); + + + +

Accessibility Sugar

+One of the challenges faced by users of screen readers is knowing when you've +left the context of a given control. In the case of this tabview, if it +were adjacent to another ARIA-enabled widget, the user would know they've +left the tabview when the screen reader announces the role of the adjacent +widget. However, if the tabview is sitting alongside standard HTML content, it +would be really difficult for the user to know when they've left the context of +the active panel. +

+One solution to this problem is to add some additional navigation as the last +child of each tab panel that allows the user to move to the previous and next +panel in the tabview. This will not only help alert users of screen readers +that they've reached the end of the tab's panel, but allow all +keyboard users to move more quickly to the next/previous panel. Without this +additionally navigation, keyboard users would typically have to press +shift+tab to navigate back up to the list of tabs to move to the next/previous +tab. +

+var creatingPaging = function (panel) {
+
+	var listitem,
+		sHTML,
+		paging;
+
+	if (!panel.query(".paging")) {
+
+		listitem = selectedTabAnchor.get("parentNode");
+		sHTML = "";
+	
+		if (listitem.previous()) {
+			sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
+		}
+	
+		if (listitem.next()) {
+			sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
+		}
+
+		paging = Y.Node.create('<div class="paging">' + sHTML + '</div>');
+	
+		panel.appendChild(paging);
+	
+	}
+	
+};
+
+creatingPaging(Y.Node.get(".yui-tabpanel-selected"));
+
+
+Y.on("delegate", function (event) {
+
+	var node = selectedTabAnchor.get("parentNode").previous().query("a");
+
+	tabView.focusManager.focus(node);
+	node.simulate("click");
+
+}, tabView, "click", ".yui-tabview-prevbtn");
+
+
+Y.on("delegate", function (event) {
+
+	var node = selectedTabAnchor.get("parentNode").next().query("a");
+
+	tabView.focusManager.focus(node);
+	node.simulate("click");
+
+}, tabView, "click", ".yui-tabview-nextbtn");
+

YUI Library Examples: Focus Manager Node Plugin: Accessible TabView

Focus Manager Node Plugin: Accessible TabView

Setting Up the HTML

Progressive Enhancement

ARIA Support

Keyboard Functionality

Accessibility Sugar

+ Focus Manager Node Plugin Examples:

More Focus Manager Node Plugin Resources:

YUI Library Examples: Focus Manager Node Plugin: Accessible TabView

Focus Manager Node Plugin: Accessible TabView

Today's News

Top Stories

World News

Entertainment News

Sports News

Technology News

Setting Up the HTML

Progressive Enhancement

ARIA Support

Keyboard Functionality

Accessibility Sugar

+ Focus Manager Node Plugin Examples:

More Focus Manager Node Plugin Resources: