LOOPSTUDIOS LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 1 year ago

  Hello there! 👋 The solution you provided five months ago for this challenge looks great! 🌟 However, I have a few suggestions to address some potential drawbacks in terms of accessibility:

  • Firstly, let's talk about the "main__creations" section:

    The elements in that section have a hover effect, making them seem like interactive elements such as buttons or links. Since you're showcasing a list of "creations", and users might expect to navigate to these "creations" by clicking on them, it might be more accessible to implement actual links (<a>) instead of using <div>.

    Now, here are the drawbacks of using <div> instead of a link:

    • Users who rely on keyboard navigation can't easily move through the "creations" using the Tab key.
    • There is no pointer cursor in your solution.
    • Users might expect some action to occur when they click on the items.

    For a more elegant solution, you might want to consider implementing some of the techniques shared on this page: Cards - Inclusive Components 📘.

  • Consider adding a "Skip to main content" link to your solution:

    This helps users bypass header links and directly access the main content, improving the experience for those using screen readers or keyboard navigation.

    You can follow a guide on how to create a "Skip to content" link by visiting the following link: How to Create a "Skip to Content" Link | CSS Tricks 📘..

  • Media Queries and Horizontal Scrollbar:

    Lastly, a horizontal scrollbar appears between 56em (896px) and 1024px due to a single media query and the "OUR CREATIONS" section. You could either add more media queries or use the RAM (Repeat, Auto, Minmax) technique in CSS to avoid the need for multiple media queries.

    You can learn more about the RAM technique here: Repeat, Auto, Minmax | Web.dev📘..

  These suggestions are aimed at enhancing your project's accessibility. Keep up the fantastic work! If you have any questions or need further assistance, feel free to ask. 😊

  12

  Marked as helpful
• 

  Pratyush•60

  @pra-23845

  Posted over 1 year ago

  can you just tell me how did you make that animated sticky navigation bar i know how to make sticky navbar but not with animation i really like that one and i want to use it

  12
• 

  Saad Hisham•1,770

  @Saad-Hisham

  Posted over 1 year ago

  Welcome back, bro 🎉😅

  11
• 

  Lucas 👾•104,160

  @correlucas

  Posted over 1 year ago

  Congrats for the Mentor of the year!

  00