@vanzasetia
Posted
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 oneh1on 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
@hello-sabira
Posted
@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?
@vanzasetia
Posted
@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
srcattribute of<img>. So, you need to remove the space inside theGroup 42.svgfile name. For example, you can use a dash instead,Group-42.svg. - The same goes for the value in the
hrefattribute of<a>. Space is not allowed. So, remove the space. Frommailto: [email protected]tomailto:[email protected].
For file naming convention, you want to:
- Use lowercase for everything. For example, do
group-42.svginstead ofGroup-42.svg. - Use hyphens instead of spaces. For example, do
my-favorite-image.pnginstead ofmy favorite image.png.
After you fix the issues, generate a new report.
Marked as helpful
@vanzasetia
Posted
@hello-sabira
For the scrollbar, you better customize it instead of removing it.
@hello-sabira
Posted
@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.
@vanzasetia
Posted
@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
