Skip to content
Submitted 4 months ago

Responsive FAQ Component using React and CSS Flexbox

accessibility
Shikur•140
@shikurassefa
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

as i said so many times one thing i proud is my front end consistency.

What challenges did you encounter, and how did you overcome them?

to make it look like the design.particularly i cant make the heading of the page to look like the design

What specific areas of your project would you like help with?

i need help on what color should i use for the header,and for each question item

Code

Please log in to post a comment

Log in

Community feedback

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on completing this challenge! It looks great. Below are some improvements that will enhance accessibility, maintainability, and responsiveness.

    Semantic HTML & Accessibility Improvements

    • A <main> landmark is missing. This is crucial for screen readers to identify the primary content of the page.
    • The <section> used is the only block of content, so a <div> would be more appropriate unless a heading (e.g., <h2>) or an aria-label is added.
    • <header> is typically used for content that repeats across multiple pages, like a site-wide navigation or branding. It’s unnecessary here.
    • The icon used is decorative, so its alt attribute should be left empty (alt="") to prevent screen readers from announcing it.
    • The entire FAQ item should be focusable and clickable. Instead of just the icon or text being interactive, the whole FAQ item should function as a <button>. Follow the ARIA accordion pattern and check out this guide on accessible disclosures.

    CSS & Layout Improvements

    • A modern CSS reset is missing. Consider using one like Andy Bell’s reset to ensure consistency across browsers.
    • Avoid using fixed widths in pixels (px) on content. Instead, use max-width in rem for better responsiveness.
    • Follow a mobile-first approach by using min-width in media queries. Additionally, use rem for breakpoints to respect users' font-size settings.

    These improvements will make the solution more robust, accessible, and easier to maintain. Let me know if you have any questions!

    Happy coding! 🚀

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