Re: A new one: label vs. Scope

Phill Jenkins at pjenkins@us.ibm.com wrote:

> Does someone want to code up the sample complex table/form?

Already have :)


Form tags are outside the table and assumed in this example. Also, I am only
including the first data row as subsequent rows are the same with different
tabindexes. We aren't using accesskey because there is too much. It is
assumed the user will tab from cell to cell.

Note, I also declined to use scope="col" because I worried that a screen
reader might catch the heading and read it AND the title and didn't want the
user to have to hear every label twice. Once is enough.

Thoughts on this markup?

-A

            <table>
                <thead>
                    <tr>
                        <th valign="bottom">
                            First Name
                        </th>
                        <th valign="bottom">
                            Last Name
                        </th>
                        <th valign="bottom">
                            Favorite Color
                        </th>
                        <th valign="bottom">
                            Favorite Animal
                        </th>
                        <th valign="bottom">
                            Reviewed?
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td valign="top">
                            <input type="text" name="firstName" size="20"
maxlength="30" tabindex="24" title="First Name" />
                        </td>
                        <td valign="top">
                            <input type="text" name="lastName" size="20"
maxlength="30" tabindex="25" title="Last Name" />
                        </td>
                        <td valign="top">
                            <select name="favColor" tabindex="26"
title="Favorite Color">
                                <option value="None" selected="selected">
                                    Select a Color
                                </option>
                                <optgroup label="Blue Hues">
                                    <option value="Periwinkle">
                                        Periwinkle
                                    </option>
                                    <option value="Aqua">
                                        Aqua
                                    </option>
                                </optgroup>
                                <optgroup label="Red Hues">
                                    <option value="Crimson">
                                        Crimson
                                    </option>
                                    <option value="Blood">
                                        Blood
                                    </option>
                                </optgroup>
                            </select>
                        </td>
                        <td valign="top">
                            <input type="radio" name="FavAnimal"
value="Sloth" tabindex="27" title="Favorite Animal" /> Sloth
                            <br />
                            <input type="radio" name="FavAnimal"
value="Elephant" tabindex="27" title="Favorite Animal" /> Elephant
                            <br />
                            <input type="radio" name="FavAnimal"
value="Hyena" tabindex="27" title="Favorite Animal" /> Hyena
                        </td>
                        <td valign="top" class="tableCellNoLine">
                            <input type="checkbox" name="Reviewed"
value="reviewed" tabindex="28" title="Reviewed" />
                        </td>
                    </tr>
                </tbody>
            </table>

Received on Monday, 22 April 2002 16:30:47 UTC