Sunnyside Agency Landing Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is really responsive and the mobile state looks really great as well.

  Alexis gave a great feedback, just going to add some on this one:

  • width: 100% on the body tag is not needed since block element uses 100% at default.
  • When using img tag, always include the alt attribute. If you don't include this, assistive tech will read the source path of that image which you don't want.
  • Website-logo should use alt="sunnyside".
  • Those navlinks should be a link so use a tag on them. An interactive component needs to use interactive elements.
  • If an img is just a decoration, use alt="" on it and add aria-hidden="true" on it so that it will be totally invisible.
  • aside is not really suited on this kind of layout. aside typically contains like controls , links as it it is a landmark that should contain those.
  • learn more should be a link as well since it will be a link to "learn more".
  • Each person's img should be using their name as the alt value like alt="Emily R", components like this when a person's image and name is both present, use their name as alt.
  • Person's name should be a heading tag. Also, do not just wrap text-content inside a b or span tags, use meaningful element to wrap them like p tag if it is just a regular text.

  FOOTER

  • Website logo again should have `alt="sunnyside".
  • Links below the logo could be inside nav since it is still your navigational links. Again, use a tag for each.
  • Social media links could be inside a ul element since those are "list" of links. Use a tag on them as well.
  • Each a tag that wraps the social media should either use aria-label attribute or an screen-reader only element inside it. The value will be the name of the social media like:

  <a href="facebook.com" aria-label="facebook">
   icon is in here
  </a>
  

  This way, user will know where this link would take them. You typically do this if there are no text-content that an assistive tech could read in your element.

  • Each social media img should be hidden as well using the method I mentioned earlier.

  MOBILE

  • Hamburger menu should be using a button element. Again, interactive component should use interactive elements.
  • The img for the hamburger should be hidden.

  SUPPOSING BUTTON IS USED

  • The button again should use either aria-label or screen-reader method. The value should describe what the button does, it could be aria-label="navigational dropdown menu".
  • The button should use aria-expanded="false" as a default attribute, it will be changed to true if the users toggles it, you will be using .setAtttribute method.
  • The placement for the hamburger toggle and the dropdown is incorrect, the button should be placed before the dropdown so that when a user toggles it, when they use either tab on keyboard or just use link or control on their screen-reader, they will be navigated on the dropdown.

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

  Marked as helpful

  0

  ---

  

  President Tree•360

  @PresidentTreePosted about 3 years ago

  @pikamart Thanks for the feedback! I'm working on add it to my project, but I have a question: what determines whether an image is decorative? A lot, if not all, of the images on the Sunnyside Agency Landing Page seem to be there to make the page more attractive, so does that mean all the images should have aria-hidden="true"?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @PresidentTree When to consider an image decorative somehow makes other a bit confused right.

  Hero are some:

  • Vector images. Vector images are these illustration of like cartoon-ish style. It is considered decorative because there are lots of this which a user or designer just uses to fill up or design sections.
  • Icons. A social media icons that are used for a link is just a decor, what is important is the text-content labeled on that icon. There are are icons as well.
  • Images. What kind of images, well like this one. If you look at it, for example the first section about the egg. On its left side the text-content, if for example the text-content is related to the image on its right, then it is meaningful. But since the image is not related, it is purely decorative. A hero-section's image sometimes is meaningful if it adds content or is really related to the site. For example an image of the app of the site.
  • Other images. Like those arrow-icons, since they don't add content just only for visuals, decorative as well.

  Basically anything that is just for visuals, they are decorative images.

  Important images are website logo, hero-images(if make sense), other logo for various website/company, people's images(if both name and image are present like on a testimonial/article), other images that is related to the site itself.

  0
• 

  Alexis Enriquez•260

  @alexiscenriquezPosted about 3 years ago

  Hi, I really love your solution. Consider making the h1 on the mobile view smaller. It is too big for a smaller screen. Use your web browser's dev tools to see what it would look like on a mobile device

  0