Способ применения меток не делает элементы формы полностью доступными. Метка должна наноситься на текст, связанный с элементом формы, а не только на элемент формы. Но нет ничего плохого в том, чтобы добавить еще одну метку поверх элемента формы, чтобы сделать всю область внутри TD интерактивной. Это на самом деле желательно, чтобы дать людям с двигательными нарушениями большую площадь для нажатия. <label for="whatever">Your label</label> предназначен для людей, которые используют программы чтения с экрана для просмотра веб-формы.
Кроме того, нет ничего невозможного в использовании JavaScript для улучшения доступности. JavaScript можно использовать до тех пор, пока он изящно ухудшается и не мешает читателям экрана читать страницу. Кроме того, нет способа использовать CSS для заполнения высоты ячейки в старых версиях IE (которые все еще используются большим количеством пользователей) без королевского искажения внешнего вида страницы. Тем не менее, вы должны использовать jQuery, чтобы заполнить все TD. Причина, по которой я не говорю, что JavaScript состоит в том, что jQuery избавляет вас от головной боли, скрывая множество сложного кода, необходимого для работы в подавляющем большинстве браузеров.
Вот полностью кроссбраузерный код с поддержкой jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Accessible Checkboxes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table > tbody tr").each(function() { // Loop through all table rows
var Highest=0; // We want to find the highest TD... start at zero
var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)
$($(this).children('td')).each(function() { // Loop through all the children TDs in order to find the highest
ThisHeight=parseInt($(this).height()); // Grab the height of the current TD
if (ThisHeight>Highest) { // Is this TD the highest?
Highest=ThisHeight; // We got a new highest value
}
});
$(this).children('td').css('height',Highest+'px'); // Set all TDs on the row to the highest TD height
});
});
</script>
<style type="text/css">
table {
border: 1px solid #000;
}
td, label {
height: 100%;
min-height: 100%;
}
th {
text-align: left;
}
td, th {
border: 1px solid #000;
}
label {
display: block;
}
</style>
</head>
<body>
<form action="whatever.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="3" cellpadding="0" summary="A description of what's in the table.">
<thead>
<tr>
<th scope="col">Some column title</th>
<th scope="col">Another column title</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
<td><label><input id="value1" type="checkbox" /> </label></td>
</tr>
<tr>
<td scope="row"><label for="value2">Value 2</label></td>
<td><label><input id="value2" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Вам нужно скачать jQuery и поместить файл jquery.min.js в папку с именем js.
Как видно из кода, форма сделана полностью доступной, добавив table summary, thead, th, scope, label for и т. Д. Конечно, она не была частью что вы спросили, но я добавил это в качестве дополнительного бонуса.