E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 1 (In chronological order)

From: Angela French
Date: Fri, Sep 16 2011 4:18PM
Subject: concerns about whether checkbox groups is accessible
No previous message | No next message

Hello,
I am working with application developers where I work to try to ensure their apps are accessible. There is one UI convention they have used that has me concerned that I would appreciate some feedback on. The page displays a number of groups of checkboxes, but the html is dynamically generated and does not provide a common name attribute value for each checkbox. Because of this I have concerns that a screen reader user may not "get" that they are related as a group. In addition, the checkbox groups are visually rendered into two vertical columns to "shorten up" the page. This is done by breaking the items into two lists. An <h3> tag is used to provide a category heading for the checkbox group, but I have concerns about accessibility of this. Oh, and did I mention that the checkboxes are in a list? (this seems total overkill to me). I think I can help them come up with some CSS to eliminate the need to put the checkboxes into table cells, however if this is really not an
issue and I am over thinking (over worrying) this, then that would be good to know. Thanks for you insight.


Below is a fictitious sample of how the html code is rendered.

<h2>Goals</h2>
<table>
<tr>
<td>
<ul>
<li><input name="_1" type="checkbox" id="check1"/><label for="check1">Choice 1</label></li>
<li><input name="_2" type="checkbox" id="check2"/><label for="check1">Choice 2</label></li>
<li><input name="_3" type="checkbox" id="check3"/><label for="check4">Choice3</label></li>
</ul>
</td>
<td>
<ul>
<li><input name="_4" type="checkbox" id="check4"/><label for="check4">Choice 4</label></li>
<li><input name="_5" type="checkbox" id="check5"/><label for="check5">Choice 5</label></li>
<li><input name="_6" type="checkbox" id="check6"/><label for="check6">Choice 6</label></li>
</ul>
</td>
</tr>
</table>

<h2>Another headlines for some more related checkboxes</h1>
Etc.


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED =
http://www.checkoutacollege.com/