Submitted almost 2 years ago
Huddle Landing Page w/ Alternating Feature Blocks
@spirit-101
Design comparison
SolutionDesign
Solution retrospective
All feedback is greatly appreciated - thanks!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi there! π
Here are some suggestions for improvements.
- For images containing text, make sure the alternative text includes the image's text. In this case, the Huddle logo should have an
alt
value of βHuddleβ. Reference β Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text <button>
element must always havetype
attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons- 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.
- Alternative text for images should not contain any words that are related to "image" (e.g. picture, photo, logo, icon, graphic, avatar, etc). It is already an image element (
<img>
) so the screen reader will pronounce it as an image.
For the styling, I recommend providing the non-minified CSS for people to give feedback on it.
I hope this helps. Happy new year!
Marked as helpful2 - For images containing text, make sure the alternative text includes the image's text. In this case, the Huddle logo should have an
- @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
- β οΈ The company info inside the
footer
needs to be wrapped inside anaddress
element. While each individual information needs to wrapped in ananchor
element.
More Info:π
- β οΈ The company directory needs to wrapped in a
nav
element and be built using theunordered list
element to create a single list. You will use the CSS propertycolumn
to style it.
More Info:π
MDN <ul>: The Unordered List element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! πππͺ
Marked as helpful1 - β οΈ The company info inside the
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord