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

@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.

@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.

@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.

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

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

And by the by, Assalamu alaikum warahmatullahi wabarakatuh Brother 🫂