TabPanel Accessibility

The TabPanel implements WAI-ARIA accessibility guidelines. All tab elements have the proper role attributes as well as all applicable ARIA attributes.

The example below assigns unique IDs to the tab headers and panes, which the TabPanel automatically uses to generate "aria-controls" and "aria-labelledby" attributes.

The example also adds a "wj-state-active" class to the "America" pane in markup to define the tab that is initially selected. Without that, the first tab would have been selected by default.

Finally, the example shows the effect of the autoSwitch property, which affects how the control handles the tab and cursor keys. For a detailed discussion of this topic, please see the W3C ARIA practices and SimplyAccessible articles.

Africa America Asia Europe Oceania

Algeria
Angola
Benin
Botswana

Canada
Chile
Mexico
United States

China
Korea
India
Japan

Austria
England
France
Germany
Netherlands
Switzerland

Australia
Fiji
New Zealand
Samoa

autoSwitch

// This file locates: "Scripts/Lesson/C1Nav/TabPanelAccessibility.js".
c1.documentReady(function () {
    var theTabPanel = wijmo.Control.getControl('#rtlTabPanel');
 
    // toggle autoSwitch property
    document.getElementById('autoSwitch').addEventListener('click', function (e) {
        theTabPanel.autoSwitch = e.target.checked;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult TabPanelAccessibility()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.TabPanelAccessibility_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelAccessibility_Text1)
     
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelAccessibility_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelAccessibility_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.TabPanelAccessibility_Text4)
</p>
 
<div id="rtlTabPanel">
    <div>
        <a id="hdr-africa">
            Africa
        </a>
        <div id="pane-africa">
            <ul>
                <li>Algeria</li>
                <li>Angola</li>
                <li>Benin</li>
                <li>Botswana</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-america" class="wj-state-active">
            America
        </a>
        <div id="pane-america">
            <ul>
                <li>Canada</li>
                <li>Chile</li>
                <li>Mexico</li>
                <li>United States</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-asia">
            Asia
        </a>
        <div id="pane-asia">
            <ul>
                <li>China</li>
                <li>Korea</li>
                <li>India</li>
                <li>Japan</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-europe">
            Europe
        </a>
        <div id="pane-europe">
            <ul>
                <li>Austria</li>
                <li>England</li>
                <li>France</li>
                <li>Germany</li>
                <li>Netherlands</li>
                <li>Switzerland</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-oceania">
            Oceania
        </a>
        <div id="pane-oceania">
            <ul>
                <li>Australia</li>
                <li>Fiji</li>
                <li>New Zealand</li>
                <li>Samoa</li>
            </ul>
        </div>
    </div>
</div>
@Html.C1().TabPanel("#rtlTabPanel")
 
<div class="options">
    <label for="autoSwitch">
        autoSwitch
    </label>
    <input id="autoSwitch" type="checkbox" checked="checked">
</div>