Thanks for the feedback! Yes, it can be converted to a button, or we could use aria attributes to enhance the experience for assistive technology. To keep the video focused on the main topic, I opted for a simpler approach.
@@kYt0-cz3hk Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between tags otherwise it just looks like another list. Ideally there would be only one tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand. In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity. There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.
@@kYt0-cz3hk I just noticed that robinheyer708 's reply isn't showing up on RUclips. Seems the use of HTML tags in their reply has messed things up, so I am adding the same here. Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between nav tags otherwise it just looks like another list. Ideally there would be only one nav tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand. In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity. There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.
goat content, you'll learn a lot in 6 minutes unlike other tutorials which take about 20 minutes or so
Thank you!
Thank you so much! I learned several things today that I can use. You have an amazing ability to articulate these concepts!
Thank you for your kind words! I'm glad to hear that you found the content useful and learned new things. Your feedback means a lot.
u r videos are helpful bro nd make full videos on flexbox and grid
❤❤
Thank you! By the way, did you check out the mosaic layout video? It covers how to set up a gallery layout using CSS Grid.
awesome content
Thank you!
You share great videos
Thank you! Glad you like them.
The collapse/expand element shouldn't be an anchor tag, should be a button. Otherwise it will mess with screenreaders
Thanks for the feedback! Yes, it can be converted to a button, or we could use aria attributes to enhance the experience for assistive technology. To keep the video focused on the main topic, I opted for a simpler approach.
could u explain in layman's language wdym
@@kYt0-cz3hk Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between tags otherwise it just looks like another list. Ideally there would be only one tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand.
In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity.
There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.
@@robinheyer708 Thanks for your detailed response and contribution!
@@kYt0-cz3hk I just noticed that robinheyer708 's reply isn't showing up on RUclips. Seems the use of HTML tags in their reply has messed things up, so I am adding the same here.
Some people use screen readers that read websites for them. Usually people with a visual impairment. In order to make it possible for the screen reader to understand the website we need to make it as straightforward as possible. The tags should make it clear what the role of the element is as much as possible so your navigation should be between nav tags otherwise it just looks like another list. Ideally there would be only one nav tag so the screen reader can go there instantly when needed. A button should be for submitting or any clickable option. An anchor tag should be a link to another page. If you do end up using a tag differently you can give it an aria-attribute to say what its new role is (menu, input, etc.) so screen readers can still understand.
In this specific case I don't think it's a big deal since the screen reader doesn't need to expand the side bar to be able to see the names of the buttons, it's only a visual effect, and I doubt anyone would choose the collapse option when they hear it because it's simply not relevant to them and it's also unlikely that they would think it's going to navigate them somewhere else. But it's good practice to avoid any ambiguity.
There used to be a lot of attention for 'skip-to-main' links a couple of years ago to save impaired people from dying of boredom trying to get through all the navigation links and other stuff at the top of the page that they won't need the first time they visit a site but that seems completely gone these days.
Could you please share your codepen?
Sure, the demo link is ready in the description.
YOOO That's amazing
Thank you!