Skip to content
OverviewSolutions
32
Comments
96
Gwenaël Magnenat
@gmagnenat

All comments

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi congrats for giving this challenge a try. I'm afraid it needs a bit of work to make an accessible and production ready solution. This component uses a common pattern called the "tabs pattern" you can read more about it here. https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

    There are quite some semantic roles and properties to add to make this right.

    Also, you shouldn't hide the outline and focus indicator on interactive elements such as links or button. You can style these if you want but they are essential to show where the focus is for users who are not clicking around with a mouse.

    Try to use your solution with your keyboard only, you will see what I mean. Try to access the different stats card without using your mouse.

    Can you spot the problem?

    Marked as helpful
  • Nathan Ray•320
    @NathanRayM
    What are you most proud of, and what would you do differently next time?

    I was happy that I could finish this one fairly quickly without many issues.

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

    My area of opportunity with this as well as others are media queries. I'm still learning them and will improve as I go.

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

    Any feedback is helpful.

    Social links profile using HTML and CSS

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Good job on the solution! Here are some important things to improve:

    Does the solution include semantic HTML?

    • This is a list of links, so it would be better to use a <ul> (unordered list) for proper semantic structure. This makes it easier for screen readers to understand the number of items and improves navigation.

    Is it accessible, and what improvements could be made?

    • Avoid setting font-size in pixels on the <html> tag. Let the browser apply its default size (usually 16px) so users who need larger text can adjust it easily. Read this article to understand that issue. Why you shouldn't use pixels for font-size
    • Remove min-width: 100vw on the <body>. This causes overflow when zooming in because it includes the width of the scrollbar. The body naturally takes 100% width, so no need for extra styling.
    • Social links currently use a fixed height. Using padding instead would make them more flexible and avoid overflow if the text size changes.

    Does the layout look good on a range of screen sizes?

    • The height on your container is fixed. It should be flexible so it grows with the content. If you add more links, the height should adapt automatically.
    • The width and height on your image container are not necessary. Let the image size be determined naturally to prevent layout issues.

    Is the code well-structured, readable, and reusable?

    • Use a modern CSS reset to start your styles from a clean slate. This reduces inconsistencies between browsers.
    • There is strange formatting in your CSS. Consider using a tool like Prettier to clean it up and make it more readable.
    • The negative margin on your .intro-container is not needed. This is a workaround to move it closer to the image. If you remove the forced height on the image container, you can remove this margin, and it will look cleaner.

    Does the solution differ considerably from the design?

    • The design looks mostly fine, but there are structural and CSS issues that make it less maintainable and harder to scale.

    Let me know if you have any questions on these points.

    Happy coding !

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Good job on the solution! Here are some important things to improve:

    Does the solution include semantic HTML?

    • Navigation links are not inside a list. Wrapping them in a <ul> (unordered list) would be better for screen readers. This way, users know exactly how many links are there, and it helps with navigation. Lists also provide a clear structure that makes the HTML easier to understand.

    Is it accessible, and what improvements could be made?

    • The alt text for the author's name is confusing. It should describe the image or be left empty (alt="") if it's only decorative.
    • Use min-height: 100vh instead of height: 100vh. Right now, content gets cut off if the text size is increased.
    • Links open with target="_blank", but there is no indication for screen readers. It is a good practice to add visually hidden text like " (opens in a new tab)" so users are aware of it.

    Does the layout look good on a range of screen sizes?

    • Media queries use pixels. Change to em or rem so the layout adapts better if the user increases their font size.
    • In this specific case, a media query is not actually required since the layout is simple and scales well without it. Removing it can reduce unnecessary code.

    Is the code well-structured, readable, and reusable?

    • The code is mostly clean, but navigation links should be wrapped in a list to be more organized.

    Does the solution differ considerably from the design?

    • The design looks good, but the HTML structure and responsive units need some improvements.

    I hope you find something useful in this list and it helps you for your future challenges. Let me know if you have any questions.

    Happy coding !

  • Alexander Romero•260
    @AlexanderTejedor
    What challenges did you encounter, and how did you overcome them?

    I liked it, it's a very interesting challenge because I had to use react states to get the expected results, such as modifying the css values ​​with TailwindCSS just when the onClick event was handled.

    Article preview component Solution

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on taking the challenge !

    I noticed something that could greatly improve the accessibility of your solution.

    You need to test all your solutions with your keyboard. Currently the share button which is the only element here that need to take focus isn't accessible because it's just and image.

    Button will naturally take focus, you can style it like you want and add your image in it.

    You'll also need to give indication to screen readers about what is going on when that button is clicked. You'll need to move the focus on the share icons.

    You can maybe check the html dialog element for this as it takes the focus when it's opened and has already built in function such as pressing "escape key" to close.

    Your social icons should also have an appropriate HTML element as they are ment to be interactive, not just decorative images.

    Can you think of something better?

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    here are a few things I noticed.

    • Alt Text: The alt text should be more descriptive. Instead of something vague, use "QR Code to frontendmentor.io." This tells users what the image is and where it leads.
    • Simplifying HTML: The image doesn’t need to be wrapped in a <div>. Removing unnecessary containers makes the code cleaner and easier to style.
    • Viewport Height Issues: Instead of height: 100vh, use min-height: 100vh. When zooming in at 200%, content expands, and a fixed height can cause it to be cut off at the top and bottom. Using min-height allows the content to grow without being constrained.
    • Image Width: There’s no need to set a specific width on the image since it is inside the card. Instead, allow it to take up 100% of the card’s width and control spacing by adding padding to the card itself.

    I hope you find something useful here to refactor your code.

    Have fun !

    Marked as helpful
  • Austin L Layman•120
    @EnkiEnki77
    What are you most proud of, and what would you do differently next time?

    Figured out I could style text more efficiently by turning the "text presets" in the style guide provided in the figma design into individual classes and then just putting the class onto each text element that needs it.

    Not much I would change, I think my way of going about things was pretty clean.

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

    Made things more DRY by setting up text preset classes instead of declaring text styles for each individual text element

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

    None

    Blog card component with vanilla html/css

    2
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    Great job on your work so far! It looks pretty good.

    Here are a few things I noticed.

    1. Use rem for min-width instead of pixels. Pixels are fixed units and don’t respect user preferences when they increase their browser’s default font size. Using rem ensures better accessibility. More on this here: Why you shouldn't use pixels for font-size.

    2. Heading structure: You correctly placed the <h1> first, which is great. However, since this is a blog preview card component that will appear in a grid with others, the title should likely be a lower heading level (e.g., <h2> or <h3>). If you still want an <h1>, consider making it visually hidden for screen reader users.

    3. The blog title needs to be a link. Since this is a preview, the heading should be wrapped in an <a> tag leading to the full blog post:

      <h3><a href="full-post-url">Blog Title</a></h3>

      This improves navigation and usability.

    4. Alt text improvement: Avoid using words like "image" or "picture" in alt attributes, as screen readers already announce them as images. If the image is purely decorative, leave alt="" so it is skipped. Learn more here: How to write good alt text.

    5. Missing a modern CSS reset. Adding a reset at the start of your stylesheet improves consistency across browsers. Check out:

    6. An active/hover state is missing. Adding styles for :hover, :focus, and :active states improves interactivity. To go further, you can make the whole card focusable and clickable by expanding the clickable area of the link using a pseudo-element. Here’s an example:

      .card a::after {
  content: "";
  position: absolute;
  inset: 0;
}

      This is a great trick to learn for improving usability.

    I can see that you already got some experience but I hope you find something useful in here to help you refactor your solution.

    Have fun !

  • Dimma Joel•40
    @Dimma-Joel
    What are you most proud of, and what would you do differently next time?

    I'm most proud about working on the project without consulting external support.

    What I'd do differently next time is to improve my time management skill by finishing a project before it's deadline.

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

    The challenge I encountered was difficulty in deploying my projects to Vercel.

    I created a GitHub repo specifically for frontend mentor challenges and when I deployed my first project - which is this one - in the repo to vercel, it showed 'error'.

    I solved the problem by looking through other people's repo dedicated to frontend mentor challenges and saw how they deployed theirs, I then consulted ChatGPT for step by step process to deploy mine and walaa - problem was solved.

    It happened that I didn't specify the folder in the repo while deploying to vercel

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

    None, thanks.

    QR Code Component

    #accessibility#semantic-ui
    2
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi there, here are a few things I noticed in your code. All the comments above are valid some of mine will be repeating the same thing but maybe you can find some complementing tips in here.

    • Missing CSS Reset
      A modern CSS reset should be added at the top of the stylesheet. This helps avoid inconsistencies across different browsers. Consider using Andy Bell's or Josh Comeau's.

    • Card Component Sizing
      The card component currently uses a percentage for width (19%). When the screen width decreases, the content shrinks proportionally, which is not the right approach. Instead, use a max-width in rem so the card can shrink on smaller screens while stopping at a reasonable width on larger screens.

    • Margin Usage for Positioning
      Large margins should not be used to position elements. Flexbox is a better approach for centering the card on the screen. Example:

      body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

    • Unitless Line-Height
      Line-height should be unitless to prevent unintended scaling issues. Instead of:

      line-height: 24px;

      Use:

      line-height: 1.5;

    More details can be found here.

    • Header Usage
      The <header> element is meant for repeated elements like navigation. Since it's not serving that role here, it is unnecessary. The image inside it can be placed directly within <main>.

    • Use of <section>
      <section> is used to define distinct parts of a larger component, usually with a heading. Since this is a single component, wrapping everything in a <section> is not needed. A simple <div> would be enough if a wrapper is necessary.

    Hope this helps! Let me know if you have any questions. Happy coding! 🚀

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, here is a review with some suggestions.

    • Use min-height: 100svh on the body to make sure the layout adapts properly when content grows.
    • There are no focusable elements on your solution. Since this is a blog preview card, the title should include a link to the full post.
    • The title has an interactive indication but is wrapped in a <p> tag. This should be a heading (<h2> or <h3>) with a link inside.
    • Avoid words like "picture" or "photo" in alt text. Screen readers already announce the element as an image. The main image here is decorative and should have an empty alt="".
    • A <main> landmark is missing. The card should be inside a <main> tag to help assistive technologies understand the page structure.
    • The profile image next to the author's name does not need alt text. Since this card is likely on a page with multiple blog previews, having alt text for each author's profile image would create too much redundancy.
    • A modern CSS reset is missing. Adding one will help with consistency across browsers. Look into resets from Andy Bell or Josh Comeau.
    • Do not change the root font size using percentages. This practice was historically used for easier rem calculations but causes accessibility issues. Users who increase their browser's default font size may experience unpredictable scaling.
    • Work mobile-first. The default layout should be for small screens, and a media query with min-width in rem should be used to adjust the layout for larger screens if needed.

    Let me know if you need further clarifications.

    Happy coding !

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congratulations on your work! I noticed a few areas that could be improved to enhance accessibility, maintainability, and usability.

    Accessibility Improvements

    • A <main> landmark is missing. This helps screen readers identify the primary content of the page. Make sure it wraps the main section of your document.
    • If there is no specific action required for the <form>, remove the action attribute to prevent unnecessary requests.
    • The autocomplete attribute should not be empty. Use meaningful values like "given-name", "family-name", and "email" to improve form usability and autofill functionality.
    • Inputs should be linked to their respective error messages using aria-describedby. This allows assistive technologies to associate input fields with error messages.
    • Errors should be populated dynamically and added to the DOM at validation time so that screen readers announce them properly.
    • <p> elements should not be placed inside <legend>. Instead, use plain text directly within <legend>.

    User Experience Enhancements

    • When a success message appears, users may still be at the bottom of the form and could miss it. Announce the message to screen readers using aria-live="polite" and scroll to the top programmatically to make it visible.

    CSS and Performance Considerations

    • Import fonts directly in your HTML file for better performance rather than relying on external stylesheets that load them later.
    • Avoid setting the default font size to 62.5%. This practice can cause accessibility issues. Read more about why this approach is not recommended here: Why you shouldn't use 62.5%.
    • Use rem for elements containing text rather than fixed pixel values. This allows layouts to scale properly if users modify their browser's default font size.
    • Avoid using px for width, height, and font sizes, as it prevents accessibility adjustments. Convert these values to rem.
    • Remove fixed pixel heights on inputs and instead use appropriate padding and font-size to keep them flexible.

    SCSS Organization and Maintainability

    • Be mindful of deeply nested selectors in your SCSS. Limit nesting to a maximum of two levels and prioritize low specificity. Increasing specificity unnecessarily can make stylesheets harder to debug, especially in larger projects.

    Testing and Final Checks

    • I highly recommend testing your solution with a screen reader. NVDA is a great option for Windows, and VoiceOver is available on Mac. You may notice elements being announced incorrectly, which will help improve your HTML for better accessibility.

    I hope this feedback helps improve your project! Let me know if you need any clarification.

    Happy coding! 🚀

  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    Your project is well-structured and functional, but there are some improvements you can make to enhance its accessibility, maintainability, and best practices.

    HTML & Accessibility Improvements

    • Load stylesheet after Google Fonts Link your stylesheet after the Google Fonts link in your <head> to prevent a flash of unstyled text (FOUT).

    • Duplicate stylesheet link You have two links pointing to the same stylesheet in your <head>. Remove the duplicate to avoid unnecessary requests and potential conflicts.

    • Missing <main> landmark A <main> element should wrap the primary content of your page for better accessibility and screen reader navigation. This helps assistive technologies understand the structure of your page.

    • Use <button> vs <a> correctly Buttons should be used to trigger actions (e.g., submitting forms, opening modals), while links should be used for navigation to different pages. Use the correct element for each purpose.

    • Unnecessary <section> element A <section> should be used when it groups multiple related content blocks and includes a heading (e.g., <h2>). Since your content does not require this, a simple <div> is more appropriate.

    • Incorrect file path for stylesheet Your stylesheet is currently inside the /images folder. It’s better to place it in a /css folder or keep it at the root near your HTML file for better organization.

    CSS Best Practices

    • Missing modern CSS reset A CSS reset helps normalize styles across different browsers. Consider using Andy Bell’s or Josh Comeau’s modern reset for consistency in styling.

    • Avoid styling HTML elements directly Only apply global styles to HTML elements if they are part of a reset. Instead, use class-based styles to keep styles modular and reusable. This makes your styles more maintainable in larger projects.

    • Use rem in media queries Avoid using px in media queries since it does not respect users’ custom browser font sizes. Using rem improves accessibility and adaptability, especially for users who modify their browser’s default font size.

    These changes will improve your project’s accessibility, maintainability, and scalability. Following these best practices will also make your codebase more structured and easier to work with in the long run. Let me know if you need clarification or further guidance!

    Happy coding! 🚀

    Marked as helpful
  • PastaSus•320
    @PastaSus
    What are you most proud of, and what would you do differently next time?

    this code was fixed/refactored

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

    bad code, study and get help

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

    any room for improvements on this?

    Omelette recipe page

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congratulations on your effort with this challenge! You've done great work, but there are some areas where improvements can enhance the accessibility, maintainability, and overall quality of your code. Here's a review with some recommendations:

    Semantic HTML and Accessibility

    • Load your stylesheet after Google Fonts. Make sure your stylesheet is loaded after Google Fonts in the <head> of your document. This avoids styles being applied without the correct fonts, which can cause layout shifts.
    • Avoid using words like "image," "photo," or "picture" in your alt attributes. Screen readers already announce that the element is an image. Focus on describing the content of the image succinctly and meaningfully.
    • Use <strong> instead of <span> in lists when emphasizing important text. <strong> has semantic meaning, indicating importance, and acts as a label for the list items, improving accessibility.

    CSS and Layout Improvements

    • Use a single image for the omelette picture and adjust its styling within a media query. This approach reduces unnecessary HTTP requests and improves page load performance.
    • Remove unnecessary comments in your stylesheet. Cleaning up your stylesheet makes it easier to navigate and helps during code reviews.
    • Use padding in sections to create spacing instead of applying margin-top on titles. This makes the design more adaptable across layouts and projects. Check out this article for more insight: Padding vs. Margin.
    • Follow a mobile-first approach by designing for mobile as the default layout and then using media queries with min-width for larger screens. This ensures better performance across different devices.
    • Use rem units in media queries instead of pixels. This respects users who adjust their browser's default font size, ensuring your design remains accessible and scalable.

    Update your README. A well-structured README helps others understand your project better. Use the provided template, remove unnecessary sections, and add details about the challenges you faced and the solutions you implemented. This will make your GitHub profile stronger and more professional.

    These changes will not only improve the accessibility and maintainability of your code but also help you develop solid practices for future projects.

    Let me know if you have any questions or need help implementing any of these suggestions.

    Happy coding!

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on completing this challenge! It looks great.

    I have a few suggestions to help you refine your code and build more accessible, scalable, and maintainable solutions.

    Semantic HTML & Accessibility

    • Don't skip heading levels. Even if you need different visual styles, you can use multiple <h2> elements with different classes rather than jumping from <h1> to <h3> or <h4>. This keeps the document structure meaningful for assistive technologies.
    • Your table should include <th> elements or use the scope attribute to indicate column headers. In this case, headers like "Calories," "Carbs," "Protein," and "Fat" should be properly marked up to help screen reader users understand the data relationships.

    CSS Best Practices

    • Add a modern CSS reset at the top of your stylesheet. This ensures better consistency across browsers. Andy Bell and Josh Comeau have great reset styles; choose one and understand how it works.
    • max-width: 100% on image is included in modern CSS resets.
    • Avoid using fixed max-width values in pixels. Instead, use rem units to allow content to scale properly when users adjust their browser’s default font size. This ensures a more accessible and adaptable layout.
    • Many of the margins in your layout could be better replaced with padding. Margins control external spacing, while padding manages internal spacing. This article explains when to use each: Padding vs. Margin.

    These tips will make your project more robust and user-friendly. Let me know if you have any questions or need further clarification!

    Happy coding! 🚀

    Marked as helpful
  • Shikur•140
    @shikurassefa
    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

    Responsive FAQ Component using React and CSS Flexbox

    #accessibility
    1
    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! 🚀

  • P
    Schindler Dumagat•340
    @schindlerdumagat
    What are you most proud of, and what would you do differently next time?

    What I am most proud of is that I was able to use custom CSS variables for the first time just to setup my colors in location. Specifically at the top of my style element.

    :root {
      --main-bg-color: #D5E1EF;
      --title-color: #1F314F;
      --desc-color: #68778D;
    }
    What challenges did you encounter, and how did you overcome them?

    I had a little bit of trouble on importing the font that includes only 2 font weights. When I was trying to import the font by copying the embed link tags on google fonts website. I really wanted to only include the font weights that I only need. I did some googling and you only need to specify the font weights just like this:

    ``

    And the font weights I only need is 400 and 700.

    One other thing I struggled a little is how I can center the QR code component at the middle of the page without using flex box but I ended up using flex box because it is the only one I know and I needed to set width and height of the containing element to 100vw and 100vh respectively.

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

    In this html code, I am just curious if I should have used the section tag instead of the article tag to apply some semantic meaning. I wanted to know if which is better to use? Should I have used the section tag or stick with the article tag or what tag do you recommend instead?

    
    
    
      Improve your front-end skills by building projects
      Scan the QR code to visit Frontend Mentor and take your coding skills to the next level

    Simple QR Code Component using CSS Flexbox and custom color variables

    1
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats on completing this challenge! It looks great.

    • You can add width: 100% for images so they can fully fill their container when the page is zoomed in at 200% or more. This ensures they remain responsive and accessible.

    • <section> or <article> are not necessary in this case since it's a single component. A simple <div> with a class is perfectly fine and keeps the structure clean.

    Great job overall! Keep up the good work. 🚀

    Marked as helpful
  • pabjunior•40
    @pabjunior
    What are you most proud of, and what would you do differently next time?

    I am most proud of effectively utilizing the grid layout to organize and display content seamlessly.

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

    The main challenge I encountered was managing media queries to ensure the design remained responsive across different devices and screen sizes.

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

    I would like help with fine-tuning my media queries to ensure my design remains responsive across various devices and screen sizes

    QR-code component solution using flexbox

    2
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, great job on your project! Here are some key areas where you can improve accessibility, maintainability, and best practices.

    Semantic HTML & Accessibility

    • Missing <main> landmark: This is essential for screen reader users to navigate the primary content of the page. Wrap your component inside <main>.
    • Avoid unnecessary <section> elements: Since this is a single component rather than a distinct section of a document, a simple <div> with a class is more appropriate.
    • Heading level should be <h2>: As this component is part of a larger page, an <h1> would be used for the main page title, and this should be a subheading.
    • Missing alt text for images: Without an alt attribute, screen readers will ignore the image. Ensure all meaningful images have descriptive alt text.

    CSS Best Practices

    • Use a modern CSS reset: A reset (like Andy Bell’s or Josh Comeau’s) ensures better consistency across browsers and should be included at the top of your stylesheet.
    • Avoid styling HTML elements directly (e.g., p, h1, section): Instead, use classes. Styling elements directly makes it harder to maintain and update your CSS if the HTML structure changes. Adding classes keeps the styles modular and reusable.
    • Use rem instead of pixels (px) for max-width of your card: This makes your layout more flexible and accessible for users who adjust their browser’s default font size.
    • Avoid fixed max-width on images: Modern CSS resets typically include img { max-width: 100% }, so you don’t need to redefine this unless necessary.

    These improvements will make your project more accessible and maintainable.

    Keep up the great work, and happy coding! 🚀

    Let me know if you need further clarification.

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, this looks good !

    I noticed a few things to improve the accessibility of your solution.

    • You should use disclosure elements to give more information about the state and the content of your items to assistive tech.
    • Add aria-expanded on your button so it gives indication about its state.
    • Add aria-controls to link the button to its content tab. You can read more about it on the ARIA Authoring practice guide. Grace has also a good article about disclosure on her blog Let's build an accessible disclosure
    • You should use rem unit for your max-width value so it respects user preferences if they choose to change their browser default font-size.

    I hope these few comments help you in some way.

    Happy coding ! 🎉

    Marked as helpful
  • Gwenaël Magnenat•1,540
    @gmagnenat

    Hi,

    I just finished this challenge and yours was selected for a peer review :)

    I noticed a few issues with accessibility that you could refactor to improve the quality of your solution.

    In this challenge, good HTML is important and makes it much easier for accessibility.

    • You should use a <form> for the ratings
    • Each number should be a radio input in a fieldset

    Navigating with keyboard in a list of radio input is done with the arrow keys so a keyboard user don't have to tab on all the options to get to the submit button.

    Using a form with the correct HTML allow the user to just press enter to submit the form instead of tabbing all the way to the submit button.

    • You should control the border of the submit button element. There is a "not good looking" border visible on Firefox and Safari.
    • You should validate the inputs (the reason why using a form and radio inputs is important and makes it easier). Currently we can submit without selecting a number and it's using a "null" value.
    • You shouldn't use pixels for your max-width value so it respects users who update their browser default font-size value. Use rem instead.

    I know this is from 3 months ago so there are probably topics that are common sense for you now. Anyway I hope I brought you some interesting feedback to help you refactor and improve your solution.

    Happy Coding 🎉

  • P
    lai yiu leung•400
    @jasper2virtual
    What challenges did you encounter, and how did you overcome them?

    when coding with the complex data structure, I found it is very difficult to remember the structure, then I use Typescript to help me.

    manage theme colors is very difficult, without the help of daisyui lib.

    vuejs typescript tailwindcss css

    #tailwind-css#typescript#vue#sass/scss
    2
    Gwenaël Magnenat•1,540
    @gmagnenat

    Hi, congrats for completing this project !

    I noticed a few things in your solutions that could improve the user experience. There are a couple of details missing from the design that have their importance in my opinion.

    • The first focusable element is the theme switcher. When using a screen reader the theme isn't announced and we cannot guess what is the option to check. As by the design it's a toggle between light and dark you could use radio buttons for this. It will also improve the accessibility as the user can use the native keyboard behaviour for radio buttons. You'll need to add proper labels and aria-describedby to the inputs.
    • Your media switch to desktop is at a quite large screen size. under 1440px wide it is the mobile view displayed. I would adjust that to something more natural at smaller breakpoint.
    • On the question validation, if a wrong answer is selected on the design a small check indicators shows the correct answer.
    • If not answer is selected you have a small layout shifts caused by the display of the error under the button. You can use a grid layout instead for your page so you don't have this little switch. You could also hide the error when an answer is selected.

    That's just a few things I noticed when checking your solution. I hope you find something useful in this list to improve it. Let me know if you have any questions.

    Happy coding !