0

I'm working on an MVC app and I stumbled upon a problem that I have not found a solution for.

What I'm trying to accomplish is to dynamically generate a (sequential) "tabindex" for all my anchor tags. The page needs to be keyboard friendly and all anchors need to have a numerical order for keyboard navigation.

I figured I could use "AppState" property to define a global variable like so:

@{
    AppState["tabindex"] = 1;
}

And throughout my code (in the partial views) reference the variable in the HTML (as an attribute) like so:

<a href="/..." tabindex="@(App.tabIndex += 1)">...</a>

My layout page (master razor template) looks like this:

<body>
    <header role="marquee">
        @Html.Partial("main_navigation")
    </header>
    <main>
        @RenderBody()
    </main>
    <footer>
        @Html.Partial("footer")
    </footer>
</body>

The problem I have is that the "HTML.Partials" are being rendered first and then the "RenderBody()".

The result looks like this:

<body>
    <header>
       <a href="/item1" tabindex="1">Item 1</a>
       <a href="/item2" tabindex="2">Item 2</a>
       <a href="/item3" tabindex="3">Item 3</a>
       <a href="/item4" tabindex="4">Item 4</a>
       <a href="/item5" tabindex="5">Item 5</a>
    </header>
    <main>
        <button tabindex="11">Button 1</button>
        <button tabindex="12">Button 2</button>
        <button tabindex="13">Button 3</button>
        <button tabindex="14">Button 4</button>
        <button tabindex="15">Button 5</button>
    </main>
    <footer>
        <a href="/item6" tabindex="6">Item 6</a>
        <a href="/item7" tabindex="7">Item 7</a>
        <a href="/item8" tabindex="8">Item 8</a>
        <a href="/item9" tabindex="9">Item 9</a>
        <a href="/item10" tabindex="10">Item 10</a>
    </footer>
</body>

Notice how the tabindex values are correct in the header, then they jump to the footer and finish in the main tag.

Hopefully I explained the issue clearly enough.

Any feedback is greatly appreciated.

  • 1
    Those tabindex don't need to be sequential. You can start your header at 0, the body at 100 and the footer at 200. If you can put your item in the right order in the html and move them around with css, you wouldn't need tabindex. – the_lotus Aug 13 at 15:51
  • @the_lotus Thanks for your feedback. The site I'm working on has to be ADA compliant. That is why I need them in order. And yes, I could move them around with CSS, but that is a workaround. I was hoping to figure out how to do it properly. – jnkrois Aug 15 at 17:22
  • I'm pretty sure ADA allow gap in tabindex. – the_lotus Aug 15 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.