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">
  <HeaderTemplate>
   
<ul>
  </HeaderTemplate>
  <ItemTemplate>
   
	<li>      
     
<div>
        <asp:CheckBox ID="cbGroup" Checked="true" runat="server" 
         TabIndex='<%# TabIndex %>' Text='<%# Eval("Title") %>' />
     </div>
   </li>
  </ItemTemplate>
  <FooterTemplate>
   </ul>
  </FooterTemplate>
</asp:Repeater>

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
{
  get 
  { 
    _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.

Advertisements