Fylo Landing Page With Two Column Layout

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Sabira! Happy new year too!

  I don't recommend removing the scrollbar. It is one of the ways for users to navigate the website. So, make it appear again.

  One of the rules of Inclusive Design Principles is to offer choices to do an action. Users can use the scrollbar as one of the ways to navigate the web content. So, you should not remove it.

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

  • Remove the word "logo" from the logo alternative text. The <img> semantic meaning is enough to tell users that it is an image.
  • Replace the second <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.
  • 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.
  • Remove all <br> elements inside the <p>. Separate the text by wrapping the first text with a <p> and wrapping the other text with a different <p> element.
  • If the logo is wrapped by an anchor tag, add the link destination inside the alternative text too. For example, alt="Fylo - Home".

  I hope this helps. Happy holidays!

  Marked as helpful

  1

  ---

  

  Sabira K.•80

  @hello-sabiraPosted almost 2 years ago

  @vanzasetia Hello, thanks for all the detailed information about accessibility. In normal cases, I always keep the scrollbar, it's just for challenges like these I find it aesthetically pleasing to customize or remove them hehe.

  Do you have any idea about how to improve the layout?? I am not happy with my way.

  Also, what to do in case of the HTML validation errors?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @hello-sabira

  You are welcome.

  Which part of the page layout you are not happy with?

  For the HTML errors, here are the explanations:

  • Space is not allowed as the value in the src attribute of <img>. So, you need to remove the space inside the Group 42.svg file name. For example, you can use a dash instead, Group-42.svg.
  • The same goes for the value in the href attribute of <a>. Space is not allowed. So, remove the space. From mailto: [email protected] to mailto:[email protected].

  For file naming convention, you want to:

  • Use lowercase for everything. For example, do group-42.svg instead of Group-42.svg.
  • Use hyphens instead of spaces. For example, do my-favorite-image.png instead of my favorite image.png.

  After you fix the issues, generate a new report.

  Marked as helpful

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @hello-sabira

  For the scrollbar, you better customize it instead of removing it.

  1

  

  Sabira K.•80

  @hello-sabiraPosted almost 2 years ago

  @vanzasetia Hello, thanks for the advice. I'm not happy the way I'm laying out my content, as it's not very responsive. Maybe there are better ways to structure this. I'm just using way too many divs and widths without being efficient about it.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @hello-sabira

  If that's the case, then I recommend removing as many width and min-width properties as possible. Most of the time, you only need a max-width to prevent the content from becoming too large on wide screen sizes.

  For <div> elements, I recommend trying to directly style the element instead of wrapping it with a <div>. For example, you can just style the <img> inside the <div class="marketing__img"> instead of wrapping it with a <div>.

  I recommend reading the following article to guide you to create a good responsive design.

  Responsive design ground rules (updated for 2021) | Polypane, The browser for ambitious developers

  1