Social proof section using Flexbox and CSS ::before for star ratings

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  SUGGESTIONS 💡:

  • What do you think of the ::before method of adding stars to ratings - was there a better way without affecting accessibility for the main page ?, let me share my suggestion with you

  ---

  • Before and after pseudo-classes in CSS do not have any inherent accessibility concerns. However, it's important to consider how these elements are being used and whether they are being used to convey important information or functionality to users.

  ---

  • If an image is used as a background for a before or after pseudo-element, it can affect accessibility if the image is being used to convey important information or if the image is not sufficiently contrasted with the background color.

  ---

  • For example, if the image contains text that is important for understanding the content, it should be included in the HTML markup instead of using a background image. This will ensure that the text is accessible to screen readers and can be properly indexed by search engines.

  ---

  • Additionally, it's important to ensure that the background image has sufficient contrast with the background color so that it can be easily seen by users with visual impairments. A contrast checker tool can be used to verify that the contrast between the background color and the image meets the Web Content Accessibility Guidelines (WCAG) standards for accessibility.

  ---

  • In summary, before and after pseudo-classes themselves do not have any inherent accessibility issues, but it's important to consider how they are used and whether any background images used are accessible and provide important information to all users.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0