Vanza Setiaโข 27,855
@vanzasetia
Posted
๐ Hi Danilo!
๐ Congratulations on finishing your first JavaScript challenge! I have some feedback on this solution:
- Accessibility
- Currently, the accordions are not accessible with keyboard and screen reader. I would recommend using
details
andsummary
tags instead ofdiv
. - Keep in mind that, any elements that have
:hover
or:active
states are commonly interactive elements (button
,details
,input
,a
, etc). - Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (Tab
) easily. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
- Currently, the accordions are not accessible with keyboard and screen reader. I would recommend using
- JavaScript
- I would recommend using
forEach
instead offor
loop.forEach
will make you write less code since withquerySelectorAll()
, you can directly useforEach
without making it as an array.
- I would recommend using
const questions = document.querySelectorAll(".FAQ-accordion__question");
const doSomething = (e) => {
// some code
}
questions.forEach(question => question.addEventListener("click", doSomething))
- Also, separate the
function
from theaddEventListener
. It's going to make your code much easier to understand.
That's it! Hopefully, this is helpful!
Marked as helpful
2
Danilo Blasโข 6,300
@Sdann26
Posted
@vanzasetia, interesting!!! Thank you very much for your recommendations, I will keep them in mind from now on. :D
0