Social - proof - section - project

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 2 years ago

  Hello, Zdravko! 👋

  Good job on this challenge! 👏

  A couple of things I suggest are,

  • Setting the alt text for the star icons to be an empty string so that they will be ignored by screen readers. That’s because those elements aren't so necessary or important to the content of the page and as a result doesn’t need to be read by screen readers (which can be annoying for users if screen readers are reading out the alt text for every single star). 😅
  • Adding overflow-x: hidden to the body to prevent any unwanted horizontal scrolling on the page.
  • I think adding the decorative background images with CSS background images to the body of the page will do (there's no need to add extra divs for those images). You can simply add both of them to the body of the page. See this helpful article for how to use multiple CSS background images:

  Hope you find these suggestions helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  3

  ---

  

  Zdravko•420

  @Zdravko93Posted about 2 years ago

  Hello @ApplePieGiraffe, and thank you for your helpful suggestions. I will edit my code according to them, and have those tips in mind while building my next project. Thanks again :)

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Zdravko! 👋

  Congratulations on completing this challenge! 🎉

  Here are some suggestions for improvements.

  • For the background patterns, I recommend making them as background images of the body element. This way, you can remove those div elements from the HTML.
  • Avoid using br elements for presentational purposes. Read the "Accessibility concerns" part of the MDN documentation for br.
  • Make the span block element instead using display: block.
  • There's no need to wrap each img with figure element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine.
  • If the figcaption is empty then, I would not wrap the img with figure element.
  • All the star icons are decorative images. So, leave the alternative text empty (alt="").
  • I recommend taking a look at "Quick tip: Using alt text properly - The A11Y Project".
  • Don't use aria-hidden="true" on section! The screen reader users will not know that there's a testimonial from Colton Smith. Also, it's best to not use ARIA attributes. Remember that, No ARIA is better than Bad ARIA.
    • Read Me First | APG | WAI | W3C
    • Using ARIA - rules of using ARIA
  • Headings must be in a logical order. I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.

  I have two recommended videos. The first one is telling how hard HTML is (HTML is not easy). The second one is talking about HTML and modern CSS.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

  I suggest visiting Solid Start. It gives you an overview of web accessibility.

  I hope this helps! Happy coding!

  Marked as helpful

  2

  ---

  

  Zdravko•420

  @Zdravko93Posted about 2 years ago

  @vanzasetia Hello! First of all - thanks for taking time to review my code. I will do as you suggested and improve it accordingly. Thanks again!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Zdravko93 You are welcome!

  0