Solution using jQuery, Sass & Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop and mobile is really great, though the breakpoint could be adjusted. It is too early to transition it in mobile layout, the desktop layout could use some more of the screen, also, it is weird seeing min-height being used in media query.

  Some suggestions would be:

  • When using img tag, if you think that the image adds any content to the overall website, use a descriptive alt text. Right now, you are using them all over the place. For example, the background-image of just box outlines, you don't need to use alt on them, as well for the woman-illustration. Those images are just vectors and are purely decorative. If an image only acts as a decoration, use empty value like alt="". Also, avoid adding words that relates to "graphic" like "image, logo, illustration".. as a value on alt attribute. Assistive tech will handle those for you.
  • The dropdowns are not really accessible, using li alone with h2 as toggler is not great. Instead, you could use the details element. This element are intended for dropdowns like these ones, it is really accessible as well since it is already pre built on it, just use it instead of creating one. If you create one, make sure it is accessible. Test it with your keyboard, if you can interact it with it, it is accessible, if it doesn't , refactor it.
  • I wouldn't use heading tag on the dropdown title as well.
  • On the body tag, avoid using height: 100vh, this limits your body element's height based on the viewport's remaining height. Replace it with min-height: 100vh, this will expand if it needs to unlike using fixed height.

  Other than those, great job.

  Marked as helpful

  1

  ---

  

  Frances•165

  @frances-mPosted about 3 years ago

  Wow, thank you so much @pikamart ! I've been interested in improving the accessibility of my sites and this is a huge help - I'll implement those changes and check that out!

  min-height is strange in a media query? That's good to know. I tend to use them because of smaller MacBooks that meet the min-width requirement, but depending on the user the browser bar at the top and the menu bar at the bottom can take up a lot of vertical space. So I started to notice that I would make a site using dev tools to check screen sizes, but my MacBook at the time was displaying the site squished. Although, now that you mention it, setting min-height rather than height would probably fix that so the two issues probably go hand in hand.

  Thanks again, I really appreciate you taking the time to give such thorough feedback!

  1