Skip to content

Instantly share code, notes, and snippets.

@neodigm
Last active December 5, 2025 15:50
Show Gist options
  • Select an option

  • Save neodigm/bf64202df7ff854c910977eb1f2515a0 to your computer and use it in GitHub Desktop.

Select an option

Save neodigm/bf64202df7ff854c910977eb1f2515a0 to your computer and use it in GitHub Desktop.
Flick Carousel ARIA-HIDDEN observer
class FlickPatch { // Flick Carousel ARIA-HIDDEN observer
constructor(_d, _sQ) { // πŸŒ‘πŸŒ’πŸŒ“πŸŒ”πŸŒ•πŸŒ–πŸŒ—πŸŒ˜πŸŒ‘
this._d = _d; this._sQ = _sQ;
this.aF = []; this.aObs = [];
}
init() {
this.aF = Array.from( this._d.querySelectorAll( this._sQ ))
if( this.aF.length ){
this.aObs = []
this.aF.forEach( ( eF )=>{
const oObs = new MutationObserver( flickPatch.removeAttr );
oObs.observe( eF, { attributes: true, childList: true, subtree: true } );
this.aObs.push( oObs )
})
}
return this;
}
removeAttr( aObs ){ //
if( aObs.length ){
aObs.forEach( ( elO )=>{
if( elO?.target ){
[ ... elO.target.querySelectorAll( "[aria-hidden='true']" )].forEach( ( eH )=>{
eH.removeAttribute("aria-hidden")
})
}
})
}
}
}
//. Usage
let flickPatch = {}
document.addEventListener("DOMContentLoaded", ( ev )=>{
setTimeout( ()=>{
flickPatch = new FlickPatch( document, ".flickity-slider" )
flickPatch.init()
}, 8e3 )
})
@TJPar
Copy link

TJPar commented Mar 27, 2024

You're right. Ironically, by employing this technique to attain a 100 accessibility score in Lighthouse, it becomes less accessible. I had hoped for reduced scripting. Thanks for taking the time to review my approach and provide feedback; I'll incorporate neodigm's method with your modifications.

@asoderberg
Copy link

@GLips I am having the same aria-hidden accessibility fail reported for our flip-cards powered by the Flickity carousel. Would you mind telling me how to use/install your patch on the page? Is it added as a stand alone script after fickity js is loaded? Or is it added somewhere within the Flickity javascript? Our example use page can be seen here: https://www.easternflorida.edu/financial-aid/index.php The four blue boxes in the 'Types of Financial Aid' section of this page is what uses the Flickity carousel. I am not great with Javascript. Any help would be greatly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment