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

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 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. 😊

  Marked as helpful

  1

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  @MelvinAguilar Thank you for providing detailed insights for my solution.

  For now i have made changes for accessibility on creations section. I think we don't want to add explicit roles for ul & li like role="list", role="listitem". Is it okay ?

  I have not used RAM in my entire css journey so in future i can give it a try, the resource you shared is absolutely valuable!

  Thank you.

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  @0xAbdulKhalid

  We should consider using explicit roles like role="list" and role="listitem" because some screen readers, specifically VoiceOver in Safari on macOS and iOS, tend to remove list element semantics when "list-style: none" is applied in CSS. Without these roles, users won't hear that the content is a list or receive information about the number of items.

  Note: Website checkers might consider it unnecessary, but it's essential for accessibility.

  For more information, you can refer to the following sources:

  • The Impacts of CSS on Accessibility | University IT Stanford University.

  • "Fixing" Lists | Scott O'Hara Blog.

  2
• 

  Pratyush•60

  @pra-23845Posted about 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

  1

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  @pra-23845 Yeah it's my pleasure to explain that feature to you!

  Let's take a look on code first,

  window.onscroll = function() {
  
  const header = document.querySelector("header");
  
   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    header.classList.add('header--active')
   } else {
     header.classList.remove('header--active')
   }
  };
  

  Here's the breakdown,

  • It selects the <header> element in the HTML document using document.querySelector("header") and assigns it to the header variable.

  • It attaches an onscroll event handler to the window. This event handler is triggered whenever the user scrolls on the webpage.

  • Inside the event handler, it checks the vertical scroll position of the page using document.body.scrollTop and document.documentElement.scrollTop. If the scroll position is greater than 20 pixels from the top of the page, it adds the CSS class "header--active" to the <header> element using header.classList.add('header--active'). Otherwise, if the scroll position is less than or equal to 20 pixels, it removes the "header--active" class using header.classList.remove('header--active').

  • In short, this code makes the header element change its appearance (e.g., background color or style) when the user scrolls down the page, and reverts to its original appearance when the user scrolls back up to the top. This is often used to create a "sticky" header effect or to reveal additional navigation options as the user scrolls.

  Let me know if any doubts you may have regarding this feature.

  1

  

  Pratyush•60

  @pra-23845Posted about 1 year ago

  i cant tell you how much happy i am right now i just learn a new thing

  thank you i really like your coding @0xAbdulKhalid

  0
• 

  Saad Hisham•1,750

  @Saad-HishamPosted about 1 year ago

  Welcome back, bro 🎉😅

  1

  ---

  

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted about 1 year ago

  @Saad-Hisham I'm happy to hear you warm welcome Bro! 🤠❤️

  And by the by, Assalamu alaikum warahmatullahi wabarakatuh Brother 🫂

  1
• 

  Lucas 👾•104,340

  @correlucasPosted 11 months ago

  Congrats for the Mentor of the year!

  0