Generated Radio Button Tab

Question

I cannot seem to get my radio buttons to allow for navigation through them within the table below. The table itself doesn't even select with the tab button, but all other elements on the page do. The radio buttons and table rows are generated through a loop. Is there a way to get the tab button to select the table, then navigate through the radio buttons? Please let me know if you need more information.

Webpage:

<%-- Loop through all managers and write the radio button options --%>
 <%int managerIndex = 1; %>
   <%foreach (Manager manager in Managers) %>
            <%{ %>
                <%string responseValue = x;%>
                    <td>
                        <table id='RadioButtonList<%=managerIndex %>' border="0" style="height:25px">
                    <%=HtmlHelper.GetRadioButtonGroupHtml("Radio" + managerIndex, item.SurveyQuestionID, manager.ManagerID, manager.ManagerRoleID, rowClass, "radioList1", responseValue)%>
                        </table>
                    </td>
                <%managerIndex++; %>
            <%} %>
            </tr>

Code-behind:

StringBuilder html = new StringBuilder();

html.Append("<tr>");

// create a hidden blank value that is checked by default
html.Append(String.Format("<td style=\"display:none\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + 0, questionId, managerId, "", group));

// create the radio buttons for the values of 1-5
for (int i = 1; i <= 5; i++)
{
    // set the button to 'checked' if the response value matches
    if (i.ToString() == responseValue)
        html.Append(String.Format("<td style=\"width:30px\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + i, questionId, managerId, i, group));
    else
        html.Append(String.Format("<td style=\"width:30px\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" /><label for=\"{4}\"></label></td>", id + i, questionId, managerId, i, group));
}

// create the N/R radio button and set it to 'checked' if necessary
if (responseValue == "NA")
    html.Append(String.Format("<td style=\"width:30px; background-color: #798d8f; text-align: center;\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" checked/><label for=\"{4}\"></label></td>", id + 6, questionId, managerId, "NA", group));
else
    html.Append(String.Format("<td style=\"width:30px; background-color: #798d8f; text-align: center;\"><input id=\"{0}\" type=\"radio\" name=\"ctl_QID{1}_MID{2}\" value=\"{3}\" /><label for=\"{4}\"></label></td>", id + 6, questionId, managerId, "NA", group));

// append the closing <tr> tag
html.Append("</tr>");
return html.ToString();

Answer 1

You can add a tabindex attribute- tabindex="0" to your input radio elements. They will be focused through (in the order they are in your source) using the tab key.

the 0 index is a special index. From MDN:

tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.

You can use a different order if you like too by changing the index value.