Vanza Setia• 27,795
@vanzasetia
Posted
Hi, Faith! 👋
Here are some suggestions for improvements.
- Download and use the necessary icons instead of importing the whole Font Awesome library. This can improve the loading speed of your website.
- Make sure the alternative text includes the image's text for images containing text. In this case, the Huddle logo should have an
altvalue of “Huddle”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text - Remove all
<br>elements. Screen readers may read out<br>elements as "break" and not read the content within<br>s. Let lines wrap where they need to. Learn more about accessibility issues that can happen when using<br>— <br>: The Line Break element - HTML: HyperText Markup Language | MDN #accessibility_concerns - 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 do not add any information and serve only aesthetic purposes.
- Alternative text should not be hyphenated like class names or code. It should be human-readable.
- Wrap the text with a meaningful element like a paragraph element. There should not be text in
<span>and<div>alone. - Use
aria-labelto label each of the social media link in the<footer>. - Always use unitless numbers for
line-heightvalues to avoid unexpected results. Learn more — line-height - CSS: Cascading Style Sheets | MDN - Use
clamp()for fluidpaddingandmargininstead of just percentage numbers.clamp()allows you to set a maximum and minimum value. This can prevent an element from having very small spacing or very large spacing. Recommended tool: Fluid Responsive Design | Utopia - Use
remoreminstead ofpxfor font sizes. Never usepxunit. Relative units such asremandemcan adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS - Remove
max-widthfrom the<body>. It should always fill the entire page. Treat it as the main element of the web page. - Remove
width: 100%from the<body>styling. It is already the default styling.
I hope this helps. Have a great coding day! 😄
Marked as helpful
1
