Agency landing page solution

Community feedback

• 

  P

  Ray•70

  @raygdevPosted about 1 month ago

  Overall the html looks good! I would like to make a suggestion about the multiple headers. There should only really be one header per page. For your navigation, it's good, but I would remove the other ones. They would be announced to screen readers and likely confuse or annoy them.

  Nice work on the navigation for mobile. It took me through some frustration trying to get that top right corner right! I would like to make some suggestions about your hamburger and some accessibility issues with your navigation:

  1. The hamburger image should be wrapped in a button. As it stands, AT users wouldn't know that it was an interactive element because it's announced as an image with it's alt text and not a button.

  2. Change the alt text in that image to something like "toggle menu" instead of just "menu". The alt text will become the accessible name (what is read to screen readers) of the button it is wrapped in.

  3. You need to have the button connected to the navigation that is not in view on mobile (your ul). This is done by:

  • giving the ul and id
  • providing an aria-controls that is equal to the ul id.
  • providing an aria-expanded that you can toggle true or false based on if the ul is visible or not.

  There are other things to consider as well but aria authoring practices guide is a good place to start

  Other things to note...

  For your footer:

  1. Your svgs should have an aria-hidde="true" on them. Otherwise they will be read to screen readers.

  2. Your links that wrap your svgs should have accessible names. You can do this two ways:

  • add a span before your svg with text like "Sunnyside facebook page" and the like for the rest of them and visually hide them
  • alternatively, add aria-label and the value of the text you would like to be the text for the link. For instance aria-label="Sunnyside Facebook page"

  Other than those things around accessibility, it looks great! Nice work!

  1
• 

  Anthony Molina•250

  @LivexTwinPosted about 1 month ago

  Just a small suggestio, if you want the background image to take up the full height of the viewport, you can use 100vh or newer units like dvh. Just a heads-up, though, for mobile devices it can get a little tricky with how the height is calculated.

  It looks great :)

  1
• 

  Marzia Jalili•3,920

  @MarziaJaliliPosted about 1 month ago

  Flawless! Keep going, man!

  😎😎😎

  0