Automatically create TabIndex in a repeater

In order to conform with the Section 508 Accessibility guidelines, and the WCAG Guidelines, you must provide a tabindex for all of your buttons, checkboxes etc.
So what should you do if you create these elements within a Repeater List Control? Then you don’t know how many buttons, checkboxes etc. you have.

The solution is to create a code-behind property (or function) and then call it using the <%# … %> syntax. Please observe the following example:

<asp:Repeater ID="repGroups" runat="server">
        <asp:CheckBox ID="cbGroup" Checked="true" runat="server" 
         TabIndex='<%# TabIndex %>' Text='<%# Eval("Title") %>' />

Notice that asp:CheckBox uses the TabIndex='<%# TabIndex %>’ to call a property on the page’s codebehind file. This property simply increases an integer and returns the new value:

private int _tabIndex = 0;

public int TabIndex
    return _tabIndex;

The private variable _tabIndex is reset each time the page is called, and the TabIndex property returns a new value each time it is called, giving you tabindexes from 1 to infinite.


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, c#, General .NET and tagged , . Bookmark the permalink.

2 Responses to Automatically create TabIndex in a repeater

  1. brainz says:

    Works like charm awesome :)

  2. muhasin says:

    love u man its working

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.