Skip to content
Submitted about 2 months ago

Responsive article preview component

edpau•440
@edpau
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I tried to use aria-expanded, aria-controls and aria-haspopup to improve accessibility for the share menu, to inform assistive technologies about the current state of the expandable share menu. Please comment on my approach.

improving accessibility has turned to be more challenging than I expected. For the mobile version, I need to hide the author content from screen readers, while for the desktop version, it doesn't need to be hidden. There are many factors to consider.

Please advise how I can improve the accessibility.

Please also share any good articles on accessibility for beginner.

Community feedback

  • Daniel Alejandro Cano Cardona•110
    @DacardonacPosted about 1 month ago

    Hey Edpau! I hope you're doing well 😊. I was reviewing your solution and honestly, everything looks great! Congratulations on the awesome work. I just found a few areas where you could make some improvements to optimize your project even more:

    - Contrast: The background and foreground colors don't have enough contrast. This affects accessibility, as it could make it difficult for some people to read the content, in this link you can read more about this: Color contrast a11y

    - SEO: I noticed there are no Metadata tags <meta>. This can negatively impact SEO since search engines rely on that information to index your page properly. Here is a link where you can read more about this topic Metadata and SEO

    - Images: I recommend using .webp format for your images. This will improve the performance of your project by reducing load times.

    Also, as a general suggestion, you could organize your styles by using Sass/Scss and modularize them by components. This way, you’ll have better control over your styles and avoid having one long CSS file.

    I hope this helps! Keep up the great work, you’re doing awesome! 💪

    1

Please log in to post a comment

Log in with GitHub

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