Responsive shortening-api-app using reacjs and material ui

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop looks really great and also, you could use the generate new screenshot, right now the screenshot doesn't show the look of your current site. The site is responsive as well which is really great and the mobile state looks really great.

  I tried to shorten a link, it is fast but, the link always seems to be broken:<

  Some suggestions would be:

  • Don't add the height: 100vh and overflow-x: hidden on the html and body tag. Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Only add overflow-x: hidden to containers that is nesting the content that you want to be hidden exactly, just making its scope clearer and narrower.
  • It would be great to have this markup:

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

  This way, all content of your page will be inside their own respective landmark element.

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="shortly".
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • You should have use nav for those 5 supposed links at the top since those are links/navlinks of your website. It will be really great to treat them as real link so use a tag for each of them.
  • You could/should wrapped as well the navlinks in a ul since those will be "list" of links.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like span to wrap the text.
  • button does not need tabindex="0" since by default focusable/tabbable elements have tabindex set.
  • Hero-section image should be hidden since it is only a decoration. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Always have an h1 on a page. You can use the h1 on the hero-section title instead of using h2 on it.
  • Your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element.
  • Right now, the error is seen visually but not connected to the input directly, though you got the aria-invalid correct, just a quick note on a proper approach will look like this:

  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");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • To further improve accessibility, you can use aria-live element that will announce either the form submitted is invalid or when the form submission is a success. This way, users will know right away what happened after they submitted the form.
  • Use a ul on to contain the result since those are "list" of shortened links.
  • Though I find it hard to make the copy more accessible since if you link it on the link itself, reciting the link-name will be confusing I think.
  • When using a heading tag, make sure you are not skipping a level. If you use h4 then make sure that h1, h2, h3 are all present.
  • Those 3 icons on the advanced statistics section is only decorative so use the above method to hide them.

  FOOTER

  • Since you are using svg on the website-logo, you should do it this way to have a labelled text on it:

  <svg role="img">
    <title id="website-name">Shortly</title>
  </svg>
  

  • Those 3 sections of the links could be wrapped inside a single nav

  <nav aria-label="footer">
    <ul>
      <li>Features
        <ul>
          <li>
            <a href="">{link in here}</a>
          </li>
        </ul>
      </li>
      <li>Resources</li>
      <li>Company</li>
    </ul>
  </nav>
  

  • Those social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Social-media svg should be hidden since it is only a decorative image so aria-hidden="true" on it.

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"
  • The svg inside the hamburger-menu should have been hidden since it is only a decorative svg use aria-hidden="true" on it.

  Biggest issues in here are semantic html usage. It is beneficial to learn a framework like react, but before doing so, make sure that your fundaments of html, css and vanilla js is great especially html. Because the last thing you want to create is an app that is not accessible. If you are finding yourself not doing best practices, maybe pausing for frameworks will be much better for now.

  Aside from those, great job again on this one.

  Marked as helpful

  1