Tabbed Interface
Tab widget is used to display chunks of content in a limited amount of space. In a tabbed interface, ONLY the currently active tab content is displayed while the content of the other tabs is hidden.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
A tab widget is made of following:
- A tab list – has all the tab elements as its direct children.
- Tabs – associated with a tab panel.
- Tab panels – display content of the given tab.
By default, the currently selected tab receives the keyboard focus first and is visually and semantically identified as selected.
Tab widgets are generally placed horizontally but CAN be placed vertically as well.
Tabs CAN be implemented in two ways.
- Manual Activation: Tabs that display the content manually.
- Automatic Activation: Tabs that display the content instantly as soon as the element is traversed using arrow keys.
- The standard text used across the implementation of tabs MUST meet the color contrast ratio requirement of 4.5:1 with the background color in default, focused and hover state.
- The large text (18pts or 14pts and bold) used across the implementation of tabs MUST meet the color contrast ratio requirement of 3:1 with the background color in default, focused and hover state.
- The custom focus indicator if used MUST meet the color contrast ratio requirement of 3:1 with the background color.
- The contrast ratio requirement of 3:1 MUST be met with the adjacent colors for the user interface control in default, focused and hover state.
- The contrast ratio requirement of 3:1 MUST be met with the adjacent colors for the user interface control in default, focused and hover state.
-
The
role="tablist"MUST be specified to the container (ideally<div>element) that consists of all the tabs. -
An
aria-labelledbyattribute CAN be specified for tab list which references the value of id attribute of the visual text.-
In the absence of visual text, the
aria-labelattribute CAN be used.
-
In the absence of visual text, the
-
The orientation of tab widget CAN be set to
verticalorhorizontalusingaria-orientationattribute on the element that has been specified withrole="tablist". The default value is horizontal.
-
The
role="tab"MUST be specified on the elements that function as tab such as native HTML<button>element. - Unique
idattribute MUST be given for each tab. -
The
aria-selectedattribute MUST be specified on each tab where the value will be set totrueorfalse.- True – to inform the user about the active tab.
- False – for the inactive tabs.
-
An
aria-controlsattribute SHOULD be provided for each tab that conveys which tabpanel is controlled by the respective tab.-
The
aria-controlsattribute references the value ofidattribute provided for the container of the respective tabpanel content.
-
The
-
Visual cues MUST be present in the form of color along with bold or underlined text, an
icon, border and so on to convey the selected state of a tab.
- The visual cue that conveys selected information MUST meet the color contrast ratio requirement of 3:1 with the background color.
- Color alone SHOULD not be used to indicate the selected state for the tabs.
-
If a tab element has a popup menu,
aria-haspopupattribute CAN be provided by setting the value to eithermenuortrue.
- The tab panel containers MUST be defined with a
role="tabpanel". - Unique
idattribute MUST be given for each tabpanel -
An
aria-labelledbyattribute SHOULD be provided for tabpanel which references the value ofidattribute of the respective tab. -
The element containing the tabpanel content CAN be made focusable when there are no
interactive elements present within the tabpanel.
-
To make the tabpanel focusable, use
tabindex="0"to the element withrole="tabpanel".
-
To make the tabpanel focusable, use
-
The container with
role="tabpanel"SHOULD be assigned with native HTMLhiddenattribute when the associated tab is not active. Alternatively,display: noneproperty in CSS oraria-hidden="true"along withtabindex="-1"CAN also be used.
- The element with a
role="tab"SHOULD be a single tab stop. -
The roving tabindex technique MUST be used to properly manage focus. For more information,
refer to
Managing Focus Within Components Using a Roving tabindex .
-
When a tab is not in focused state,
tabindex="-1"SHOULD be specified on the tab. -
The first tab that initially needs to be focused SHOULD have a
tabindex="0"attribute. - Arrow keys SHOULD be used to traverse between different tabs.
- Enter or Space key SHOULD be used to activate the tabs in case of manual activation of tab implementation.
- The programmatic focus MUST remain on the tab itself.
-
When a tab is not in focused state,
A well-defined tabbed interface benefits majorly the below users.
- People with cognitive disabilities.
- People using speech input.
- People with limited dexterity.
- People using keyboard only.
- People using screen readers.
<div class="tab-container">
<div class="tab-list" role="tablist">
<button class="tab" id="pearson_pathways" role="tab" aria-controls="tabpanel1" aria-selected="true">
Pearson Pathways
</button>
<button class="tab" id="pearson_advance" role="tab" aria-controls="tabpanel2" aria-selected="false" tabindex="-1">
Pearson Advance
</button>
<button class="tab" id="it_training" role="tab" aria-controls="tabpanel3" aria-selected="false" tabindex="-1">
IT Training Courses
</button>
<button class="tab" id="degree" role="tab" aria-controls="tabpanel4" aria-selected="false" tabindex="-1">
Degree & certification
</button>
</div>
<div class="tab-panels">
<div id="tabpanel1" class="tab-panel" role="tabpanel" aria-labelledby="pearson_pathways">
<p>
A personalized online search engine and marketplace to help
learners compare programs, review customized recommendations,
and easily apply
</p>
<p>
Choosing a career in nursing means you never stop learning — you
can't deliver the highest-quality patient care if you
aren't up to date on the latest best practices. And with
an accredited online degree or certificate offered by one of our
partners, you can develop the clinical, technical, and
interpersonal skills to pursue new opportunities in this field.
Start exploring careers and programs and reach out if you need
support along the way.
</p>
<a href="//www.pearson.com/pathways/program-profiles.html" target="_blank">Browse Programs</a>
</div>
<div id="tabpanel2" class="tab-panel" role="tabpanel" aria-labelledby="pearson_advance">
<p>
Flexible online, self-paced short courses from the world's
leading universities designed to meet you where you are on your
professional journey and help advance your skill set. Choosing a
career in nursing means you never stop learning — you
can't deliver the highest-quality patient care if you
aren't up to date on the latest best practices. And with
an accredited online degree or certificate offered by one of our
partners, you can develop the clinical, technical, and
interpersonal skills to pursue new opportunities in this field.
Start exploring careers and programs and reach out if you need
support along the way.
</p>
<a href="//www.pearson.com/pathways/program-profiles.html" target="_blank">Browse Programs</a>
</div>
<div id="tabpanel3" class="tab-panel" role="tabpanel" aria-labelledby="it_training">
<p>
Comprehensive IT training library with videos on demand,
hands-on labs, and exclusive practice tests.
</p>
<p>
Whether you are a college student looking for your first job or
an experienced employee staying current with new technologies or
certifications, InformIT is Pearson's one-stop shop for
technology professionals looking for self-study resources
including releases from Addison-Wesley, Cisco Press, Microsoft
Press, Adobe Press, and more. A variety of formats from the most
influential technology experts will help you learn the way you
like:
</p>
<a href="//www.informit.com/pearsonitprofessional" target="_blank">Visit InformIT</a>
</div>
<div id="tabpanel4" class="tab-panel" role="tabpanel" aria-labelledby="degree">
<p>
Improve retention and competitiveness — flexibly, simply, and at
surprisingly low cost.
</p>
<p>
Leveraging our unique relationships with 40+ prestigious
non-profit universities and colleges — and our unsurpassed
resources as the world's learning company — you can make
the right education available to any qualified employee, and
tightly link education to career development. What's more,
you can do it at every level of your organization — from
<a href="//www.pearson.com/us/professional/products-services/degree-certification-programs/frontline-employees.html">frontline employees</a>
seeking education in order to advance, to
<a href="//www.pearson.com/us/professional/products-services/degree-certification-programs/high-potential-managers.html">high-potential managers</a>
who want flexible advanced degree options to accelerate their
career progress.
</p>
</div>
</div>
</div>
.tab-container {
border: 1px solid #ccc;
padding: 20px;
}
.tab-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.tab {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #f7f7f7;
border-radius: 5px 5px 0 0;
}
.tab:focus {
background-color: #e7e7e7;
}
.tab-panel {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.tab-panel:focus {
display: block;
}
.tab.active {
border-bottom: 2px solid #000;
background-color: #fff;
}
[role="tab"][aria-selected="true"] {
border-width: 2px;
border-top-width: 6px;
border-top-color: rgb(38 78 128);
background: hsl(220deg 43% 99%);
}
.active {
display: block !important;
}
let tabs = document.querySelectorAll('.tab');
let panels = document.querySelectorAll('.tab-panel');
function activateTab(index) {
tabs.forEach(tab => {
tab.setAttribute('aria-selected', 'false');
tab.setAttribute('tabindex','-1');
tab.classList.remove('active');
});
panels.forEach(panel => {
panel.setAttribute('aria-hidden', 'true');
panel.classList.remove('active');
panel.setAttribute('hidden','');
});
tabs[index].setAttribute('aria-selected', 'true');
tabs[index].removeAttribute('tabindex');
tabs[index].classList.add('active');
tabs[index].focus();
panels[index].setAttribute('aria-hidden', 'false');
panels[index].classList.add('active');
panels[index].removeAttribute('hidden');
}
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
activateTab(index);
});
});
document.addEventListener('keydown', event => {
if (event.code === 'ArrowLeft' && document.activeElement !== tabs[0]) {
let index = Array.from(tabs).indexOf(document.activeElement) - 1;
activateTab(index);
} else if (event.code === 'ArrowRight' && document.activeElement !== tabs[tabs.length - 1]) {
let index = Array.from(tabs).indexOf(document.activeElement) + 1;
activateTab(index);
} else if(event.code === 'ArrowLeft' && document.activeElement == tabs[0]) {
activateTab(3);
} else if(event.code === 'ArrowRight' && document.activeElement == tabs[3]) {
activateTab(0);
}
});
activateTab(0);
A personalized online search engine and marketplace to help learners compare programs, review customized recommendations, and easily apply
Choosing a career in nursing means you never stop learning — you can’t deliver the highest-quality patient care if you aren’t up-to-date on the latest best practices. And with an accredited online degree or certificate offered by one of our partners, you can develop the clinical, technical, and interpersonal skills to pursue new opportunities in this field. Start exploring careers and programs and reach out if you need support along the way.
Browse ProgramsFlexible online, self-paced short courses from the world’s leading universities designed to meet you where you are on your professional journey and help advance your skill set. Choosing a career in nursing means you never stop learning — you can’t deliver the highest-quality patient care if you aren’t up-to-date on the latest best practices. And with an accredited online degree or certificate offered by one of our partners, you can develop the clinical, technical, and interpersonal skills to pursue new opportunities in this field. Start exploring careers and programs and reach out if you need support along the way.
Browse ProgramsComprehensive IT training library with videos on demand, hands-on labs, and exclusive practice tests.
Whether you are a college student looking for your first job or an experienced employee staying current with new technologies or certifications, InformIT is Pearson’s one-stop shop for technology professionals looking for self-study resources including releases from Addison-Wesley, Cisco Press, Microsoft Press, Adobe Press, and more. A variety of formats from the most influential technology experts will help you learn the way you like:
Visit InformITImprove retention and competitiveness — flexibly, simply, and at surprisingly low cost.
Leveraging our unique relationships with 40+ prestigious non-profit universities and colleges — and our unsurpassed resources as the world’s learning company — you can make the right education available to any qualified employee, and tightly link education to career development. What’s more, you can do it at every level of your organization — from frontline employees seeking education in order to advance, to high-potential managers who want flexible advanced degree options to accelerate their career progress.
<div class="tab-container">
<div class="tab-list" role="tablist">
<button class="tab" id="pearson_pathways" role="tab" aria-controls="tabpanel1" aria-selected="true">
Pearson Pathways
</button>
<button class="tab" id="pearson_advance" role="tab" aria-controls="tabpanel2" aria-selected="false" tabindex="-1">
Pearson Advance
</button>
<button class="tab" id="it_training" role="tab" aria-controls="tabpanel3" aria-selected="false" tabindex="-1">
IT Training Courses
</button>
<button class="tab" id="degree" role="tab" aria-controls="tabpanel4" aria-selected="false" tabindex="-1">
Degree & certification
</button>
</div>
<div class="tab-panels">
<div id="tabpanel1" class="tab-panel active" role="tabpanel" aria-describedby="pearson_pathways">
<p>
A personalized online search engine and marketplace to help
learners compare programs, review customized recommendations,
and easily apply
</p>
<p>
Choosing a career in nursing means you never stop learning — you
can't deliver the highest-quality patient care if you
aren't up to date on the latest best practices. And with
an accredited online degree or certificate offered by one of our
partners, you can develop the clinical, technical, and
interpersonal skills to pursue new opportunities in this field.
Start exploring careers and programs and reach out if you need
support along the way.
</p>
<a href="https://www.pearson.com/pathways/program-profiles.html" target="_blank">Browse Programs</a>
</div>
<div id="tabpanel2" class="tab-panel" role="tabpanel" aria-describedby="pearson_advance" aria-hidden="true" hidden>
<p>
Flexible online, self-paced short courses from the world's
leading universities designed to meet you where you are on your
professional journey and help advance your skill set. Choosing a
career in nursing means you never stop learning — you
can't deliver the highest-quality patient care if you
aren't up to date on the latest best practices. And with
an accredited online degree or certificate offered by one of our
partners, you can develop the clinical, technical, and
interpersonal skills to pursue new opportunities in this field.
Start exploring careers and programs and reach out if you need
support along the way.
</p>
<a href="https://www.pearson.com/pathways/program-profiles.html" target="_blank">Browse Programs</a>
</div>
<div id="tabpanel3" class="tab-panel" role="tabpanel" aria-describedby="it_training" aria-hidden="true" hidden>
<p>
Comprehensive IT training library with videos on demand,
hands-on labs, and exclusive practice tests.
</p>
<p>
Whether you are a college student looking for your first job or
an experienced employee staying current with new technologies or
certifications, InformIT is Pearson's one-stop shop for
technology professionals looking for self-study resources
including releases from Addison-Wesley, Cisco Press, Microsoft
Press, Adobe Press, and more. A variety of formats from the most
influential technology experts will help you learn the way you
like:
</p>
<a href="https://www.informit.com/pearsonitprofessional" target="_blank">Visit InformIT</a>
</div>
<div id="tabpanel4" class="tab-panel" role="tabpanel" aria-describedby="degree" aria-hidden="true" hidden>
<p>
Improve retention and competitiveness — flexibly, simply, and at
surprisingly low cost.
</p>
<p>
Leveraging our unique relationships with 40+ prestigious
non-profit universities and colleges — and our unsurpassed
resources as the world's learning company — you can make
the right education available to any qualified employee, and
tightly link education to career development. What's more,
you can do it at every level of your organization — from
<a href="#">frontline employees</a> seeking education in order
to advance, to <a href="#">high-potential managers</a> who want
flexible advanced degree options to accelerate their career
progress.
</p>
</div>
</div>
</div>
.tab-container {
border: 1px solid #ccc;
padding: 20px;
}
.tab-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.tab {
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #f7f7f7;
border-radius: 5px 5px 0 0;
}
.tab:focus {
background-color: #e7e7e7;
}
.tab-panel {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.tab-panel:focus {
display: block;
}
.tab.active {
border-bottom: 2px solid #000;
background-color: #fff;
}
[role="tab"][aria-selected="true"] {
border-width: 2px;
border-top-width: 6px;
border-top-color: rgb(38 78 128);
background: hsl(220deg 43% 99%);
}
.active {
display: block !important;
}
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', (e) => {
let manualtab = document.querySelectorAll('.tab');
manualtab.forEach(mtab => {
mtab.setAttribute('aria-selected','false');
mtab.setAttribute('tabindex','-1')
});
const panels = document.querySelectorAll('.tab-panel');
panels.forEach(panel => {
panel.setAttribute('aria-hidden','true');
panel.setAttribute('hidden','');
panel.classList.remove('active');
});
const tabPanelId = tab.getAttribute('aria-controls');
const tabPanel = document.getElementById(tabPanelId);
tabPanel.removeAttribute('hidden');
tabPanel.setAttribute('aria-hidden','false');
tabPanel.classList.add('active');
tab.setAttribute('aria-selected','true')
tab.removeAttribute('tabindex')
});
tab.addEventListener('keydown', event => {
const key = event.key;
if (key === 'Enter' || key === ' ') {
event.preventDefault();
tab.click();
}
if (key === 'ArrowLeft' && document.activeElement !== tabs[0]) {
const index = Array.from(tabs).indexOf(document.activeElement) - 1;
tabs[index].focus();
} else if (key === 'ArrowRight' && document.activeElement !== tabs[tabs.length - 1]) {
const index = Array.from(tabs).indexOf(document.activeElement) + 1;
tabs[index].focus();
}
});
});
A personalized online search engine and marketplace to help learners compare programs, review customized recommendations, and easily apply
Choosing a career in nursing means you never stop learning — you can’t deliver the highest-quality patient care if you aren’t up to date on the latest best practices. And with an accredited online degree or certificate offered by one of our partners, you can develop the clinical, technical, and interpersonal skills to pursue new opportunities in this field. Start exploring careers and programs and reach out if you need support along the way.
Browse ProgramsFlexible online, self-paced short courses from the world’s leading universities designed to meet you where you are on your professional journey and help advance your skill set. Choosing a career in nursing means you never stop learning — you can’t deliver the highest-quality patient care if you aren’t up to date on the latest best practices. And with an accredited online degree or certificate offered by one of our partners, you can develop the clinical, technical, and interpersonal skills to pursue new opportunities in this field. Start exploring careers and programs and reach out if you need support along the way.
Browse ProgramsComprehensive IT training library with videos on demand, hands-on labs, and exclusive practice tests.
Whether you are a college student looking for your first job or an experienced employee staying current with new technologies or certifications, InformIT is Pearson’s one-stop shop for technology professionals looking for self-study resources including releases from Addison-Wesley, Cisco Press, Microsoft Press, Adobe Press, and more. A variety of formats from the most influential technology experts will help you learn the way you like:
Visit InformITImprove retention and competitiveness — flexibly, simply, and at surprisingly low cost.
Leveraging our unique relationships with 40+ prestigious non-profit universities and colleges — and our unsurpassed resources as the world’s learning company — you can make the right education available to any qualified employee, and tightly link education to career development. What’s more, you can do it at every level of your organization — from front-line employees seeking education in order to advance, to high-potential managers who want flexible advanced degree options to accelerate their career progress.