Home >> Web accessibility

Sherman Dorn's brief tips and hints on accessible web pages (a self-education project).

Introduction

I have been trying to educate myself on how to create accessible web pages (which my work pages are not, at the moment), and these are the notes I've created for myself.

Headings

Headings are best used for structure. Note: <h1>, <h2>, etc., do not provide structure for the sections under them. <DIV> will encompass sections rather than headings.

Use ordered lists only

Labeling

Use ALT attribute for every image, including images in INPUT buttons.
Use LONGDESC attribute to point to a file with a longer textual description. Alternatively, provide textual description with the image in the HTML.

Use ABBR for emoticons, as in

<ABBR title="winking smiley">;-)</ABBR>

Use TITLE as an attribute, as in

<ACRONYM title="Individuals with Disabilities Education Act">IDEA
</ACRONYM>

Link texts. Use clear language that someone whose browser skips from link to link would understand. Poor:

For more information, <a href="http://www.coedu.usf.edu/~dorn">
click here</a>.

Better:

For more information, <a href="http://www.coedu.usf.edu/~dorn">
go to 
Sherman Dorn's faculty home page</a>.

Also, one can use the TITLE attribute to label links, as in

<a href="edf3604syl.doc" title="EDF 3604 syllabus in Microsoft 
Word">
Word format<a>

Tables.

Example and then code.

Row Marker	Header 1	Header 2	Header 3
First row header	First row, first column of data	First row, second column of data	First row, third column of data
Second row header	Second row, first column of data	Second row, second column of data	Second row, third column of data

Now the code

<table border="1" summary="This table is an example of model
coding for accessible HTML.">
<caption="Sample accessible table HTML.">
<tr>
<th id="rows">Row Marker</th>
<th id="header1">Header 1</th>
<th id="header2">Header 2</th>
<th id="header3" abbr="H3" >Header 3</th>
</tr>
<tr>
<th id="rows">First row header</th>
<td headers="header1">First row, first column of data</td>
<td headers="header2">First row, second column of data</td>
<td headers="header3">First row, third column of data</td></tr>
<tr>
<th id="rows">Second row header</th>
<td headers="header1">Second row, first column of data</td>
<td headers="header2">Second row, second column of data</td>
<td headers="header3">Second row, third column of data</td></tr>
</tr>
</table>

Alternatively, one could replace "headers" with SCOPE="col" or SCOPE="row" attributes, as follows:

<table border="1" summary="This table is an example of model 
coding for accessible HTML.">
<caption="Sample accessible table HTML.">
<tr>
<th SCOPE="col">Row Marker</th>
<th SCOPE="col">Header 1</th>
<th SCOPE="col">Header 2</th>
<th SCOPE="col" abbr="H3" >Header 3</th>
</tr>
<tr>
<th SCOPE="row">First row header</th>
<td>First row, first column of data</td>
<td>First row, second column of data</td>
<td>First row, third column of data</td></tr>
<tr>
<th SCOPE="row">Second row header</th>
<td headers="header1">Second row, first column of data</td>
<td headers="header2">Second row, second column of data</td>
<td headers="header3">Second row, third column of data</td></tr>
</tr>
</table>

<BLOCKQUOTE>

Quoted text only, not for effects.

Marking insertions and deletions

Use <INS> and <DEL>.

No Frames

... or, at least, alternatives to the frame version. (I hate frames, myself, though I have a quite refined spacial sense. Framed HTML is just too clunky.)

Forms

Use ALT in INPUT buttons and put some text in TEXTAREA boxes (for legacy assistive technologies).

Style Sheets

Do not use !important in content (for users should be able to override content-provided styles.
Do use "em" units for font sizes, etc.
Do not, in contrast, use pixels or points as a size unit: stick to ems and percentages.
Do use numbers when specifying colors.

Do specify a fallback generic font (e.g.,

BODY { font-family: "Gill Sans", sans-serif }

Do not use HTML codes such as FONT or SIZE

No auto refresh

Some browsers will not be able to read the page before the refreshing.

Beware new window creation

Many browsers who read pages aloud will not be able to indicate the creation of separate windows. Text clues (either in the text or in "title" attributes of links) are needed.

Placement of boxes

One can, occasionally, use style to provide layout instead of using (gasp) tables, which should be for providing structured information instead of columns.

List here:

First item
Second item

End of list

Caption for right-hand image here.

Caption for middle image here.

Here is now the code for providing that type of columng splitting:

<div style="width:33%; float:left; vertical-align:top">
<p>Left-hand column here.
</div>
<div style="width:33%; float:right; vertical-align:top">
<p>Right-hand column here.
</div>
<p>>Middle column here.

Drop caps, etc.

"Drop-style text uses a <SPAN> code with font-style as the crucial item, as in <span style="color:green; font-size:200%"> for the caps above and <P style="color:blue"> for the whole paragraph.