Skip to content
Submitted over 1 year ago

Accessibility (WCAG)

Marissa Huysentruyt•165
@marissahuysentruyt
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 mainly focused on getting the accordion to function the properly this time. I also used this site to make sure I was following WCAG guidelines for accordions.

Any thoughts or comments to help me with the positioning of the SVGs for larger screens? I messed with the viewBox attribute but still have issues with the final display.

Community feedback

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

    Hi, Marissa Huysentruyt! 👋

    It's great that you are trying to follow the Web Content Accessibility Guidelines to create accessible accordions. I think using the native HTML elements for the accordions is better than using the custom HTML elements. It is less code to write.

    Also, don't forget to fix all the issues that have been reported to make sure your site is accessible and has valid code.

    What is the purpose of the following markup?

    <details>
  <summary>the questions</summary>
  the answer and <a href="#">a link</a>
</details>

    You should not set the font size of the page on the <html> element. You should set it on the <body> element. Setting font-size on the <html> element will overwrite the user's font size setting.

    Also, you should never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS

    Never limit the height of the <body>. It will not allow the users to scroll the page when the page content needs more height. So, use min-height instead.

    You should set a max-width to the <main> element to prevent it from becoming too large on wide screen sizes.

    Don't use id selectors for styling. There are two reasons for not using ID’s to style content:

    • They mess up specificity because they are too high (the most important reason).
    • They are unique identifiers. So, they are not reusable on the same page.

    Learn more — What the ID attribute is REALLY for

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

    Marked as helpful
    1
    Marissa Huysentruyt•165
    @marissahuysentruytPosted over 1 year ago

    @vanzasetia Thanks for your review- I appreciate it so much! I'll have to go through your comments in more detail later.

    There are some things that I specifically didn't worry too much about (including refactoring all of the px I had used in my original solution), and focused more on just getting the accordion panels to function better (which they did not function very well in my original solution either 😆).

    You mentioned using native HTML elements instead of custom elements. I was actually experimenting with the details and summary elements (the bit of code that doesn't have anything to do with the project!), which function roughly like an accordion. Perhaps I should be using those 2 tags, instead of my h3s and buttons?

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

    @marissahuysentruyt

    You are welcome!

    You can try getting the accordion panels better. Then, for future projects, you can start using the rem unit instead of px units.

    Yes, I recommend using those two tags because it makes you write less code since you don't have to create the toggling functionality.

    Also, using those two tags will make sure that the accordions still function properly even if the JavaScript fails to load.

    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