Nuxt.js, scss and some Cookies

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout is really good, it is responsive and the mobile state looks really great as well. The functionality right now is not working? I tried but it doesn't give me a shortened version plus when I visit the given link, the link is broken.

  Some suggestions would be:

  • Your header should be containing the nav and not the hero-section. A typical layout looks like:

  <header />
  <main />
  <footer />
  

  This way, all element that has content are inside their respective landmark elements.

  • Website-logo should not be inside the nav since you didn't make it a link.
  • Website-logo img should only be using the website's name as the alt like alt="shortly". Also when using alt attribute, avoid adding words that relates to "graphic" such as "logo", since img is already an image/graphic.
  • The 3 links after the website-logo should be a link so use a tag on them, since they acts as your primary navigational links. I don't know if I would include the 2 links on the right side though.
  • Hero-section img could be using alt="" and extra aria-hidden="true" on it, since it is just a vector image which is decorative. So when an image only acts as a decoration, hide them at all times.
  • I would wrap the input inside a form.
  • input element lacks a label associated with it. The label would only be a screen-reader element so using an sr-only would be really great and the value would describe what the input should contain.
  • button should have type="submit", always state what your button will be using the type attribute.
  • Right now, the error-message is only being seen visually, to make it more accessibe, add an id attribute on the error-message, this id will be referenced by the input. So when the input is wrong, a pseudocode will look like:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  This way, user will know that the input is wrong because of the aria-invalid and they will know what kind of error they had made because of aria-describedBy which points to the text used in the error-message.

  • As an addition to making it accessible, you could have used aria-live element that announces if the form submission is invalid or if the shorten api works and produces a result. Just an idea:>
  • Each result in the shorten api link should not be a heading tag, so don't use h2 on those, just use p tag .
  • On the advanced statistics section, those 3 icons are only decoration so use the method I mentioned above to hide them.
  • cta section background-image should be hidden as well.

  FOOTER

  • The website-logo should have used an title element inside the svg. When using svg the alt attribute won't work since it is only used inside img tag. svg uses title element. So you would have this inside the svg:

  <title class="sr-only">shortly</title>
  

  You will need to make it screen-reader only as well.

  • You can use nav on the links since those are still your website's navigational links.
  • Again, since they are links ,you need to make them use a tag. Remember that interactive components needs to use interactive elements.
  • Each social media link should be using a tag.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.
  • Each svg inside the social media link should be hidden since they are only decoration so use aria-hidden="true" attribute on them.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using div you are making it not-accessible.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • Lastly, the placement of the toggle and the dropdown is incorrect in your markup. The button should be placed before the dropdown so that the focus will be correct when the users toggles the button, swap them.

  Aside from those, really great work again on this one.

  Marked as helpful

  0