Submitted 2 months ago

FAQ Accordion Card | HTML CSS Sass JS

#accessibility#lighthouse#sass/scss#bem

Vanza Setia• 6,375

@vanzasetia

Preview Site View Code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View Challenge

Design Comparison

SolutionDesign

Report

Accessibility Issues

HTML Issues

View Report

Vanza Setia’s questions for the community

👋Hello Everyone!

I finally finished the first JavaScript challenge 🎇🎉. After learning JavaScript for about one month. Here's the result! 😎

Now for the questions:

Does this website looks good on your device?
For the FAQ, I uppercased the letter on the HTML file instead of doing it on CSS. I'm afraid that the screen reader will pronounce FAQ when it should spell F-A-Q (letter by letter) 😅. So, is screen reader smart enough to spell the faq letter by letter?
Please try navigate this website using your keyboard. If you don't know how to navigate using keyboard, see the keyboard support section. Do all the keys work based on the functionality?
For those of you who has finished this challenge, which text that uses very dark grayish blue color (hsl(237, 12%, 33%))?

Any questions on the technique that I'm using are very welcome!

Also if you want me to give my feedback on your solution on this challenge, feel free to give me the link on the community feedback! I will be glad to help you too!

Hint: Try to disable JavaScript to get the pop up box that will give you the link to non-javascript version (using details and summary tag) or just click this.

Thanks!

Community Feedback

Pop Andrei• 90

@pccipri

Posted 2 months ago

Hey, just took a look over your solution, and I gotta say it looks awesome(although keep in mind that I am a beginner as well).So if u can give me any tips on well anything :) but especially responsiveness and if u have any tips on image positioning I would appreciate that as well. Anyway as for your question about the text color I think it's used on well, pretty much all the text. My solution - this is the link to my solution

Marked as helpful

Vanza Setia• 6,375

@vanzasetia

Posted 2 months ago

@pccipru For the text color, I used the primary color (Very dark desaturated blue), which I think match the design.

I'm confused since there are a lot of similar colors 😅.

Anyway, I have just given the feedback on your solution, feel free to take a look.

Also, I would recommend to use Markdown syntax to give your solution link.

[My solution](https://www.frontendmentor.io/solutions/profile-card-component-main-html-and-css-flexbox-grid-and-no-js-WdYYa5jEC)

It will render it as:

My solution

Dave• 4,075

@dwhenson

Posted 2 months ago

Hey @vanzasetia lovely job here! 🙌 Looks great and functions really nicely with the keyboard.

Did you consider using the details-summary tag here? If so I'd be keen to know why you opted not to use it. I just ask as it might have made your mark-up easier and require less aria attributes.

** Hang on I think I missed the link to your other solution without JS - did you just add this?

My only small suggestion would be to make the focus styles a bit easier to see, perhaps a bit thicker –using outline-offset with a small value can also help making it look nice. But this is really a small point!

Lovely job!! 👍

Cheers 👋

Dave

PS If you were concerned about the "FAQ" you could perhaps try aria-label, I'd need to check but I think this will stop readers accessing the content and read the content of the label, so you could try aria-label="frequently asked questions" - I'd need to test this to be sure though.

Marked as helpful

Vanza Setia• 6,375

@vanzasetia

Posted 2 months ago

@dwhenson Thanks for your kind words! 😄

I was added the non JavaScript version after several hours I submitted the solution 😀. How did you notice it?

I already had outline-offset: 0.09em to give space between the text and the outline. I have made the outline a little bit thicker 😉.

About the aria-label, I'm not going to use it, since aria-label is not translatable. Instead, I added the sr-only that tells what FAQ stands for, which is Frequently Asked Questions. I think this is useful since not all people know what FAQ stands for, especially for those of them who are not native English. So, when they try to translate the page, it will translate the Frequently Asked Questions words to their native language 😉.

Dave• 4,075

@dwhenson

Posted 2 months ago

@vanzasetia oh, good point. I had not thought about aria label not being translatable. I didn't know that and will keep it in mind. Shame about that.

Sloth247• 415

@Sloth247

Posted 2 months ago

It looks awesome! I like your banner on Github too. I also tried this challenge a while ago and could not close the panels by only HTML and CSS (without JS). I appreciate if you give me a feedback on mine too!

Marked as helpful

Vanza Setia• 6,375

@vanzasetia

Posted 2 months ago

@Sloth247 Thanks for taking a look at the README file!

I have given you my feedback on your solution!

Hopefully that's helpful for you!

Mathias de la Fuente• 20

@mathias9968

Posted about 2 months ago

Hey, nice challenge, looks awesome, just a comment. The shadow svg, is positioned above the woman svg. that is resolved with z-index: 2 in shadow, z-index: 1 in woman. Cheers.

Vanza Setia• 6,375

@vanzasetia

Posted about 1 month ago

@mathias9968 Sorry, I don't understand what do you mean, could you explain it in more detail? Are you talking about the box shadow on the box image?

For the illustration-woman, on desktop, I used background-image which, I can't control the z-index of it.

FAQ Accordion Card | HTML CSS Sass JS

Design Comparison

Report

Vanza Setia’s questions for the community

Community Feedback

Join our Slack community

Join over 80,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!