Editors Guide
OBJECT tags should contain alternative content.
This technique is not supported well by assistive technologies and cross-browser support is
irregular.
Description
The objective of this technique is to provide a text alternative for content rendered using the object
element. The body of the object element can be used to provide a complete text alternative for the
object or may contain additional non-text content with text alternatives.
Examples
Example 1: An object includes a long description that describes it
Example Code:
<object …>
<p>Here is some text that describes the object and its
operation.</p>
</object>
Example 2: An object includes non-text content with a text alternative
Example Code:
<object …>
<img src="staticlogo.gif" alt="Company Name" />
</object>
Figures and images in PDF documents should have ALT text.
Description
The objective of this technique is to provide text alternatives for images via an /Alt entry in the
property list for a Tag. This is normally accomplished using a tool for authoring PDF.
PDF documents may be enhanced by providing alternative descriptions for images, formulas, and
other items that do not translate naturally into text. In fact, such text alternatives are required for
accessibility: alternate descriptions are human-readable text that can be vocalized by text-tospeech technology for the benefit of users with vision disabilities.
When an image contains words that are important to understanding the content, the text alternative
should include those words. This will allow the alternative to accurately represent the image. Note
that it does not necessarily describe the visual characteristics of the image itself but must convey
the same meaning as the image.
Examples
Example 1: Adding an /Alt entry to an image using Adobe Acrobat 9 Pro's TouchUp
Object Tool
This example is shown with Adobe Acrobat Pro. There are other software tools that perform
similar functions. See the list of other software tools in PDF Authoring Tools that Provide
Accessibility Support.
1. Choose Tools > Advanced Editing > TouchUp Object Tool
2. Access the context menu for the image and choose Properties.
3. On the TouchUp Properties dialog, select the Tag tab.
4. On the Tag panel, type the text alternative in the Alternate Text text box.
This example is shown in operation in the working example of Adding an /Alt entry to an image.
Example 2: Adding an /Alt entry to an image using Adobe Acrobat 9 Pro's TouchUp
Reading Order Tool
This example is shown with Adobe Acrobat Pro. There are other software tools that perform
similar functions. See the list of other software tools in PDF Authoring Tools that Provide
Accessibility Support.
1. Choose Tools > Advanced Editing > TouchUp Reading Order Tool
2.
3.
4.
5.
The TouchUp Reading Order dialog will be displayed.
Right-click on the image and choose Edit Alternate Text.
The Alternate Text dialog will be displayed.
Type the text alternative in the Alternate Text text box.
Example 3: Adding an /Alt entry to an image in PDF documents generated using
Microsoft Word
This example is shown with Microsoft Word. There are other software tools that perform similar
functions. See the list of other software tools in PDF Authoring Tools that Provide Accessibility
Support.
Word 2000-2003
1. Right-click on the image and choose Format Picture
2. Select the Web tab
3. Type the alternative text into the text box provided and then click OK.
Word 2007
1. Right-click on the image and choose Size
2. Select the Alt Text tab
3. Type the alternative text into the text box provided and then click OK.
Example 4: Adding an /Alt entry to an image in PDF documents generated using
OpenOffice.org Writer 2.2
This example is shown with Open Office.org Writer. There are other software tools that perform
similar functions. See the list of other software tools in PDF Authoring Tools that Provide
Accessibility Support.
1. Access the context menu for the image and choose Picture...
2. Select the Options tab
3. Type the alternative text into Alternate (Text Only) text box and click OK.
EMBED tags must have an associated NOEMBED tag.
Description
The objective of this technique is to provide alternative content for the embed element in a noembed
element. The noembed is rendered only if the embed is not supported. While it can be positioned
anywhere on the page, it is a good idea to include it as a child element of embed so that it is clear to
assistive technologies that a text alternative is associated with the embed element it describes.
Examples
Example 1: noembed is provided inside an embed
Example Code:
<embed src="../movies/history_of_rome.mov"
height="60" width="144" autostart="false">
<noembed>
<a href="../transcripts/transcript_history_rome.htm">Transcript of "The history of Rome"</a>
</noembed>
</embed>
Example 2: noembed is provided beside an embed
Example Code:
<embed src="moviename.swf" width="100" height="80"
pluginspage="http://example.com/shockwave/download/" />
<noembed>
<img alt="Still from Movie" src="moviename.gif"
width="100" height="80" />
</noembed>
EMBED tags must have a non-blank ALT tag.
Description
embed is a non-standard but well-supported element that’s used to embed multimedia content,
including media types that mightn’t usually be natively supported by the browser. This element is
used for media files (primarily movie files, such as Flash and QuickTime video).
embed isn’t part of any currently recognized standard (it is included in HTML5 which is not yet
finalized), so if you use it, your page can’t possibly validate; to create valid markup, you’ll need to
use the object element.
Examples
Example 1: An embed to play the tic-tac-toe game.
Example Code:
<embed alt="string" height=" { number | percentage } " hidden=" { true | false } " src=" tictac-toe.flv" type="MIME type" width="number">
</embed>
IMG tags must have an ALT attribute.
Description
The objective of this technique is to create a text alternative that serves the same purpose and
presents the same information as the original non-text content. As a result, it is possible to remove
the non-text content and replace it with the text alternative and no functionality or information would
be lost.
Examples

