Skip to content
Submitted over 1 year ago

far accordion without javascript

A.•390
@MooseCowBear
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have been trying to use section tags instead of divs, but after seeing this Kevin Powell video, I am wondering what the better replacement for a section tag is? It doesn't quite feel right to call the dropdowns in this challenges asides to me and article doesn't seem right either. Any advice here is appreciated.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 1 year ago

    Hi, MooseCowBear! 👋

    I don't watch the video—I have limited cellular data. <section> is only having a meaning if it is labeled by a heading using aria-labelledby. Otherwise, it has no meaning—same as <div>.

    Reference: WebAIM: HTML Semantics and Accessibility Cheat Sheet

    For the accordions, I recommend using the native HTML elements, <details> and <summary> elements.

    Those illustrations and background patterns are decorative images. You should leave the alternative text empty.

    I hope you find this useful. Have fun coding! 😄

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord