Responsive - Huddle landing page with curved sections
Design comparison
Solution retrospective
Hello ๐
This is my first junior challenge and I tried to use a good HTML semantic and to comment my CSS file.
Any feedback and advice are welcome ๐ค
Community feedback
- @MelvinAguilarPosted almost 2 years ago
Hello there ๐. Good job on completing the challenge !
I have some feedback for you if you want to improve your code.
- You should use the
aria-label
attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.
e.g.
<a href="#footer" class="facebook fa-brands fa-square-facebook" aria-label="Facebook"></a>
- For the company logo you should only use the company name as the
alt
attribute value. The word "logo" is not necessary, The screen reader users will hear "Graphic, Company name" and they will understand that the image is a logo.
-
Use a hidden label for the form. The sr-only label element is used to provide a label for an input element that is only visible to screen readers. This allows the input element to be properly labeled and described for users who are using assistive technologies such as screen readers. This helps ensure that all users, regardless of their abilities, can understand and use the form.
The class "sr-only" hides content visually and here are the styles to copy.
<form> <label for="email" class="sr-only">Name:</label> <input type="email" id="email" name="email"> </form>
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1 - You should use 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