The tabindex Attribute in HTML

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

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

  • @Colstonewall
    @Colstonewall 5 лет назад +6

    You always manage to do a tut on something I've never seen before, Steve! I simply love learning something new, such as this.

  • @cr7johnChan
    @cr7johnChan 4 года назад +3

    from Assam here Sir, gr8 explanation!

  • @dpavisha9214
    @dpavisha9214 4 года назад +7

    you are so good you deserve more likes KEEP MOVING!!!!

  • @randombucket5596
    @randombucket5596 2 года назад +1

    you know you are great sir, these videos saved lot of times , not once but many times, thank you very much

  • @amnaameir4413
    @amnaameir4413 3 года назад +2

    his voice💙!

  • @thelampeze9566
    @thelampeze9566 4 года назад +2

    VERY well done. Super easy to follow and exactly what I wanted to learn! Thank you!

  • @tamarakepreyeomgbuayakimi.1379
    @tamarakepreyeomgbuayakimi.1379 2 года назад

    Nice TUT man, happy Sunday , stay blessed.. .

  • @MoT-MasterOfThings
    @MoT-MasterOfThings 5 лет назад +2

    Hey steve u makes very helpful content.
    And the states u used are indian states.

  • @fluttergyan3546
    @fluttergyan3546 2 года назад

    great work sir

  • @Bruno-ds8ze
    @Bruno-ds8ze 5 лет назад +1

    Very useful tabindex , thankyou for the tutorial

  • @ranjeet5806
    @ranjeet5806 3 года назад

    Thank you for this smooth explanation

  • @krypton7792
    @krypton7792 2 года назад

    Very helpful! Thanks Mate!

  • @ronaginat4719
    @ronaginat4719 4 года назад +1

    Thank you, very good explanation

  • @tomisinergy4963
    @tomisinergy4963 4 года назад

    tabindex="tabindex work inside web browse by himself you dont need to add tabindex (but better check that before publish)" its going from the top to the bottom. And include all yours , , etc..

  • @klaudiuszfrajkowski2316
    @klaudiuszfrajkowski2316 2 года назад

    Great!

  • @hamdidemashqi1714
    @hamdidemashqi1714 4 года назад

    Thank's

  • @orangedrone
    @orangedrone 4 года назад +2

    Hey, do you mind if I use your HTML for a accessibility session I'm working on? (not on RUclips just, at a local conference) Won't be exactly the same, I'm adding some stuff to it (aria labels) But, I figured since this is about spreading knowledge & increasing awareness for accessibility that you would probably be ok with it.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +1

      Absolutely. I'm happy that I can help anyone working on educating people about accessibility online.

    • @orangedrone
      @orangedrone 4 года назад +1

      Steve Griffith Thanks! Subbed

  • @DanielPizarro184
    @DanielPizarro184 3 года назад

    thanks for this so muchhhh

  • @toma1610
    @toma1610 3 года назад

    Interesting! I‘d like to know if you have some videos about ARIA. Is it possible to use letters in tabdindex? For example you have a nava bar: Home-About-Contact. And you want to use as a tabindex “H” for home, “A” for About and “C” for contact. Is it possible? I read this somewhere long time ago.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      Screen readers have keyboard shortcuts for parts of the page. However, tab index is numeric.
      I do not have any ARIA videos yet.

  • @molekuax8646
    @molekuax8646 2 года назад

    thanks!

  • @DavidAshby1
    @DavidAshby1 3 года назад

    Hi, thanks fo the information. So if you want the fields to be accessible and you don't want anything other than the default layout you do not need to use tabindex?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      They all have default values for tabindex. You add the attribute when you want something other than the default.

    • @DavidAshby1
      @DavidAshby1 3 года назад +1

      @@SteveGriffith-Prof3ssorSt3v3 thanks

  • @TotesNotTom
    @TotesNotTom 4 года назад

    Hello I have a question which I'm sure you'd be able to answer, when using tabindex on HTML elements, would it be okay and advised to use tabindex on text, such as p tags, h1 tags, h2 tags? If you could help me out that would be great thanks, great video!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      You could add tabindex's to other elements but keep in mind that the real purpose is to let people navigate to different links and/or form fields in your page. The user is hitting tab to move. I would suggest that you add anchor tags without href values. This makes them targets which can have a tabindex. You don't need to put content inside the anchor tag for it to work as a target. Just give it an id.

  • @ilovecoffee7623
    @ilovecoffee7623 4 года назад

    Why is it that, if you click on an empty spot somewhere on the web page, and then click tab, the first item from the doc flow gets focused, regardless if its tabindex 0 or anything else? and if its 0 then it follows the normal doc flow by focusing other tabindex 0 items until they are gone, then it starts with tabindex 1?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад +1

      Keep in mind that when you click a webpage you are always clicking on something, even just the body or html elements. tabindex 0 and negative values are special cases. Something with a zero will be part of the sequential keyboard navigation but will come after anything that you give a positive tabindex value. The browser will use its location in the html to determine what it comes before or after (once the other numbers are done). The negative numbers can never be tabbed to.

    • @ilovecoffee7623
      @ilovecoffee7623 4 года назад

      @@SteveGriffith-Prof3ssorSt3v3 Thanks. "Sequentials" are the normal DOM order, correct? My question was sort of, why is it that, if the first element is made sequential by adding the tabindex 0, when you click on the body somewhere, the first element gets selected, and then when you press tab, it doesn't move to the positive tabindex, it first goes throught all the sequential orders first, and once they are done, then it enters the positive tabindex. Can i also ask you a question about enctype attribute on a form, and the GET and POST submission methods? I've asked a question on stackoverflow, but nobody could answer.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      @@ilovecoffee7623 Yes, the DOM order. Here is a good reference - developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      @@ilovecoffee7623 Here is a video I did about the different HTTP verbs like GET and POST - ruclips.net/video/Pm28JXFAu4Y/видео.html

  • @n_fan329
    @n_fan329 2 года назад

    How about if I have a dropdown menu and once an element focused/elected the parent element i know with spacebar i can open it and see all its children but i wanna fire double click on these children with spacebar , how can i do it please!!

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  2 года назад +1

      You can dispatch events to simulate user interactions with your elements. Here is a video on how to create your own events and dispatch them - ruclips.net/video/k5TSidZEH5s/видео.html
      And here is a video on keyboard events - ruclips.net/video/5-koI06rmcA/видео.html

    • @n_fan329
      @n_fan329 2 года назад +1

      @@SteveGriffith-Prof3ssorSt3v3 Hey man !! you are a ROCK !!

  • @ParthKanzariya-b1n
    @ParthKanzariya-b1n 8 месяцев назад

    what is the name of this vs code theme...?

  • @lycan2494
    @lycan2494 5 лет назад

    my tabindex is not working :/

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  5 лет назад

      Try validating your HTML.

    • @lycan2494
      @lycan2494 5 лет назад

      @@SteveGriffith-Prof3ssorSt3v3 what do u mean? i checked my html there's nothing wrong. also, when i put tabindex 1 and 2 respectively for a text and submit input. it removes them from the tabindex order. isn't that suppose to be negative index.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  5 лет назад

      Tabindex is purely an HTML thing. So, validator.w3.org/ - validate your HTML to be sure that it is correct.
      tabindex 1 and 2 should give specific sequence places for the elements, not remove them.