Responsive Art Gallery Website built with SCSS, BEM, and Leaflet.

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello, Richard! Great job on your solution!

  On accessibility, I want to point out that the arrow image is better if you give it aria-hidden="true" or alt="" attribute to hide it from screen readers. That is because screen reader don't need to read the alt text of your arrow button as it is just a presentational image (I assume).

  https://www.w3.org/WAI/tutorials/images/decorative/

  I hope it helps!

  Marked as helpful

  1

  ---

  

  Richard Aiello•340

  @richieAielloPosted over 2 years ago

  @fazzaamiarso Thank you for the advice! I will definitely checkout the w3 article you linked and address this!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Richard! 👋

  The link for the "Preview Site" is not the link to the site. The link for the site is the one that you put on the README.md (https://art-gallery-website-richieaiello.netlify.app/index.html).

  Some recommendations from me.

  • There's actually no header on the site. header is used to wrap nav and commonly the logo of the company. The hero section should be the first child element of the main element.
  • Remove the br from both hero__heading and footer__heading. Screen readers will read out br elements. So, I recommend using a max-width or flex-basis if the parent element is a flex container to limit the width of the headings.
  • For all the images, I recommend using picture element since each image has another two versions.
  • I suggest making the hero__background-left with CSS. You can use pseudo-element to do that. This way, you can clean up the HTML a bit.
  • All the image-hero and image-grid are decorative images. They don't give meaningful information. So, my recommendation is to leave the alt="" empty.

  I am just noticing the custom scrollbar. It looks nice! 👏

  By the way, do you know that on mobile landscape view (640px * 360px) the user can't scroll on the location page? It's because the map fills the entire screen. So, when the user tries to scroll, it scrolls the map (not the page).

  That's it! Hope this helps. 😊

  Marked as helpful

  0