Other Web Page Design Considerations
Use logical styles for tags
Text in an HTML document can show traits by using logical
style tags or physical style tags. Use logical styles rather than physical
markups.
Examples of logical tags are: DFN, EM, CITE, CODE, KBD,
SAMP, STRONG, VAR, H1, H2, BIG, SMALL
Examples of physical tags are: FONT size=14, B, I.
If you use logical tags, it makes it easier for users to
adjust the look of the screen (e.g., larger print, color contrast, etc.) when
they apply their own style sheets or for browsers to adjust the presentation of
the document based on user settings. The other advantage of logical elements is
that they help enforce consistency in your documents. Although we have not
personally experienced this (such as in our testing with JAWS, one of the screen
readers), supposedly some devices will recognize logical tags and not physical
tags.
Furthermore, do not misuse logical elements, such as using <cite> to indent a paragraph or one of the
header tags for things which are not headers, such as <H1>
to get a large font in a paragraph.
If you are not familiar with some of these logical style
tags, see your HTML code book (if you have one) or an HTML reference site such
as The Bare Bones Guide to HTML, by Kevin Werbach, at
www.werbach.com/barebones/barebone.html.
Avoid fixed font sizes
Avoid the use of fixed font sizes, such as <font
size="6">, but instead use relative sizing (<font
size="+1"> or <font
size="-1">). If you use relative font sizes, then your
audience can more easily override your font sizes with their font sizes.
One common source of documents which have fixed font sizes
are Word documents saved as HTML files in the word processor program. Older
versions of WordPerfect do not assign specific font sizes when translating WP
documents into HTML. Apparently both Word 2000 and WordPerfect 2000 now create
references to style sheet coding for fonts, when using the convert to HTML
option in these programs.
Although the font size tag is no longer supported in HTML
4.0 (it is called a deprecated element), there are still many pages being
written to HTML 3.2 standards, because of audiences with older browsers. Based
on the newer HTML guidelines from the World Wide Web Consortium, traits like
color, size, and appearance are controlled with style sheets (or cascading style
sheets).
Adobe Acrobat Portable Document Format (PDF)
Create an accessible PDF file.
Portable
Document Format
files (PDF) can can be made accessible to
screen readers using Adobe Acrobat 5.0. Follow the guide at
http://www.adobe.com/products/acrobat/
access_booklet.html.
Provide
a text-only equivalent for PDF file.
If you're unable to create an accessible PDF, provide a text-only equivalent.
PDF files are not ADA-compliant when they do not provide text that
can be read by a screen
reader. Such PDF files are a graphical representation of the text and
other elements in the document.
Web sites with non-accessible PDF files must have links to text-only equivalents. See an example at:
http://www.umaine.edu/cci/
There you will see links to the PDF versions of publications, and links to the
text-only versions of those files. The text versions, in this case, are HTML files.
When creating text-only files for PDF files that contain graphics, charts, etc., you
must add text in the text-only file that explains the
missing graphical information. This might mean, for example, putting the info
from a chart back into a table, or writing an explanation of a graphic or photograph so that the reader of the text-only file will understand
what the graphic or photo lends to the article.
How do you get a text-only version from a PDF file?
The best way is to go back to the file that was originally used to create the
PDF file. If it is a Word file, for instance, you already have what you need, minus the explanations that must be
added for any graphics. If the original is a PageMaker file (a common way to
create a PDF document), you can export the stories into a Word document in
order to
create the text-only version (again, remembering to provide explanations for the
essential graphics).
No moving text
Avoid using the BLINK and MARQUEE elements. Use another
method to draw attention to text such as text size or color. Text coded to BLINK
or MARQUEE is not readable by screen readers. Also text displayed this way can
be difficult to understand by users with learning disabilities.
Changes in the natural
language (e.g., English to French) of a document's text and any text equivalents
shall be clearly identified.
Explanation:
In order to facilitate screen readers reading a page, you
should identify the language of a phrase (if it changes from the main document)
or put a code to identify the language of the entire page.
When mixing languages in a sentence or paragraph, as in
this example in French, note the language changes like this:
Mother, he's asking you to go. He's
saying, <span lang="fr">"Allons, Madame plaisante!</span>
There is also a recommendation from the World Wide Web
Consortium to put a language code in the HTML tag itself at the top of the
document, to indicate the language of the document. Even if you are not
producing documents in other languages, you should develop the habit of putting
the language code for English in your files. This tag goes in the initial
<HTML> tag at the top of your Web document, as indicated below.
<HTML lang="en">
to indicate English language
or
<HTML lang="fr"> to indicate French
language
Sample Language abbreviations:
- ar for Arabic
- de for German
- el for Greek
- en for English
- es for Spanish
- fr for French
- he for Hebrew
- hi for Hindi
- it for Italian
- ja for Japanese
- nl for Dutch
- pt for Portuguese
- Ru for Russian
- Sa for Sanskrit
- Ur for Urdu
- Zh for Chinese
(For a more complete list of 2 and 3-letter language
codes, check: http://www.w3.org/WAI/ER/IG/ert/iso639.htm)
Back to Creating
Accessible Web Sites
