Skip to content
Submitted almost 4 years ago

Fylo Two Columns Layout Landing Page HTML5 CSS3 Sass Mailgo

accessibility, lighthouse, sass/scss, bem
Vanza Setia•27,715
@vanzasetia
A solution to the Fylo landing page with two column layout challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello Everyone! 👋

I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

Questions:

  • I used aria-labelledby on every section. However, I'm not sure that it is a good thing to do. So, what do you think about it?
  • If you have a solid understanding of SEO and believe there is something wrong with it, please tell me about it.
  • Is this website has a good accessibility? Especially for screen reader, since I only tested the site using TalkBack.

Of course, any feedback is appreciated!

That's it! Happy coding everyone!

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Yeah Dave’s explanation is spot on. Sections actually aren’t announced by most screenreaders, but on a page like this that doesn’t matter because screenreader users rely on headings for navigation. Having headings in a good order is the most important thing.

    You do need to change some bits on your forms though.

    • aria describedby should not include the label as well as the error
    • error messages shouldn’t appear as soon as you focus on an input. Change that to be on blur and it would be a much better experience
    • Don’t change button labels with aria if there is already label text there

    Remember that aria-label is a last resort. It isn’t fully translatable and aria-labelledby, sr-only text or any html text will almost always be preferable

    I hope that makes sense

    Marked as helpful
  • P
    Dave•5,295
    @dwhenson

    Me again! I just saw you asked a few questions here and didn't get a response.

    Regarding your first question, my understanding is that this is necessary if you want to expose the section as a landmark on the page (i.e. equal in importance in the as the header, footer and navigation etc) otherwise it's not needed - especially if you have a good heading structure - tagging @grace-snow here to see if she can confirm or correct me here...

    Cheers Dave

    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