Skip to content
Submitted about 3 years ago

Responsive Landing Page using JS and SASS

Javier Eufracio•280
@Javieer57
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I like to know more about accessibility, especially in the hamburger menu. Does anyone have a guide o know where I can learn about this topic? Thank you!

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, great work on this one. The layout in desktop is good as well for the mobile state. The layout is also responsive, great work.

    Regarding your query, let's tackle that below, first suggestions:

    • On the navbar, typically you use ul since those are lists of elements. This also creates an info for screen reader users on how many links there are in your navbar.
    • The .hero selector could have used a min-height: 100vh instead of a height: 100vh. Using height: 100vh takes 100% of the viewport's height which is good, but it is limited to only that. So when a user with small screen's height size, the layout will change. With min-height: 100vh the element will take 100% of the height as well, but, it will expand if it needs to. But on this one, if I were to tackle this, I would use a fixed rem size so that it won't shift.
    • The svg for the arrow in the hero section could have use aria-hidden="true" so that screen reader won't pick that up or won't navigate through it, since it doesn't really add any information.
    • Have a main tag that will wrap the whole main content of the your website. On this one, the structure could have been:
    <body>
  <header></header> 
  <main> {everything thing is in here for the main content} </main>
  <footer></footer>
</body>
    • On the testimonial section, the alt text for the images of the person, lose the word "photo", it should have like alt="Emily R". Assistive tech will handle saying that the element is graphic, that is why you should not include any word that relates to "graphic" in the alt text, like "image", "icon", "photo"...
    • The name for the person on the testimonial could have used a heading tag so that when I navigate in the testimonial section using screen reader, I would have a heading saying the name of the person, and since it is a testimonial section, I know that there will be a text from that person and I could just go through the text to read it.
    • One good rule of thumb for using alt. When you think an image is just for purely decorative purpose, better to leave it blank like alt="". If it adds to the content, add a descriptive text. The images after the testimonial section, since it is just decorative, better to use empty alt attribute.
    • On the footer, the sunnyside logo could have a span like <span class="sr-only">sunnyside</span>. This creates a text for screen reader to read when they go navigate to that svg. the sr-only is a class that has css styling intended for screen reader. You can search for that one.
    • Links on the footer could have been wrap again inside ul.
    • The social media links as well could have been wrap inside a ul element. The a tag that wraps the link should have aria-label. It would be like:
    If it is nested in ul element
<li>
  <a aria-label="facebook" href="#">
     <svg aria-hidden="true"> the svg is here  
  </a>
</li>

    aria-label is a piece of text that is read by screen reader. It is used when the element's content doesn't contain any text, like the social media links. It guides user on what is that element is all about.

    Now, regarding your query:

    • The hamburger menu should not use div element. div alone is not accessible, it would be better to use button element along with the aria-expanded attribute. It would look like:
    <button aria-hidden="false">
</button>

    Then, in your javascript, if the button is toggled, you changed the aria-hidden attribute to aria-hidden="true". Using this attribute, when a user who is using screen reader, when they toggle that button, the screen reader will say that the hamburger menu has expanded, thus showing the dropdown. You can search about this, you can search perhaps accessible hamburger menu on google.

    Again, you did a great work on this one. If you have any more question, just drop it here okay.

    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord