Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Nice example but you have made things hard for yourself and forgotten about accessibility.
Why not start with the correct HTML elements to make life easy?
The <summary> and <details> elements are designed for this and work without JS reasonably well.
If you don't support Internet Explorer anymore they are fully supported (and they fall back gracefully anyway in IE)
You can then improve that functionality with JS.
As it stands your accordion is not accessible for people who use a screen reader as I mentioned.
You need to add aria-expanded when a section is open, aria-controls to point to the section that the button is related to, you need to add loads of keyboard controls such as down arrow to jump to the next accordion header, Home to jump to the first header and about 4 other things!
As you can see there is loads to think about, so let HTML take care of some of it for you so you only have to implement the arrow keys, home key etc.
Anyway, not meaning to bash your article in any way, it was clear and well written so have a ❤🦄!
Thanks for pointing that out. 🙏 I really forgot about accessibility because I might be too concerned about doing it the way netflix has done it. I will try to edit or might as well write another article to improve the accessibility.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice example but you have made things hard for yourself and forgotten about accessibility.
Why not start with the correct HTML elements to make life easy?
The <summary> and <details> elements are designed for this and work without JS reasonably well.
If you don't support Internet Explorer anymore they are fully supported (and they fall back gracefully anyway in IE)
You can then improve that functionality with JS.
As it stands your accordion is not accessible for people who use a screen reader as I mentioned.
You need to add
aria-expandedwhen a section is open,aria-controlsto point to the section that the button is related to, you need to add loads of keyboard controls such as down arrow to jump to the next accordion header, Home to jump to the first header and about 4 other things!As you can see there is loads to think about, so let HTML take care of some of it for you so you only have to implement the arrow keys, home key etc.
Anyway, not meaning to bash your article in any way, it was clear and well written so have a ❤🦄!
Thanks for pointing that out. 🙏 I really forgot about accessibility because I might be too concerned about doing it the way netflix has done it. I will try to edit or might as well write another article to improve the accessibility.