Skip to content
Submitted about 3 years ago

Huddle responsive landing page with HTML and CSS

Ax-cd•310
@Ax-cd
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! I have accessibility issues with this solution when using links and icons since there is no text to tell the purpose of the link and the <i> doesn't accept alt text like an <img>... does anybody else faced this problem? Thank you :)

Code

Please log in to post a comment

Log in

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    Hello there! 👋

    Congratulations on finishing this challenge! 👏

    Regarding the accessibility issues, you can add aria-label attribute to each anchor tag to give some text about the link. For example, if it is a Facebook icon then the value for the aria-label would be aria-label="Facebook".

    I have one question, each issue has the "Learn More" link. So, have you visited the site? Right there, you can get more information about the issue and how to solve the issue. 😉

    I have a few suggestions for this solution.

    • I would recommend making the visible h2 as the h1 and then removing the visually hidden h1. I think the current h2 can be a great h1. Also, I assume that it is the first part of the landing page.
    • I would not recommend hiding the attribution. The users who don't use screenreaders would have no idea that there are links to the Frontend Mentor challenge page and your profile.

    I hope this helps! Happy coding! 😁

    Marked as helpful

Join 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