A search button uses an image of a magnifying glass. The text alternative is "search" and not
"magnifying glass".






A picture shows how a knot is tied including arrows showing how the ropes go to make the knot.
The text alternative describes how to tie the knot, not what the picture looks like.
A picture shows what a toy looks like from the front. The text alternative describes a front view of
the toy.
An animation shows how to change a tire. A short text alternative describes what the animation is
about. A long text alternative describes how to change a tire.
A chart showing sales for October has an short text alternative of "October sales chart". It also
has a long description that provides all of the information on the chart.
A heading contains a picture of the words, "The History of War" in stylized text. The alt text for the
picture is "The History of War".
An image of a series of books on a shelf contains interactive areas that provide the navigation
means to a Web page about the particular book. The text alternative "The books available to buy
in this section. Select a book for more details about that book." describes the picture and the
interactive nature.
Guidelines for alt text:
1. Ensure that the text alternatives communicate the purpose of the graphic accurately and
succinctly.
2. Provide empty or null alt text for graphics which do not convey content.
3. Provide alt text for both the main image and the hot spots of image maps.
4. Do not repeat the alt text of an image in the adjacent text.
The HTML for inserting ALT text is:
Images need alternative, or ALT, text assigned to them
<img src="filename.gif" alt="Alternative description goes here">
Transparent and spacer images:
Spacer images should always be assigned alt=""
<img src="spacer.gif" alt="">
Bullets, horizontal line and icons:
Bullets and icons should be treated in much the same way as spacer images, so should be assigned
alt=""
<img src="bullet.gif" alt="">
Decorative images
Decorative images too should be assigned alt=""
<img src="corner.gif" width="84" height="90" alt="" />
Image Maps
<img src="imagemap.jpg" alt="" width="199" height="303" border="0" usemap="#Map"> <map
name="Map">
<area shape="rect" coords="7,9,191,54" href="#maps" alt="HOME">
<area shape="rect" coords="7,68,191,114" href="#maps" alt="Products">
<area shape="rect" coords="7,127,190,172" href="#maps" alt="Services">
<area shape="rect" coords="6,186,190,229" href="#maps" alt="Contact us">
<area shape="rect" coords="7,245,189,289" href="#maps" alt="Index">
</map>
Each A tag must contain text or an IMG with an ALT tag.
Add text to the link, or ALT text if the link contains an image.





A link contains text that gives a description of the information at that URI
A page contains the sentence "There was much bloodshed during the Medieval period of
history." Where "Medieval period of history" is a link.
A link is preceded by a text description of the information at that URI
A page contains the sentence "Learn more about the Government of Ireland's
Commission on Electronic Voting at Go Vote!" where "Go Vote!" is a link.
Both an icon and text are included in the same link
An icon of a voting machine and the text "Government of Ireland's Commission of
Electronic Voting" are combined to make a single link. The alt text for the icon is null,
since the purpose of the link is already described by the text of the link next to the icon.
A list of book titles
A list of books is available in three formats: HTML, PDF, and mp3 (a recording of a
person reading the book). To avoid hearing the title of each book three times (once for
each format), the first link for each book is the title of the book, the second link says
"PDF" and the third says, "mp3."
News article summaries
A Web page contains a collection of news articles. The main page lists the first few
sentences of each article, followed by a "Read more" link. A screen reader command to
read the current paragraph provides the context to interpret the purpose of the link.
Add text to the link
<a href=”index.htm”>Department of Education and communities</a>
ALT text if the link contains an image
<a href=”index.htm”><img src=”declogo.jpg” alt=”Department of Education and communities” /></a>
Anchor link (when using name attribute: The name attribute specifies the name of an anchor.)
<a name="C4" id=”C4”>Chapter 4</a> and not <a name="C4" id=”C4”> </a> Chapter 4
The <a> name attribute is not supported in HTML5. Use the id attribute instead.
<a id=”C4”>Chapter 4</a>
Document title must not be blank.
Description
This describes a failure condition when the Web page has a title, but the title does not
identify the contents or purpose of the Web page.
Examples
Failure Example 1
Examples of text that are not titles include:




Authoring tool default titles, such as
o "Enter the title of your HTML document here,"
o "Untitled Document"
o "No Title"
o "Untitled Page"
o "New Page 1"
Filenames that are not descriptive in their own right, such as "report.html" or
"spk12.html"
Empty text
Filler or placeholder text
Failure Example 2
A site generated using templates includes the same title for each page on the site. So
the title cannot be used to distinguish among the pages.
Headings should not be empty.
<h1></h1>
<h2>/h2>…
While editing the webpage Do not select from the drop down and leave it blank ie
without any text. This adds a blank heading.
Description
The objective of this technique is to make section headings within Web content
descriptive. Descriptive headings and titles (see Providing descriptive titles for Web pages)
work together to give users an overview of the content and its organization. Descriptive
headings identify sections of the content in relation both to the Web page as a whole and
to other sections of the same Web page.
Descriptive headings help users find specific content and orient themselves within the
Web page.
Authors may also want to consider putting the most important information at the beginning
of each heading. This helps users “skim" the headings to locate the specific content they
need, and is especially helpful when browsers or assistive technology allow navigation
from heading to heading.
Examples
Example 1
An HTML page that describes the range of tasks for disaster preparation may have the
following headings:
Example Code:
<h1>Disaster preparation</h1>
<h2>Flood preparation</h2>
<h2>Fire preparation</h2>
Note that the level 2 headings have the distinguishing information at the beginning (ie,
instead of "Preparation for floods", "Preparation for fires", etc).
Example 2
A short article about the history of a town that explains about the founding and
expansion of the town and then goes into some depth about the current situation. The
title of the Web page is "History of Ourtown". The first section is called "The founding of
Ourtown". The second section is called "Expansion of Ourtown". The third section is
called "Ourtown today" which has the following subsections: "People in Ourtown",
"Organizations in Ourtown" and "Buildings in Ourtown".
Identify row and column headers in data tables using TH
elements.
This checkpoint is telling you that if you have a legitimate need to present data in a
tabular format, then you should use the HTML TABLE element and its supporting
elements and attributes (like TR, TD, TH and CAPTION). A simple data table created
with proper data table mark up, might look like this:
Example of a simple data table created using HTML markup.
Column 1 header
Column 2 header
Row 1 header Column 1 Row 1
Column 2 Row 1
Row 2 header Column 1 Row 2
Column 2 Row 2
<TABLE border=”1” id="datatable" summary="This table contains information on student programs. Each row
lists the student name, academic level completed to date, and current program enrolled.">
<CAPTION>Example of a simple data table created using HTML markup.</CAPTION>
<TR>
<TD>&nbsp;</TD>
<TH>Col. 1 header</TH>
<TH>Col. 2 header</TH>
</TR>
<TR>
<TH>Row 1 header</TH>
<TD>C1R1</TD>
<TD>C1R2</TD>
</TR>
<TR>
<TH>Row 2 header</TH>
<TD>C2R1</TD>
<TD>C2R2</TD>
</TR>
</TABLE>