Fylo landing page two column layout

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Akinrinlola olamide,

  Congratulation on completing this challenge. I have some suggestions regarding your solutions if you don't mind:

  HTML

  • The alternate text of the logo should not be our logo, Use the website's name as an alternate text, alt=”Fylo". Remember that a website logo is one of the most meaningful images on a site so use proper alt for it. The same for the footer's logo.

  • If you are going to leave the logo not wrapped by <a>, it’s better to place it out the <nav> as it does not navigate the user in anywhere (only an image).

  • look up a bit more about how and when to write alternate text on images. Learn the differences between decorative/meaningless images vs important images . For decorative images, you set an empty alt to it with an aria-hidden=”true” to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images. For informative images you write a proper alternate text.

  • You may use <address> tag to wrap the contact information class="first-col" for the author/owner of a document or an article (email and phone number). By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

  • You should use the<nav > landmark to wrap the footer navigation. Then you should add aria-label=”secondary “ or aria-label=”footer” to it. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. Thenavelement in the header could use an aria-label="primary" or aria-label=”main” attribute on it. The reason for this is that, you should add the aria-label for a nav element if you are using the nav more than once on the page.You can read more in MDN

  • Instead of using a generic div .form to wrap the form , you should use <form> A button with no type attribute acts as type=”submit”, and will attempt to submit form data when clicked. Be explicit in your intentions. Be explicit on the button's type.

  • You should use <header> and <main> to improve navigation experience on your site for users of assistive technology. .HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Landmarks allow screen reader users to navigate through sections of your website by skipping to content that interests them. Landmarks could be seen as the logical layout of the website's UI, which is divided into e.g. header, navigation, main content, and footer. So the usage makes sense in any case.

  Overall great work! Hopefully this feedback helps.

  0