Resposnive landing page with Webpack and Sass

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted almost 2 years ago

  Hi Leon,

  I've just had a look at your page and code, most of it seems to be quiet reasonable. To answer your question, you should basically use one single <h1> element that describes the most important content of a particular web page. That's especially important for assistive technology users and search engines.

  Regarding accessibility, there are some changes I would consider:

  Adding aria-label="primary" to the <nav> element would make it even clearer to screen reader users that this is the main navigation of the website. Screen readers would announce it as "navigation, primary".

  The "Get Started" button should actually be an <a> element that only by design looks like a button. When a user clicks on it, he/she will certainly be redirected to another web page. A button actually enables users to trigger an action or event, such as submitting a form, opening a dialog etc.

  The titles right after the button seem to belong to the title "All your files in one secure location...", so I think it would make more sense to change them to <h3>.

  As far as the testimonial section is concerned, you could improve the semantics by adding a structure like the following:

  <blockquote>
    <p>... </p>
    <footer>
      <cite>Auhtor name</cite>
      <cite>Job title</cite>
    </footer>
  </blockquote>
  

  The social media icons in the footer represent a group of items, so they should be included in a list, too. Also, you should add a label for each link, otherwise screen readers would announce them just as "link", users would get confused. You can add visually hidden text inside each link element or add aria-label with the appropriate content.

  Besides that, the web page looks pretty good. Keep up the good work. :)

  Marked as helpful

  0