Web Accessibility - Coding Techniques

Coding Techniques

The most significant failures of accessibility stem from both programming and awareness. Our generation of students creating web pages for the first time is not aware of accessibility. The effect of this cause is more poorly-programmed inaccessible pages online. The problem is a lack of consciousness, not that the students do not care. If professors began to implement accessibility training into basic web-authoring lessons, students would learn how to make pages accessible from the beginning.

Hyperlinks

Use links that make sense when read out of context.
- <a href="http://www.google.com" title="Google" target="_blank">Google</a>

Images

Use alternative text for images that convey important content, but use null text for images that do not convey important content.
- <img src="images/sample.jpg" alt="short description of this image" title="short description of this image">
- <img src="images/spacer.gif" alt="" title="">

Use long description for complex images, such as graphs or charts, that convey important content.
- <img src="images/chart.jpg" alt="short image description of this chart" longdesc="long_description.txt">
- <a href="long_description.txt" title="long description of this chart" target="_blank">D</a>

Tables

Tables are usually used for page layout, and should contain content that can be linearized.

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Data tables organize content using row headers, column headers, or both.

<table>
<caption>Friends</caption>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Location</th>
    </tr>
    <tr>
        <th scope="row">Chris</th>
        <td>24</td>
        <td>Beach</td>
    </tr>
    <tr>
        <th scope="row">Rob</th>
        <td>23</td>
        <td>Mountains</td>
    </tr>
    <tr>
        <th scope="row">Mark</th>
        <td>25</td>
        <td>City</td>
    </tr>
</table>

<table>
<caption>Friends</caption>
    <tr>
        <td> </td>
        <th id="name">Name</th>
        <th id="age">Age</th>
        <th id="location">Location</th>
    </tr>
    <tr>
        <th rowspan="2" id="college">College</th>
        <th id="chris">Chris</th>
        <td headers="college chris age">24</td>
        <td headers="college chris location">Beach</td>
    </tr>
    <tr>
        <th id="rob">Rob</th>
        <td headers="college rob age">23</td>
        <td headers="college rob location">Mountains</td>
    </tr>
    <tr>
        <th id="hometown">Hometown</th>
        <th id="mark">Mark</th>
        <td headers="hometown mark age">25</td>
        <td headers="hometown mark location">City</td>
    </tr>
</table>

Coding Techniques

Hyperlinks

Images

Tables

Related Links (opens a new window)