Skip to content
Submitted over 1 year ago

Semantic HTML5 markup CSS custom properties Flexbox Mobile-first workf

accessibility
Kristina•300
@frontend-en
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm most proud of how the project effectively solved the targeted problem

What challenges did you encounter, and how did you overcome them?

Faced with challenges such as integrating diverse technologies

What specific areas of your project would you like help with?

I would like to learn more about html accessibility

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    This looks good when I preview except that the component is hitting my mobile screen edges on all sides.

    Looking at code though I see some problems, some serious.

    1. There is no main landmark but every page should have one.
    2. The article has an aria-labelledby with no referenced element, meaning the label is broken.
    3. Don't add unnecessary roles. Anchors already have a link role.
    4. The list of links really should be in a list. That has an added benefit to assistive tech users as they can hear how many list items there are.
    5. Css imports are bad for site performance. It is much better to link fonts in the html head and to include the actual reset code at the start of the styles.
    6. I strongly recommend against changing the root font size. I've written a whole post about why the 62.5% hack is a bad thing: https://fedmentor.dev/posts/rem-html-font-size-hack/
    7. The card must not have a min width or width. This is causing it to overflow my phone screen and breaks a WCAG accessibility requirement for there to be no unnecessary horizontal scroll at 320px wide.
    8. The card should only have a max width in rem. This will ensure it can shrink narrower when necessary and it will scale correctly for others who change their text size.
    9. The links don't need a max width. They should be width 100% (or display block which would also be full width).
    10. It looks like the body is missing a min-height which means this component won't be centered on some screens.

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