Responsive intro-section made with tailwindcss and javascript

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 1 year ago

  I'm afraid this overflows my mobile screen a lot and behaves strangely when the mobile menu is open because I can still scroll. I'm away from a computer but I expect there may be problems at other screen sizes too.

  Before that though, I'll go through the html and list out some necessary changes & recommended improvements as those are the most important to start with...

  1. The mobile menu (hamburger) menu button must be the first element inside the nav. This is so that assistive tech users can find it easily.
  2. That same button must have an aria-expanded attribute, whose boolean value will toggle between false and true on click (thus communicating the state of the disclosure to assistive tech, if its expanded or collapsed). This is necessary on all buttons that trigger a disclosure so is needed on all of these "dropdown" triggers within the nav. They are not anchors. I've written up a full post about disclosure UI code and recommend you read it.
  3. Additionally, I recommend the hamburger open/close buttons are just one button. You can change which icon is visible within the button based on its aria-expanded state (true/false).
  4. The hamburger menu button must have an accessible name. Currently you are using the image alt for that, which is OK but it would need to say "navigation toggle" instead of "hamburger menu" and "close menu icon". Alternatively you could leave alt blank on those icon images and use aria-label on the button instead, or visually-hidden label text inside the button. The way you choose to solve it is your choice from those options.
  5. "Register" should be an anchor not a button. Same with "learn more".
  6. The paragraph underneath the h1 is definitely not an article. Make sure you understand what that landmark is for.
  7. The company logos are important content, not decorative in my opinion. You have to ask - are they included for a reason? It's to show clients. That's valuable information for people to know about a brand/service so must not be hidden from assistive tech users.
  8. I also think you are misusing the section element. This doesn't particularly matter as sections only have meaning when they are labelled. But as a general rule think of a section as a significant chunk of content that always has a heading, usually a h2). It should not be used as a generic wrapper for an image just to make a layout work. That's what a div is for.
  9. Try to make sure all content is contained within landmarks. That means the attribution should be in a footer.
  10. If links ever open in a new tab, make sure they include some visually-hidden text (eg in a span) that communicates that behaviour eg "(opens in a new tab)"
  11. Don't have empty divs in the html for no reason. I see one at the end of the nav for example.

  15

  Marked as helpful