Tuesday 11 November 2008

Accessible Radio Buttons

Problem: This has been on my mind for a while about the best way to use labels with radiobuttons and checkboxes. After discussing this with a friend we both looked at some solutions that would validate and point at all of the inputs. The reason that this came about is because we want to make sure that the markup is produced with the best semantic layout/meaning for screen readers as well as standard validation. We came up with the following courtesy of http://www.webstandards.org/learn/tutorials/the-label-element/ Now please bare in mind this isn't ground breaking but maybe should form part of all contact forms we create. Our normal solution would be something on the lines of: <p id="parCardholderConfirm" class="question">Are you the cardholder?</p> <ul class="radiobuttons"> <li> <input name="confirmcardholder" id="rbtnConfirmCardholderYes" runat="server" type="radio"> <asp:label id="lblConfirmCardholderYes" runat="server" associatedcontrolid="rbtnConfirmCardholderYes">Yes</asp:label> </li> <li> <input name="confirmcardholder" id="rbtnConfirmCardholderNo" runat="server" type="radio"> <asp:label id="lblConfirmCardholderNo" runat="server" associatedcontrolid="rbtnConfirmCardholderNo">No</asp:label> </li> </ul> New proposed solution: <asp:label id="lblCardholderConfirm" runat="server"> Are you the cardholder? <input name="confirmcardholder" id="rbtnConfirmCardholderYes" runat="server" type="radio"> <asp:label id="lblConfirmCardholderYes" runat="server" associatedcontrolid="rbtnConfirmCardholderYes">Yes</asp:label> <input name="confirmcardholder" id="rbtnConfirmCardholderNo" runat="server" type="radio"> <asp:label id="lblConfirmCardholderNo" runat="server" associatedcontrolid="rbtnConfirmCardholderNo">No</asp:label> </asp:label> The solution makes use of the implicit label rather than the normal explicit. Implicit Label: <asp:label id="lblName" runat="server"> Please enter your name: <asp:textbox id="txtName" runat="server" tooltip="Name" maxlength="50"> </asp:textbox> </asp:label> Explicit Label: <asp:label id="lblName" runat="server" associatedcontrolid="txtName">Please enter your name:</asp:label> <asp:textbox id="txtName" runat="server" tooltip="Name" maxlength="50"> </asp:textbox> My latest solution is: <label for="business">What business sector do you work in?</label> <p id="business"> <label for="retail">Retail</label> <input id="retail" title="Retail" type="radio"> <label for="business">Business</label> <input id="business" title="Business" type="radio"> </p> Please leave any feedback that may help sway my decision of the best method. Some of my resources include: The Web Standards Project

No comments: