Skip Navigation Links
Montgomery College Link to Home Page
States Adopting Web Accessibility 508 Standards

Information Technology Institute

Montgomery College

Web Accessibility - Section 508

Tag and Page Accessibilty

Quick Reference Guide


 

HTML Tag

Accessiblity Feature

Comment

<img>

alt=”describe graphic”

longdesc=”describe”

Alt attribute is a “must” for all graphics

<a href> <a>

title=”link subject”

Title attribute gives text reader a description of the link.  Make description understandable, not cryptic.

 <a href="#maintext">Skip Navigation Links</a>

 <a name="maintext">Welcome to my Page</a>

 Mandatory implementation of MC Rule 23;

508 Rule 1194.22 (o). "Provide... method... for users to skip repetitive navigation links."

 "summary" attribute

 <table summary="long description">

 The summary attribute is available for many HTML 4.0 tags. The Access Board Guide (h) says it is not well supported by text readers. Slatin nevertheless recommends its use. See Slatin, Maximum Accessibility, Ch. 11, "Tables," p. 320.

Tables

 <table summary="">

<!--Table Description-->

<tr>

<th scope="col" colspan="2">Table Description </th>

<!--R1-Column Headers-->

<tr>

<th scope="col"> </th>

<th scope="col"> </th>

</tr>

<!--R2-Data starts here-->

<tr>

<!--R2C1-Left Row header-->

<td scope="row"> </td>

<td>data</td>

</tr>

</table>

 Tables are your friends, but use them sparingly in web page structural design. Too many nested tables create problems for text readers, and problems for you in relating table headers to data cells. See "nested table" discussion at Slatin, Maximum Accessibility, Ch. 11, "Tables," p. 307.

Table Headers

<th id=”a1”></th>

<td headers=”a1></td>

Permits text reader to identify and relate data to its appropriate header category.  I.e., First Name is “Joe”

Scope Attribute

<th scope=”col”>

<td scope=”row”><td>

Permits text readers supporting scope attribute to associate related data.  Saves time coding over use of the id and headers attributes.

Table Size

About 730 px maximum

Otherwise, web page width is not completely displayed 0n 600x800 display screen.

 <Caption> Tag

<caption></caption>

 Caption tag is used to describe the web page and its use. Use a full descriptive sentence so a caption is more descriptive than a title Caption is displayed as text and can be "seen" both by the text-reader and the general public. Not always supported, so use with care.

Css font size

12 pt; not less than 11 pt.

Minimum size necessary for effective text display in most pre-2002 Mac browsers.

 Forms

 1194.22n - Associate form labels with form input boxes - text, radio buttons, checkboxes, menu lists,

 Text Input, Textboxes

 <Label> tag
for='LName"" attribute

id="Lname
<label for="LName">Last Name</label>
<input type="text" name="LName" id="LName" size="35" maxlength="35">

   Always include both the name & id attributes in a form element tag.

 Radio Buttons

 <label for="Mr">Mr</label>. &nbsp;
<input type="radio" name="Gender" id="Mr" value="Mr" />
<label for="Ms">Ms.</label>
<
input type ="radio" name="Gender" id="Ms" value="Ms" />

  • Radio button is the only form input control where name and id will have separate values.
  • Name values must be the same to tie the radio buttons together.
  • id values must be different to correspond to the different labels.

 Checkboxes

 <label for="Roses">Roses</label>
: &nbsp; &nbsp;
<input type="checkbox" name="Roses" id="Roses" value="Roses" />
<br />
<label for="Orchids">Orchids</label>
:&nbsp;
<input name="Orchids" type="checkbox" id="Orchids" value="Orchids" /><br />

  :    

Azaleas:   

Checkboxes will each have separate name valuses, so you can select more than one checkbox.

 "Select" Menus/Lists

 <label for="State">State</label>:
<select name="State" id="State">
<option value="Select A State" selected="selected">Select A State</option>
<option id="State" value="Alabama">Alabama</option>

  •  The <label> tag is associated with the <select> tag, not the individual options.
  • Give the first <option selected="selected" value="describe menu for text reader, such as Select A State">

 Submit Buttons

      

<input type="submit" name="Submit" value="Submit" />
<input
type="reset" value="Reset Form" >

 No <label> tags are needed; Text reader will read the Submit button value.

 PDF Files

PDF Files cannot be read by text readers; An alternate format must be provided under 1194.22 (a)

 Acrobat 4.0 files - no accessiblity features

Acrobat 5.0 files - some accessibility, but bugs. Slatin, Ch. 12, p. 339-349. Complicated.

Acrobat 6.0 - Includes Adobe "Capture" software which converts to accesible Word, HTML, or XML files