Bookmark landing page challenge hub

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, really nice work on this one. I think the layout for desktop looks nice, the site is responsive as well when scaling the browser. For mobile state, there are breakpoints where you already show the one-column layout for the mobile view, yet there are still section where the contents are still using the desktop version. For example, at 700px, for the features section, the tab-controls are in a single column-layout but the content underneath is still using the desktop version. It would be nice to just show both the mobile version for each content. Also, at the 700px, the navbar's login wraps on another row.

  Here are some other suggestions for the site:

  • Maybe adding a max-width on the body tag or in a wrapper for the content. If you try to zoom out on your screen, you will see that the site's content are just stretching along. Adding the max-width will prevent this one.
  • Don't add outline: none on the * selector if you aren't going to provide a custom visual-indicator. The outline provides guide to the user when traversing focusable elements on the site. Try using the tab key to navigate the site, it is hard to know where you are at. Use the :focus-visible selector to add the custom outline or just remove your declaration.
  • For this one, the body doesn't need to use a flexbox since the content of the site are just sitting on a single-column. Also, your html elements that are nesting the site's content right now are just being direct child of the body which should not be since they should be nested inside their own landmark element.
  • On this layout, it would be really great if your navbar is inside the header, the main-content inside the main tag and the bottom-most part inside the footer tag. Your body tag should only contain these 3 landmark element:

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

  • Currently, you are using 2 nav to create the mobile and desktop version of the navbar which shouldn't be the the case. You should only use a single nav and just use css to make it adapt for mobile and desktop state. This way, your markup won't be using repetitive element.
  • Also, even I suggested using a single nav, right now, the mobile-state nav is not being hidden properly. When you are making something hidden, you don't just use the width or opacity as they are only hiding the content visually but they are still in the dom. You should always use visibility or display to show/hide the item.
  • For this one, the topmost nav element could use an aria-label="primary" attribute on it. The reason for this is that, I would later suggest nav on the footer tag. You should add the aria-label for a nav element if you are using the nav more than once on the page. This will make it unique.
  • The website-logo could be removed from the nav since it is not being treated as a site-link.
  • When you are using the alt for the site-logo, always make sure to use the website's name and not just logo because if a user traverses the images on the site, what does logo text will provide really. Also, avoid those words that relates to graphic when using value for the alt attribute.
  • Those navlinks could be wrapped inside a ul tag since those "list" of links.
  • When you are making a text uppercased, you don't write them directly uppercased on the markup because instead of screen-reader reading the word as it is, it will read the word letter-by-letter. Type them in lowercase and use text-transform: uppercase in css.
  • login is better using a tag rather than button on this one.
  • Don't nest a tag inside the button and vice versa as they just create 2 extra traversing. Use only a single one.
  • Don't use header inside the main as it is as it will be treated as a regular element. It would be better if it was replaced by div.
  • You don't need to use br tag to make the word wrapped in another row like what you used in the h1 tag. Use max-width for the h1 so that it will make the word wrapped if it needs.
  • The decorative images on the site like the hero-image could use an extra aria-hidden="true" attribute so that it will be totally hidden for screen-reader users.
  • If you are going to use article for the features use a single article to wrap both the tab-controls and the content below since they are related to one another.
  • For the features section as well, your controls are working fine but using button alone without any extra attributes addition is not informative at all. For this one, you can implement it as tabbed interface. You can have a look at my implementation on my solution for this. This way, it will be more accessible for the users.
  • more info should be using a tag since it is more likely to be link.
  • Also, I just noticed that almost paragraphs on the site are using br tag to make each text wrapped. Again, max-width will be much better.
  • Almost every content on your solution is using section tag but used incorrect. section tag as landmark is not really informative as it does not give extra information about the tag unless you are using aria-labelledby attribute on it. This way, it will read out the heading tag to which it points to. If the section ( not section tag ) of the site doesn't have a visible heading text, a div would be fine.
  • For your faq section, you don't use a tag to wrap the whole accordions. Use only a tag for contents that will navigate a user in a different page of the site of just navigate them elsewhere. A div replacement will be much better on this.
  • Right now, the accordion answer is still in the dom even if they are not toggled since you are only use max-height. Remember to use the above method I mentioned. If you don't want the trouble on this, use details tag instead. It is already accessible and is suited for this kind of structure.
  • For the cta section, your input right now currently lacks associated label to it or an aria-label to which will define the purpose of the input element. Always include it so that user will know what they need to give on each input. Make sure that label is pointing to the id of the input as well.
  • Right now, when a user submits a wrong form values, the error is only seen visually but not really linked to the input properly. A proper way of validating it would 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.

  • The error-message as well is better to not disappear and just make it stay there so that user will still have a guide.
  • Another great idea to implement is to have an aria-live element that will either announce if the form submission is a success or not. This way, the user will be informed right-away on what is the status of the submission.
  • The button should have type="submit". Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" clicking the close-button will submit the form. Be aware of this kind of scenarios.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Those 3 links could be wrapped again inside in another nav element since those are still your site's navigational links. The nav would have an aria-label="footer" to it so that it will be unique.
  • The footer-navlinks could be wrapped again inside ul since they are "list" of links. They are just the same structure as the header's navbar.
  • 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 image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component. When creating interactive component, make sure that you are using interactive element so that it will be accessible for other users.

  SUPPOSING BUTTON IS USED

  • The hamburger 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 img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • Lastly, your placement of the dropdown and the hamburger is incorrect. The hamburger should be placed before the dropdown on the markup so that after the user toggles it, when they use the tab key, the focus will be set on the dropdown.

  Now, it is fine to have those lots of issues. Just always be aware in this kind of scenario and always try to aim accessible site. You can always take look at other people's solution or just search on the net for proper markup on a specific layout.

  Aside from those, great job again on this one!

  Marked as helpful

  3

  ---

  

  Johangly Sucre•230

  @johanglyPosted almost 3 years ago

  @pikapikamart Thank you very much, you helped me a lot :)

  0
• 

  issam•90

  @ombriicePosted almost 3 years ago

  nice work

  Marked as helpful

  1