Skip to content
Submitted over 2 years ago

Responsive Landing Page using CSS Grid and Flexbox

accessibility
James•160
@jameschein
A solution to the News homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

// I read somewhere it's OK to use an anchor element as a parent to multiple child elements. Was wondering if this is accepted practice?

// I have chosen to not use css background images but only img elements [also picture/ figure/ etc]. I have used 'aria-hidden=true' to hide decorative imagery for inclusivity. I fear I may been a little over-zealous here. Any thoughts?

// I have converted supplied imagery with web versions - is this permitted within the brief?

Code

Please log in to post a comment

Log in

Community feedback

  • Dusan Brankov•860
    @dusan-b

    Hello James,

    I just looked at your code and I like your approach towards web accessibility and semantic HTML. However, there are some changes I would consider.

    I see you've used the <a> element for your menu button. Instead you should use the <button> element, since its purpose is to perform an action (opening and closing the menu). Anchor elements are only there to navigate you to another page. Otherwise keyboard users wouldn't be able to go through the menu when it's hidden, and visually impaired users would get confused when using a screen reader.

    Another thing is, it's unfortunately not valid (yet) to specify the aria-hidden attribute on <picture> elements. A reasonable solution would be to leave the alt attribute empty. It's acutally even better this way, since this method has been established a lot longer and will be accepted by more assistive technologies. But keep in mind, this is only applicable to decorative images.

    Also, the <main> element should contain all the content which is unique to the page, in this case everything except header and footer. Otherwise you would keep getting the warning "All page content should be contained by landmarks".

    I hope this helps. Keep up the good work!

    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