Multi-page design project

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Val!

  Here are a few ways you can do to improve this solution.

  • Alternative text for the logo should not be "Dark logo".
  • For images containing text, make sure the alternative text includes the image's text. In this case, the Designo logo should have an alt value of “Designo”. Reference — Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text
  • Use <button> element for the hamburger menu. So, wrap the hamburger menu icon with that.
  • Use the same <button> element for the close button. So, change the icon from hamburger menu to close icon with JavaScript.
  • Add aria-expanded to the hamburger menu button. This way, assistive technologies can announce the state of the button, whether it is expanded or collapsed.
  • Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, they can get confused.
  • Learn more — How-to: Accessible heading structure - The A11Y Project
  • Not every image needs alternative text. Decorative images should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
  • Use aria-label to provide an accessible name to each social media link.
  • Learn about "accessible name" — What is an accessible name? - TPGi
  • Wrap the <input> elements and the submit button with <form> element. Now, the email input does not even have the native HTML validation. For example, "email#email.com" is invalid email and native validation should be able to catch that.

  I recommend learning to create accessible form validation. Accessible form validation means that the error messages get pronounced by screen readers, each input has a label, and using the correct type of input. I wrote an article to help you understand doing all of that.

  How To Create Accessible Form with Boring Design?

  I recommend using one CSS to style all the pages. Using multiple CSS can impact the performance of the website because the browser has to download new CSS for the new page. With one CSS, the browser only needs to download one file for the entire website.

  Some suggestions for the JavaScript:

  • Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.
  • Never use the HTML event handler attributes. Here are the reasons.
    • It is not a good idea to mix up HTML and JavaScript. It is best to keep them separated so that, you can apply the JavaScript to multiple HTML documents.
    • It can make HTML and JavaScript hard to maintain. If there are a lot of event handlers, then the HTML starts looking messy.
    • It makes hard to not break the functionality since both are mixed up together. So, whenever you want to refactor the HTML, there is a high chance that you need to break the functionality as well.
  • Learn more — Introduction to events - Learn web development | MDN #inline_event_handlers_—_dont_use_these
  • Try using Regular Expression to validate email address. This way, you can provide a different error message when the user's email is not valid.

  I have three recommended videos. The first one tells the truth about HTML. HTML is hard. The other two talk about modern CSS techniques and approaches that can eliminate many media queries.

  Manuel Matuzović - Lost in Translation - YouTube

  Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

  Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps. Happy holidays!

  0
• 

  Renan Tiscoski•1,240

  @DonUggioniPosted about 2 years ago

  Hey Val,

  I think overall, it looks great! Good job!

  The only thing I would point out is those arrows in the phone number field, they look a bit off. Have you considered removing them?

  That's it, keep it up!

  0