PB101: L16 - Simple Accessible Navigation

Поделиться
HTML-код
  • Опубликовано: 6 ноя 2024

Комментарии • 56

  • @VascoDanielBaiao
    @VascoDanielBaiao 11 месяцев назад

    Started seeying this video thinking I would only review what I already know from videos. I was wrong and have learned new things, again.

  • @eucalyptech
    @eucalyptech Год назад

    Oxygen builder team made a breakthrough last year with the new accessible menu... Thank you Kevin for this episode 😃

  • @bonhomie.studio
    @bonhomie.studio Год назад +1

    Thank you, Kevin. Another great, informative video. Bricks is truly a great builder because they listen to the community and thank you for lobbying on behalf of everyone to make it the best.

  • @ted-e-baer
    @ted-e-baer Год назад

    A little behind watching this videos. Wanted to drop a like and a thank-you for another video, Kevin. I am enjoying this series. I'm an inner-circle member, but appreciate wherever I can digest these tutorials.

  • @MrBalloonatic
    @MrBalloonatic 9 месяцев назад

    i am glad to see this at last! ❤

  • @RiyazMShihabdeen
    @RiyazMShihabdeen Год назад +1

    Kevin, this was an eye-opener for us regarding navigation and accessibility. Your expertise in this area is truly commendable, and I highly appreciate the knowledge you shared. Excellent work, and I'm grateful for the valuable insights! Keep up the great work!

    • @Gearyco
      @Gearyco  Год назад +1

      Glad it was helpful!

  • @Gojiyaravi
    @Gojiyaravi Год назад

    Another informational lecture ☺️.

  • @davidwalls2304
    @davidwalls2304 Год назад

    Kevin, I greatly appreciate the content in this lesson. I was particularly interested in the section(s) surrounding accessibility and how to properly test for accessibility. I also kind of forgot about keyboard navigation and focus style, somethings I'll need to remember in upcoming projects. Thanks for this video. I'm looking forward to the next lesson. The PB101 series continues to teach me so much!

  • @thebizpixie
    @thebizpixie Год назад

    So glad I discovered Bricks!

  • @rickdugmore
    @rickdugmore 11 месяцев назад +1

    Fantastic!

  • @LupusDesign
    @LupusDesign Год назад

    A very clear explanation as always. Many thanks Kevin.

  • @podes712
    @podes712 Год назад

    Great again! very helpful! Thank you so much Kevin!

  • @webinkedesign
    @webinkedesign Год назад

    Great video as always, but I have to ask, what was that AutomaticCSS feature with the dropdown shortcuts at mark 10:30? Is there a setting to get that?

    • @Gearyco
      @Gearyco  Год назад

      Contextual menus. Make sure they are turned on in settings and then right click.

  • @kareem2928
    @kareem2928 Год назад

    Well explained Kevin. Appreciated!

  • @danstevens1974
    @danstevens1974 Год назад

    Thanks Kevin - really insightful and helpful. I've done a quick check of my Breakdance desktop menu and had a quick peak at the DOM and everything seems to be in good order out of the box...

    • @Gearyco
      @Gearyco  Год назад

      Yes they spent a lot of time making sure it was correct.

  • @PicSta
    @PicSta Год назад

    I wish that Bricks changes to in the future. The gets treated like an ul, so you can have li's inside as normal, but it will be semantically more correct and still accessible for SR and keyboard navigation.

    • @Gearyco
      @Gearyco  Год назад

      Menu is semantically inaccurate in main navigation. The menu element is for interactive context menus, not navigation.

    • @PicSta
      @PicSta Год назад

      @@Gearyco thought it works for both situations, I will research that a bit further.

    • @Gearyco
      @Gearyco  Год назад

      @@PicSta it "works" but it's not correct for main navigation.

    • @PicSta
      @PicSta Год назад

      @@Gearyco I get that, thanks for clarification.

  • @DeanWentzel
    @DeanWentzel Год назад

    Thanks, Kevin good explaination

  • @derekshort
    @derekshort Год назад

    Good video! Thanks 🙏🏻

  • @emadhosen
    @emadhosen Год назад

    Thanks Kevin. regarding the aria label attribute, how can I add them to my navigation? I am using Bricks and Frames but when I inspected the code I found there is no aria label attribute.

    • @Gearyco
      @Gearyco  Год назад

      Depends on how your nav is structured and which element you're using.

  • @zunkiandre
    @zunkiandre 6 месяцев назад

    Isn't it a requirement that you must also be able to control the navigation menu using the arrow keys? like its mentioned on the w3 page unter pattern menu.

  • @John.Rearden
    @John.Rearden Год назад

    Good lesson

  • @larryfarr
    @larryfarr Год назад +1

    Perfect. Timely and NEEDED. Thanks for doing yet another excellent video. You pack a whole lot of information in a short time. I'm wondering about the Skip to Main Content part though. Does that go in the header? Can you explain in a future video how to set that up?

    • @Gearyco
      @Gearyco  Год назад +3

      Yes it goes in the header before anything else. I forgot to mention it because bricks adds one automatically for you. If you’re a bricks user it’s already taken care of.

    • @larryfarr
      @larryfarr Год назад +1

      @@Gearyco Sweet! That's great. Thanks Kevin!

  • @MrBalloonatic
    @MrBalloonatic 9 месяцев назад

    with regards to best practices, if you have a drop-down, should the parent element have a link applied or just be a placeholder? with specific attention of a11y)

    • @Gearyco
      @Gearyco  9 месяцев назад

      It’s more about UX - the parent should be a placeholder. It’s confusing to visitors when it’s not

  • @stewtech
    @stewtech 11 месяцев назад

    What is the apple software used for announcing the nav bar items?

    • @Gearyco
      @Gearyco  11 месяцев назад +1

      It’s called voiceover it’s built into macOS

  • @gnentrepreneur
    @gnentrepreneur 9 месяцев назад

    I got frames, any tuts you recommend to start with?

    • @Gearyco
      @Gearyco  9 месяцев назад

      Have you subbed to the ACSS channel?

  • @behnamashouri2449
    @behnamashouri2449 Год назад

    Hi kevin. Thanks for videos
    I’m using tabs nestable in bricks and i want to change tabs on mouse hover not click.
    Switching between tabs is only possible by clicking. Is it possible to change tabs with Hover? (with coding) What kind of code should I use for this purpose?

    • @Gearyco
      @Gearyco  Год назад

      Possible yes but not necessarily easy.

  • @bordzee
    @bordzee Год назад

    Whats the best nav to use? The classic or the nested nav?

    • @Gearyco
      @Gearyco  Год назад +1

      Depends on what you need to do. Typical standard nav use the old one

    • @bordzee
      @bordzee Год назад

      @@Gearyco thank you for the reply, how about in your own ways, what is the best to use?

  • @Hassanakora
    @Hassanakora Год назад +2

    Create video on add two menus also add menus to footer with the right way accessibility wise

  • @xvm.ch.
    @xvm.ch. Год назад

    Hi Kevin
    I don't want mobile menu, because I like app menu style. how can I disable it completely?
    I mean no HTML in the background for mobile menu

    • @Gearyco
      @Gearyco  Год назад

      There’s a setting in the builder to disable it.

  • @tbarscott
    @tbarscott Год назад

    This might be a stupid question, but what is the point of hover styles on mobile?

    • @Xboxers
      @Xboxers Год назад

      I might think it has to do something with mobile accesibility that also creates a box around the item. not sure though

    • @Gearyco
      @Gearyco  Год назад

      hover or focus? You didn't tag a timestamp so I'm not sure what you're referring to. But there are assistive technologies for mobile devices as well.

    • @tbarscott
      @tbarscott Год назад

      @@GearycoI don't know how to tag a timestamp, but have a look at around 15min10sec.

  • @Smnthaas
    @Smnthaas Год назад

    Still got my fingers crossed for Divi to make acessibility a priority. Bricks needs my focus right now 👐

    • @Gearyco
      @Gearyco  Год назад

      From what I’ve heard 5.0 is even worse…

    • @Smnthaas
      @Smnthaas Год назад

      Oh my gosh. I need to say goodbye to a family member 😂
      I've spoken to divi employees quite a few times about the lack of webaccessibillity options. For Europeans it is a big priority with the new law coming up. If Divi is not going to do something about it I guess they will end up losing a lot of users from June 2025....

  • @AlexDelaforce
    @AlexDelaforce 11 месяцев назад

    Thanks Kevin for your PB101 series - high value!
    I see at 5:49 it looks like you have a 'section' (Header Alpha) with a 'container' (Inner) then a logo and the Nav Menu. This structure is the same used in every other YT video I have found for Bricks, except .... in one of Cracka's tutorials (ruclips.net/video/U_LTJOWgcns/видео.htmlsi=BH4yi3dT5woNGC7i&t=121) he explains that 'Section' elements shouldn't be used in typical navigation headers for semantic reasons. I thought I remembered you talking about this but I can't find the video (maybe in a WDD Live episode). Can you comment? Should I be looking to use a Div with a Container and then a Logo and Nav inside as Cracka suggests? Thanks again.

    • @Gearyco
      @Gearyco  11 месяцев назад

      You can use the section element and just swap its HTML tag to a div.

    • @AlexDelaforce
      @AlexDelaforce 11 месяцев назад

      @@Gearyco got it 👍. Thanks Kevin, happy holiday to you and family.