I’m building an accordion based on this code, as it looked good in terms of accessibility.
I wanted the transition between showing a section and hiding a section of the accordion to be animated and have changed the code slightly. My issue then was that the clicked button would be pushed up and disappear from view as the content grew. I found an explanation and chose a solution, but I’m wondering if this is the best solution accessibility-wise?
I found an explanation for my issue in this post:
The page is keeping the currently active element in view – i.e. the button that you clicked on – so the extra height will appear to move up or down depending on where the button is in relation to the screen.
I’m using the solution provided to keep the page from scrolling, as that seemed best accessibility-wise, but there’s another answer that suggests blurring the element. However, wouldn’t blurring it affect how a screen reader interacts with the button?
I was wondering if someone could help me clarify what’s best for accessibility in this case.
This is my code, for reference:
document.addEventListener("DOMContentLoaded", function() {
// create an array of all buttons in accordion
const accordionButtons = document.querySelectorAll(".eqd-accordion__button");
accordionButtons.forEach(button => {
const contentId = button.getAttribute("aria-controls");
const content = document.getElementById(contentId);
const contentHeight = document.getElementById(contentId + "-height").offsetHeight;
// check if an accordion section is expanded
const isExpanded = button.getAttribute("aria-expanded") === "true";
if(isExpanded) {
// set height of visible section
content.style.visibility = "visible";
content.style.height = contentHeight + "px";
} else {
// Collapse accordions that have aria-expanded false attr
const contentToHide = document.getElementById(button.getAttribute("aria-controls"));
if (contentToHide) {
contentToHide.style.height = "0";
contentToHide.style.visibility = "hidden";
}
}
// add an onclick event to each button
button.addEventListener("click", function() {
// on click
// check if an accordion section is expanded
const isExpanded = button.getAttribute("aria-expanded") === "true";
// Collapse ALL accordions
accordionButtons.forEach(btn => {
// click event listener tracks which button I've clicked & I can get the corresponding content via ID by passing my aria-controls attribute
const contentToHide = document.getElementById(btn.getAttribute("aria-controls"));
btn.setAttribute("aria-expanded", "false");
if (contentToHide) {
contentToHide.style.height = "0";
contentToHide.style.visibility = "hidden";
}
});
// If the clicked accordion was not expanded, expand it
if (!isExpanded) {
button.setAttribute("aria-expanded", "true");
content.style.visibility = "visible";
content.style.height = contentHeight + "px";
const pagePosBeforeExpand = window.scrollY;
window.scrollTo({ top: pagePosBeforeExpand });
}
});
});
});
This is the live example: https://www.becky-matthews.com/content-writing/