Accordions—also known as sliders—are common design elements used to organize large sections of content into areas that expand and collapse. Accordions are effective in making the user feel less overwhelmed, as they can choose what sections to read by opening them.
Accordions may be implemented using the <details> and <summary> HTML5 tags, by combining HTML and CSS, or by combining HTML, CSS, and Javascript. Regardless of the implementation, some additional Javascript is required to make accordions accessible.
It is up to the programmer to ensure that the necessary CSS or Javascript is written to make accordions look good and function correctly. This documentation focuses on making accordions accessible.
HTML Implementation
There are multiple ways to implement accordions. The following examples are viable options, but there are other possible methods of implementation. We do not recommend using the <details> and <summary> HTML5 tags until they are able to interact with screen readers.
Buttons
The following code example for a single accordion uses <button>s to trigger accordion content. Buttons are natively able to interact with screen readers and are automatically added to the tabbing index for keyboard users.
<div class="accordion">
<button>My Accordion Title</button>
<div class="content">
<p>The accordion content goes here. It may be very long</p>
</div>
</div>
DIVs
The following code example for a single accordion uses <div>s to trigger accordion content. The role="button" attribute is necessary to allow screen readers to interact with the accordion. The attribute is necessary in order to add the accordion to the tabbing index for keyboard users.
<div class="accordion" role="button" >
<div class="title">My Accordion Title</div>
<div class="content">
<p>The accordion content goes here. It may be very long</p>
</div>
</div>
Javascript Implementation
Once the HTML is structured, the accordions must be made fully accessible. Some additional Javascript is necessary to make sure the accordions can be opened and closed with a keyboard and with a screen reader.
Keyboard Accessibility
Users should now be able to tab onto the accordions, but the accordions must also open and close via keyboard commands. The following code is a general example of how this can be accomplished. We recommend adding functionality for the following keyboard presses:
- Up arrow
- Down arrow
- Space bar
- Enter key
- End key
- Home key
Please note that the programmer will need to develop additional Javascript to execute the appropriate actions based on the specific key pressed.
// This function captures any keyboard presses while an accordion is in focus (tabbed
to by a keyboard user)
$('.accordion').keydown(function(event) {
var keyCode = event.which; // Capture which key was pressed
switch(keyCode){
case 38:
// The up arrow was pressed
// If the focused accordion is open, you should close it now
event.preventDefault(); // prevent the page from scrolling
break;
case 40:
// The down key was pressed
// If the focused accordion is closed, you should open it now
event.preventDefault(); // prevent the page from scrolling
break;
case 13: case 32:
// Either the enter key or space bar was pressed
// You should toggle the focused accordion.
// If it is open, close it now; if it is closed, open it now.
event.preventDefault(); // Prevent the page from scrolling
break;
case 35:
// The end key was pressed
// You should move focus to the last accordion on the page now
event.preventDefault(); // Prevent the page from scrolling
break;
case 36:
// The home key was pressed
// You should move focus to the first accordion on the page now
event.preventDefault(); // Prevent the page from scrolling
break;
default:
// A key was pressed, but it is not actionable
}
});
Screen Reader Accessibility
We need to make sure the accordions open and close via screen reader commands. To help facilitate this, we need to let screen readers know if each accordion is open or closed. Each accordion must start with an accurate aria-expanded attribute.
<button class="accordion" aria-expanded="false">
<div class="title">My Accordion Title</div>
<div class="content">
<p>The accordion content goes here. It may be very long</p>
</div>
</div>
Use aria-expanded="false" if the accordion is closed. Use aria-expanded="true" if the accordion is opened. You can set the default value through your CMS or by hand. You can also set the initial value via Javascript. In our example, we are assuming that all accordions are closed by default.
// Once DOM is ready, run accordion function
$(document).ready(function() {
// Identify each accordion and set aria-expanded attribute
$('.accordion').each(function() {
$(this).attr('aria-expanded','false');
});
});
As the user interacts with the various accordions, use Javascript to update the aria-expanded attribute. Mouse and screen reader users will interact with the accordions via click and keyboard users will interact with accordions via keystroke.
Create a Javascript function to toggle the ARIA values and remember to call it no matter how your users interact with your accordions. Your toggling function may look something like this:
function toggleARIA(activeAccordion){
if(activeAccordion.attr('aria-expanded')=='false'){
activeAccordion.attr('aria-expanded','true'); // Toggle aria-expanded
}
else{
activeAccordion.attr('aria-expanded','false'); // Toggle aria-expanded
}
}
Testing
Once all code upgrades are implemented, make sure to test the accordions using all three methods— your mouse, your keyboard, and via a screen reader. You should be able to open and close each and every accordion easily, regardless of the method.
Learn More
To learn more about the principles of making accordions accessible:
Modern Campus CMS
University Marketing and Communications has assured that all widgets exhibiting accordion behavior (sliders and FAQs) are automatically fully accessible.
To learn more about creating accordions: