Responsive Interactive Rating using flex-box

Community feedback

• 

  Adalbert Pungu•170

  @AdalbertPunguPosted 29 days ago

  Semantic HTML

  • Suggestions: Consider using a <section> or <article> tag to wrap around the rating and thank-you containers for more semantic meaning, as these represent distinct sections of the page.

  Accessibility

  • Add alt text to images for screen readers to describe their function or content, instead of leaving it empty.

  • Use aria-live="polite" on the rating value container (<p class="selected">) to announce the rating selection for screen readers. This is especially helpful when users select a rating, as they may not know their choice was recorded without visual feedback.

  Responsiveness

  • Strengths: The use of flex properties for centering and layout alignment is effective, ensuring a consistent structure on smaller screens.

  • Media Queries: Consider adding media queries for smaller screens, like tablets or mobile devices. Reducing the width of .rating and .thank-you to adapt to narrower screens and increasing button size would enhance usability on mobile.

  Code Structure, Readability, and Reusability

  • Consistent Naming: Use consistent and descriptive naming, such as renaming .img to .icon-container or .image-container to clarify its function.

  Layout and Design Fidelity

  • Design: This layout closely follows a standard interactive rating layout and is consistent. Adding more @media breakpoints would ensure the layout looks good across screen sizes without losing design fidelity.

  Overall, the code is clean and well-structured with small tweaks for improved readability, accessibility, and responsiveness.

  0