I’m currently focusing on accessibility for the sidebar I made for an App. It behaves as a “slide-out” meaning the content is still inside the dom, even when the sidebar is not visible. To ensure SR will not go through the sidebar when it’s closed, I added a aria-hidden. Now, while adding aria-controls and aria-expanded to the button, i noticed this in the chrome DevTools (Elements > Accessibility):
As the sidebar is aria-hiddened, the controls attribute is not linking correctly (which makes sense)
Following this logic, it links well when the sidebar is opened
Is this a problem ? This missing link is worrying me.
If so, how should I fix this ?
Here’s a demo of what i have (excuse the poor code, it’s just for demo purpuse)
const control = document.querySelector("#control")
control.addEventListener('click', () => {
const aside = document.querySelector("#sidebar")
let isSidebarHidden = aside.getAttribute('aria-hidden') === 'true'
aside.setAttribute("aria-hidden", !isSidebarHidden);
aside.classList.toggle("hidden")
control.setAttribute("aria-expanded", isSidebarHidden)
control.innerText = isSidebarHidden ? "close sidebar" : "Open sidebar"
})aside {
height: 100px;
background: lightblue;
}
body {
display: flex;
}
.hidden {
visibility: hidden;
}<body>
<aside aria-hidden="false" id="sidebar">
<div>Here comes the sidebar</div>
</aside>
<main>
<button id="control" aria-controls="sidebar" aria-expanded="true">
close sidebar
</button>
</main>
<body>