Ultimate Web Site Drop Down Menu Forum

Ultimate Web Site Drop Down Menu Forum (http://www.udm4.com/forum/index.php)
-   CSS and HTML (http://www.udm4.com/forum/forumdisplay.php?f=8)
-   -   Making a basic table accessible. (http://www.udm4.com/forum/showthread.php?t=639)

bcarl314 09-18-2007 01:44 PM

Making a basic table accessible.
 
Does your web site have tabular data? If so, you're probably using a table to represent it. Below are a few things that you can add to your mark up to make your table accessible (if its not already).

Consider the following:

Code:

<table>
        <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Email</td>
        </tr>
        <tr>
                <td>John</td>
                <td>Doe</td>
                <td>j.doe@example.com</td>
        </tr>
        <tr>
                <td>Jane</td>
                <td>Smith</td>
                <td>janesmith@example.org</td>
        </tr>
</table>

Above is a simple table showing a list of names and email addresses. But it is not accessible. To make this table accessible, we need to add a few things...

1) Caption and summary information
2) Semantic Markup
3) Scope designations

First, we add the caption and summary...

Code:

<table summary="This table contains a list of names and email addresses from the company directory">
        <caption>Company Directory</caption>
        <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Email</td>
        </tr>
        <tr>
                <td>John</td>
                <td>Doe</td>
                <td>j.doe@example.com</td>
        </tr>
        <tr>
                <td>Jane</td>
                <td>Smith</td>
                <td>janesmith@example.org</td>
        </tr>
</table>

Next, we'll change the header row to use a header tag, and seperate that from the body with the thead and tbody tags...

Code:

<table summary="This table contains a list of names and email addresses from the company directory">
        <caption>Company Directory</caption>
        <thead>
                <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                </tr>
        </thead>
        <tbody>

                <tr>
                        <td>John</td>
                        <td>Doe</td>
                        <td>j.doe@example.com</td>
                </tr>
                <tr>
                        <td>Jane</td>
                        <td>Smith</td>
                        <td>janesmith@example.org</td>
                </tr>
        </tbody>
</table>

Finally, we'll mark the colums and rows using the scope attribute...

Code:

<table summary="This table contains a list of names and email addresses from the company directory">
        <caption>Company Directory</caption>
        <thead>
                <tr>
                        <th scope="col">First Name</th>
                        <th scope="col">Last Name</th>
                        <th scope="col">Email</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td scope="row">John</td>
                        <td>Doe</td>
                        <td>j.doe@example.com</td>
                </tr>
                <tr>
                        <td scope="row">Jane</td>
                        <td>Smith</td>
                        <td>janesmith@example.org</td>
                </tr>
        </tbody>
</table>

That's it. With a few simple steps, we've taken a simple table and made it into an accessible table.

Hope this helps. Post questions if you have them.


All times are GMT. The time now is 10:03 PM.

Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.