This Page

1. Synopsis
2. The LABEL Tag
3. Optimal Layout for Forms
4. FIELDSET and LEGEND
5. OPTIONGROUP in Drop Down Menus
6. Tab Order
7. SIZE in SELECT Dropdown Menus
8. Links to Additional Tutorials

Synopsis

SECTION 508 - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Required Field

1. Required fields should be indicated with a symbol or text such as an "(R)" and not just a change in color. The best option is just "Required", but if a symbol is used, then include a key such as "(R) = Required Field" should also be included above the FORM tag.

2. The Required Field indicator (e.g. "Required) should be included in the LABEL tag so it can be accessed by a screen reader.

Layout

1. Use the LABEL tag to match a field with a label. Because some screen readers may not implement LABEL, be sure to use other strategies for logical form layout listed below.

2. If you are using layout tables for a form, avoid placing a form field and its label in different table cells. You can use the BR tag between the label and the field if you need to place elements vertically.

3. Labels should be placed above or to the left of the corresponding element. All elements should be labeled.

4. If more than one input field is on the same line, then the label and its element should be on the same line on the screen.

5. If a series of checkboxes or radio buttons are used, then place each option on its own line so it is clear which option goes with each button.

6. If there continue to be concerns about the function of a form field, you can use the default text option to provide information. For instance default text could be "Enter Penn State Access ID here".

7. For many screen readers, the only text inside the FORM tag that is read is the LABEL and its field. Use the FIELDSET and LEGEND to add extra indormation.

8. Tabbing should take users from field to field in a logical order. In some cases, the TABORDER tag should be used to modify tabbing order in complex layouts.

9. If you include a SELECT drop-down menu with a long list of choices, uses the SIZE= attribute to add vertical height.

10. The OPTIONGROUP can be used to divide a long list in a drop down menu into catagories.

Other

1. If the Submit button is an image, then make sure the ALT tag says "Submit".

2. Avoid "jump menus" which direct you to new page once you select an item. This may interfere with keyboards alternates and cause these users to only be able to go to the first item in the list. An option list with a "Submit" or "Go" button may be a better alternative.

3. If necessary, provide an alternate way to submit the form such as phone, mail, or e-mail. It could be as simple as allowing users to print and mail a complete form or calling a contact to have that person fill out a form for them.

4. Do not include the RESET button unless there is a legitimate demand for the need for a user to delete all the information in a form before it is submitted. It is very easy to accidentally press this button for users with motor disabilities or those using a screen reader.

 

Top of Page

The LABEL Tag

This tag explicitly associates a form field with a label. The LABEL tag allows you to control the positioning of a label, although all results should be checked with a screen reader.

Some examples are shown below.

 

Top of Page

Optimal Layout for Forms

Screen readers state the name of a field, then say to "input" data. Unless the labels are placed correctly users will not know which data to input in which field. Below are some accessible and inaccessible examples of form labeling.

 

 

 

 

 

Top of Page

Tab Order

Most browsers enable users to use the Tab key to navigate from field to field, providing accessibility to the mobility impaired and users of screen readers. In most forms, the tab order follows a logical progression from top to bottom, but if the default order is not the one needed, then the TABORDER attribute can be used to manually set tab order. For example:

Top of Page

Fieldset and Legend

The FIELDSET tag is used to group similar options together and is signaled in visual browers with an outline. The LEGEND tag adds a text label to the field set. See example below.

SIZE in SELECT Dropdown Menus

When a drop-down menu has a long list of selections (e.g. a list of Penn State campuses), selection may difficult for motion-impaired users who have difficulty manipulating a mouse or some cognitively disabled users who may lose track of where they are in the list.

Including a SIZE="2" attribute increases of the height of the menu to two items displayed allowing users to enter it with a keyboard and for users to view more than one item. The SIZE can be set to other values such as "3" or "4" depending on user needs. See an example below.

 

Top of Page

OPTIONGROUP in Drop Down Menus

The OPTIONGROUP tag can be used in SELECT menus to group a long list of options into different categories in the menu. See the example below.

 

Top of Page

Links to Additional Tutorials

• Web Standards Project Accessible Forms
• Web AIM Creating Accessible Forms
• Web AIM Usable and Accessible Form Validation and Error Recovery
• Web AIM Improperly Associated Form Details
• Accessify.Com Better Accessible Forms
• .Net Mag Simple Accessible Forms - Good CSS examples

Top of Page

Top of Page

HTML frames can be problematic because 1) some older browsers, including the text browser Lynx do not support them 2) individual pages can be hard to bookmark 3) the hierarchy of the pages may not be clear in screen reading mode and 4) there is less screen space that can be used to present content.

For that reason, many users manually switch out of frames view for many sites. Consider avoiding frames unless they are needed for a particular Web application. If frames are needed, remember these tips:

Synopsis

1. If you use frames, clearly identify each frame in the following ways.

   1. Include the TITLE or NAME attribute for each frame. These names should indicate content (e.g. "navigation" or "content", not position ("top" or "right") or an arbitrary number ("frame 1" or "frame 2").
   2. Make HTML file names for each frame meaningful (e.g. "navigation-menu.html") in case that is what a screen reader identifies.
   3. Include a text title on each frame (it can be hidden in visual browsers).
   4. Include the DOCTYPE declaration for frames on the top of each HTML file to signal a page with frames to a screen reader. The header is
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

   SECTION 508 - Frames shall be titled with text that facilitates frame identification and navigation.

2. Whenever possible, include duplicate navigation within the content frame, especially a link to a sitemap, in case users "right-click" to just open up the content frame only (thus manually leaving frames mode)

3. Include <noframes> content including basic navigation for older browsers which do not support frames.

4. A link to a "No Frames" version is often recommended. Placement towards the top of the homepage is best.

5. Alternative to frames include tables and server side includes to place in standardized headers and navigation.

Sample Accessible Frame Code

Table Mimicking Frames

Top Title Frame My Accessible Frames Site
Left Navigation Frame MAIN MENU No Frames View Page 1 Page 2 Page 3 ... Page n	Right Content Frame H1 Header Here for Page Title Rest of content Duplicate navigation for accessibility Page 1 | Page 2 | Page 3 ... Page n View Sitemap

 

Links

• WebAIM Creating Accessible Frames (include iFrames)

Top of Page

This page lists tutorials for implementing accessibility features in Front Page and its successor Microsoft Expression.

Front Page and Accessibility

• Web Aim Front Page 2003 Accessibility Tutorial
• Microsoft Front Page.com

Microsoft Expression and Accessibility

• Web Aim Microsoft Expression
• Microsoft MSDN

Many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well.

Synopsis

1. Use the H1, H2,...H6 tags as indicators of information hierarchy within a document, not just as formatting elements. Screen readers in particular may just scan a page for appropriate H1, H2 and H3 elements. See Header examples below.

2. Many experts recommend reserving H1 for the page title, H2 for major headings and H3 for major sub headings.

3. If you need to indent text for a quote it is generally preferable to use the BLOCKQUOTE tag rather than a UL unordered list tag. The UL tag should be reserved for true lists containing LI elements.

4. If you need to indent text stylistically (e.g. indent all paragraphs), it is better to use a CSS specification and add space to the left margin (e.g. {margin-left: 15px}) or left padding.

5. Use the P paragraph tag to separate paragraphs instead of multiple breaks (e.g. BR BR ). This encloses blocks of text within their own structural elements. Some screen readers are able to jump from P to P but not BR to BR.

6. Do not use the FONT tags. Experts recommend using cascading style sheets for specifying font color, font-size, font-face and backgrounds (versus the FONT tag). This allows a user with color vision or low vision to override a problematic stylesheet with one that they prefer.

7. In Word, using the Heading 1, Heading 2 styles performs a similar function as H1, H2 do and may be converted to approproate H tags in different conversion tools. You can edit Word Styles to change the appearance of these headers.

Header Tagging Examples

Tagging Content Headers Appropriately

Use the H tags to mark document headers instead of changing FONT sizes.

 

Tagging Large Sizes Appropriately

Do not use the H tags just to format text to a larger size.

Top of Page

Image maps are used to define regions within a larger image as links. For instance, Web sites in which you click a state on a U.S. map to see resources for that state use image maps. Unless special precautions are taken, screen readers will not be able to identify links embedded in an image map.

Synopsis

1. Whenever you use a client side image map be sure to include the ALT attribute within each AREA tag (the hot spot) in order to provide an alternative text link for screen readers. The NAME attribute should also be included in the MAP tag.

SECTION 508 - A text equivalent for every non-text element shall be provided.

2. If images are used as links in the image map, use the TITLE attribute in an AREA tag (hot spot) to provide a visual tooltip.

3. Avoid CGI server-side image maps whenever possible and use client-side image maps with the MAP tag instead.
NOTE: Image maps produced by Dreamweaver, FrontPage and other HTML editors are usually client-side image maps.

SECTION 508 - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

4. If CGI server-side image maps are needed, then provide an separate text-based menu.

SECTION 508 - Redundant text links shall be provided for each active region of a server-side image map.

Top of Page

Client-Side versus Server-Side Image Maps

Generally speaking client-side image maps are preferred to server-side image maps for accessibility purposes. In addition, a server-side image map is more difficult for one person to maintain because it involves programming a CGI; therefore client-side image maps are used much more often.

A client-side image map includes coordinates for different links embedded within an image. Some source code for a client-side image map would look like this.

A server-side image map uses a CGI script to access an image map file on your server. Some source code for a server-side image map would look like this:

To make this server-side client map accessible, you can add a text based menu such as

Top of Page

This Page

1. Synopsis
2. Implementing the ALT Tag
3. Use TITLE Tag for Tooltips
4. ALT Text for Navigational Elements
5. Filler and Decorative Images
6. Summary ALT Tag Descriptions
7. Extended Descriptions
8. ASCII Art
9. Links

Synopsis

1. Whenever you use an image, be sure to include an ALT tag within the IMG tag to provide a clear text alternative. ALT text should be used for all images, graphical bullets, and graphical horizontal rules. If there is no ALT tag, then screen readers will hear [IMAGE] but no additional information. ALT text should let the user know what an image is and the purpose of that image.

   SECTION 508 - A text equivalent for every non-text element shall be provided (e.g. via "alt", "longdesc", or in element content.

2. The text in the ALT text should be meaningful in the context of the Web page. Specifically:

   1. Images used as links should have alt text describing the destination of the link, not the image itself.
   2. Alt text with acronyms should be written with spaces in between letters. For instance <alt="I T S at P S U" > (read as "I T S at P S U") would be more accessible than <alt="ITS at PSU" > (read as "It's at Sue")
   3. Images used as spacers, toolbars or toolbars can be specified as <alt="" > so that screen readers skip over them (although some older screen readers will say "empty alt tag" and read the file name).
   4. Images embedded in Web pages which already include a text description can have a summary ALT tag.

    

3. If you want to provide a tooltip for visual browsers, use the TITLE tag in addition to the ALT tag since it is supported in more browsers. For example:

4. Length of Alt Tag - There is no official length restriction of ALT tags, but many experts recommend 125 characters or under because of restrictions within the JAWS screen reader. Many versions of JAWS break up longer text tracts into blocks of 125 characters, which can be confusing.

5. For images which are especially complex, such as a chart, equation or diagram, a link to an extended text caption should also be included.

6. Images which are used as buttons or labels should use fonts which are readable to a large segment of the audience (probably 12 pixels/points or larger).

7. STYLE TAG - In some cases you can replace custom tool lines and decorative graphics with styled HR or DIV tags in which you change background colors and specify background images. See CSS style sheet tutorials for more details.

Top of Page

Implementing Alt Text

The ALT tag adds a text description to a Web image. If viewers cannot see an image, then the description is displayed. This benefits users of screen readers, users of Palm Pilots viewing a Web site and users on a low-bandwidth connection where images are slow to download.

The ALT tag is included within the image tag. You can also include the TITLE and LONGSDESC attributes as well since this is also recognized by some devices.

NOTE: The ALT tag is limited to 50 characters. If more information is needed, then use one of the long description strategies.

Demo Web site with Image links

D

 

Top of Page

Use TITLE for Tooltips

Some browsers, particular Internet Explorer for Windows, may display ALT text as a visible tooltip. Therefore, some Web sites use this feature to include supplemental information within visual browsers.

However, this technique should be avoided since other browsers do not show ALT text as tooltips. In addition, this interferes with the basic function of the ALT tag which is to provide a short text equivalent of an image. All navigational elements should be indicated by textual elements which can be accessed by a visual browser.

Use the TITLE Tag instead for tooltips since they are supported in all browsers. See example below.

 

Top of Page

Alt Text for Navigational Elements

For images used as navigational elements, the ALT Text can typically just state where the link is going. Stating a full description of the image is redundant in most cases.

 

Top of Page

Alt Text for Filler or Decorative Images

Some images such as invisible pixels or custom tool lines are used solely for layout purposes and provide no content. The alt tag for these should be set to a blank space or nothing <alt= "" > . This causes the screen reader to ignore the image altogether.

For example we will use a sample image of a rainbow toolbar, followed by some accessible and inaccessible code examples

 

 

NOTE: Alt text combined with transparent image can be used to provide special information just to users on screen readers such as a way to skip navigation.

Top of Page

Summary Alt Text

If an image is embedded within a Web page in which already includes an extended description of the image, then the ALT tag can just provide a summary of the image, not a full description.

Example Text with Image

Below is an image of a saturated fat molecule with 18 carbon molecules. Notice that the single bonds between elements make the carbon chain relatively straight.

 

Top of Page

Links to Extended Descriptions

In some cases, it may be necessary to add a link to an extended description of an image, especially for cases where images are used to convey significant content. There are several ways this can be accomplished - including a LONGDESC tag, a "D-link" or just a caption which links to the long description. See below for examples

Link to Caption Text

If the information is critical, then an overt caption link may be the best solution. This provides the clearest indication to the most users that a longer description is available.

View Extended Text Description

D-Links

Some experts advocate the use of a "D-link" to signal the presence of an extended text description. However, some users may not be aware of the convention. This is best used to provide supplemental information.

D

Longdesc Attribute

This is a hidden attribute which is recognized by some, but not all, screen readers. This may be best for providing extra detail which enhances content, but is not critical to it.

Top of Page

ASCII Art

ASCII art, or the use of punctuation and letter symbols to draw out an image will be inaccessible for screen readers since they will read each symbol aloud. Images supplemented with ALT text would be more accessible.

If an ASCII art image is truly needed in a Web page, then creating it in Photoshop or other photo editor may be a better alternative.

NOTE: If you include complex ASCII art in an e-mail signature, then it should be placed at the bottom after your contact information.

Top of Page

Links on ALT Tags

• Jukka Korpela Guidelines on ALT Texts in IMG Elements
• Web Aim ALT Text Blunders
• < ahref="http://www.ehow.com/how_2110225_alt-text-images-web-page.html">How to Write Good Alt Text for the Images on Your Web Page

Top of Page

This Page

1. Synopsis
2. Unicode Support for Foreign Language
3. LANG Tag
4. Common Language Codes
5. Other Ways to Signal Non-English Content
6. JAWS Symbol File
7. Links

Synopsis

Foreign language support is still relatively incomplete for screen readers, but here are some things that can be done. Screen readers programmed in a non-English language may be able to switch to English easier than a screen reader designed for a U.S. audience can switch to non-English.

1. Use Unicode encoding whenever possible.

2. Use the LANG tag to mark words or passages of text in another language. This works for major languages only.

3. Consider placing long passages of a non-English text on its own page with language identifier (in English and in the native language) and link to siwtch language page near the top of each page.

4. Use a textual indication (visual or hidden) to indicate when a foreign language word or passage is coming.

5. If developing a completely or partially non-English Web page, make sure it is properly encoded. See the Penn State Computing with Accents page for more details.
   Note: Some screen readers may need plug-ins for some languages like Chinese and Russian (if available).

6. For some lesser taught languages such as Swahili or Old Irish, true accessibility can only be accomplished via an audio file because screen readers may not be able to read the words correctly.

Unicode Support for Foreign Language

In most cases, non-English text (including special characters such as ©, †) should be inserted as is into a document encoded in Unicode. The Penn State Computing with Accents and Symbols page has information about individual languages, accent codes and math symbol codes.

If Unicode support is not feasible, then you can use entity codes such as è for French è or £ for the British pound sign (£). See the Penn State Computing with Accents Entity Codes page for more information.

Top of Page

LANG Tag

The LANG attribute is designed to signal screen readers to switch to another language. It is currently supported by only a few screen readers and only for the major languages, but could be more widely supported in the future.

NOTE: You must also declare the encoding in addition to the language. The language and its script are independent.

Declaring Page Language

The official W3C recommendation is to declare the primary language for each Web page with a <...lang => attribute in the <html> tag. Codes are ISO-639 Language codes.

 

 

 

 

Switching Languages

If you switch languages within one page, you can embed the LANG attribute in other tags such as a P, TD, SPAN, DIV and other tags. For example

Top of Page

Common Language Codes

ISO-639 language codes for languages taught at Penn State. See the Library of Congress and a complete list of ISO-639 Language Codes for more information.

These languages are supported by U.S. Version Homepage Reader 3 and Jaws 5.0:

• English - Code:en
  • American English - Code: en-US
  • British English - Code: en-GB
• Spanish - Code:es
  • Latin American (Mexico) - Code:es-MX
  • Castillian (Spain) - Code: es-ES
• French - Code: fr
  • Parisian French (France) - Code: fr-FR
  • Canadian French - Code: fr-CA
• German - Code: de
• Italian - Code: it
• Portuguese (Brazilian) - Code: pt

Screen readers or screen reader plug-ins designed for specific languages may also be available and may provide support for additional language tags, although not all languages may have an available plug-in. Some additional language tags include:

• Arabic - Code: ar
• Chinese - Code: zh
• Greek (Modern) - Code: el
• Greek (Ancient) - Code: grc
• Hebrew - Code: ar
• Japanese - Code: ja
• Korean - Code: ko
• Latin - Code: la
• Old English - Code: ang
• Middle English - Code: enm
• Swahilli - Code: sw

See the Library of Congress Language Code Page for a complete list of codes.

Other Ways to Signal Non-English Content

In addition to using the LANG tag, you can also include an indication in the text so that users of older screen readers can manually with languages. This can be done by spelling out the beginning/end of a passage in the text (preferably in an H1,H2 tag or as part of a set of links) or in the alt tag of an invisible graphic.

 

 

JAWS Symbol File

If JAWS is unable to recognize a particular symbol in a document, you can append a Symbol File (.sbl) file which assigns plain text values to a Unicode character. For example the cube root symbol ∛ (Unicode character code number U+221B) can be set as "U+221B = cube root"

Links to information and text files for math and phonetics are at Getting JAWS 6.1 to recognize "exotic" Unicode symbols

Note: This applies to JAWS 6.1 and later.

Top of Page

Links on Foreign Language Accessibility

These links are primarily about accessbility policy in other countries, but there may be technical information provided. Organizations supporting visually impaired persons may also be another path to explore.

• Web Aim World Laws on Accessibility
• W3C Global Accessibility Policy Links Page
• ICDRI Global Legal and Policy Resources

Top of Page

This Page

1. Guidelines for All Links
2. Guidelines for Blocks of Links

Guidelines for All Links

1. Write links that make sense out of context. Use descriptive link text detailing the destination; not just "click here" or other similar phrases. Link phrases rather than single words so users with limited motor control will not have difficulty hitting links.

   Inaccessible Link

   Click here for instructions on how to use the new Penn State web tool.

    

   Accessible Link

   Instructions for the new Penn State web tool are available online.

   Note: Some search engines such as Google give higher rankings to sites which use "context-rich" text links.

2. Maintain standard that text links are underlined and are a different color value (lighter or darker) than main text. This will help color-blind users find links more easily and is good usability practice.

3. Insert "Top of Page" links after each section in longer documents to reduce the need to scroll for motion impaired users. These links should be formatted differently from other links so users know they are page internal.

4. Avoid links opening in a new window unless absolutely necessary. New windows are disorienting for screen reader users and users of visual browsers (because the back button becomes "disabled.") Be aware also that some users of visual browsers disable pop-up windows to avoid advertising.

5. If you use the TARGET option to open a new window, include a textual indication (e.g. External Resources (New Window)) so screen readers are aware of the new window.

6. If you use Javascript Links, such as those to open up pop-up windows, make sure they are coded to be accessible by screen readers; many Javascript links are unusable in screen readers.

7. Text links are generally preferred to image links or image maps because text remains crisp at large sizes. However, if these are used, then an ALT or NAME attribute should be specified for each link. See the Image Maps and Image pages or more details on creating accessible links with images.

Top of Page

Guidelines for Blocks of Navigational Links

1. If your Web site uses a block of navigational links on each page, make sure a Skip Navigation strategy has been implemented so screen readers can avoid speaking these links on each page.

   SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links or very long lists of link

2. If you include a link to a Text Only page, place the link at the beginning of the page so that users can access it without reading through the entire page.

3. Whenever possible, break up long lists of links into categorized blocks headed by H tags, such as alphabetic headers or subtopics. Otherwise, you may have to implement a Skip Navigation strategy.

4. A row of links should be separated by a vertical bar (e.g. Link 1 | Link 2) or some other character. This helps users of older screen readers to identify distinct links.

5. Maintain a consistent set of navigational links on every page of your site, even if you must implement a skip navigation link.

6. A breadcrumb trail or listing of a page hierarchy placed below the title bar, can help users keep track of their location within a complex site. For example:

   A Breadcrumb Trail

   Creating Accessible Web sites Home  >  Details by Technology & Tag >  Links

Links to Additional References

• Jim Thatcher Quality Text Links
• WebAim Accessible Links and Hypertext

Top of Page

1. Synopsis
2. Nested Lists
3. Using Image Bullets (C.S.S.)

Synopsis

If you are using nested lists (a list within a list), then use a different numbering system in the secondary levels than in the top level. This helps users distinguish between different levels. See the Nested List example below for details.

Nested Lists

When nesting lists, use different numbering/lettering scheme at each level, so screen readers can distinguish among them. This is also advisable from a usability perspective. See examples below.

Using Image Bullets (C.S.S.)

You can replace bullets with custom bullet images, using cascading style sheet attribute – list-style-image:url(path)

 

Top of Page

 

This Page

1. Synopsis
2. Equations as Text
3. Unicode Support for Math Symbols
4. JAWS Symbol File
5. Using an Image
6. Math ML
7. Links on Math and Accessibility

Synopsis

1. Provide a label for each formula or equation whether the equation is an image or text.

2. Whenever input math equations as text, especially if they are one one line. The visuals will be generally be of higher quality, especially for low vision users. Symbols should be inputted in Unicode encoding whenever possible.

3. If a screen reader cannot interpret a symbol, then you may be able to append a pronunciation file (particularly in Jaws 6.1 +).

4. If a pronunciation file cannot be appended, then use hidden text (e.g. ALT text of an invisible graphic) to spell out the formula replacing symbols like ≠ with words like "not equals".

5. Provide ALT tag for any images used spelling out the formula. If the description is over 255 chracters, then link to an extended text description

6. PDF files or Word Files can be beneficial, but make sure the content is accessible to screen readers.

Top of Page

Equations as Text

As mentioned in the recommendations for Images, complex images may require a link to a longer text description depending on how critical it is to the content. Here is a line chart for tracking preferred computer platform over time.

 

Top of Page

Unicode Support for Foreign Language

In most cases, non-English text (including special characters such as ©, †) should be inserted as is into a document encoded in Unicode. The Penn State Computing with Accents and Symbols page has information about math symbol codes for HTML

Note on Word

Unfortunately the Insert Symbol tool in Word 2003 (Win)/2008 (Mac) does not insert the correct Unicode value for a math symbol. If the text is migrating to a Web platform or a user reports problems, then use the Windows Character Map or the Mac Character Palette to insert the symbols. Windows users should switch to the Arial Unicode MS font.

Top of Page

JAWS Symbol File

If JAWS is unable to recognize a particular symbol in a document, you can append a Symbol File (.sbl) file which assigns plain text values to a Unicode character. For example the cube root symbol ∛ (Unicode character code number U+221B) can be set as "U+221B = cube root"

Links to information and text files for math and phonetics are at Getting JAWS 6.1 to recognize "exotic" Unicode symbols

Note: This applies to JAWS 6.1 and later.

Top of Page

Using an Image

When an image is used, there should be a label for each equation and the ALT tag should specify how to read the symbols. The safest option is to spell out the symbols as words (e.g. ± as " plus or minus "). If the ALT tag is over 255 characters, then you can link to an extended text description.

Go to the example below for an accessible use of an image to represent a formula.

Top of Page

Links on Foreign Language Accessibility

These links are primarily about accessbility policy in other countries, but there may be technical information provided. Organizations supporting visually impaired persons may also be another path to explore.

• Web Aim World Laws on Accessibility
• W3C Global Accessibility Policy Links Page
• ICDRI Global Legal and Policy Resources

Top of Page

Math ML

Math ML is an XML platform designed to deliver equations as text. Equation Editors such as MathType can convert equations to MathML, however there are some issues to consider.

Unfortunately, as of April 2008, there are two incompatible MathML flavors in use – one for Internet Explorer and the official W3C MathML version used by Firefox and Opera. There is no simple way to used the same code on all three browsers. A common solution is to use scripting to present one of two versions based on the user's browser... or to avoid MathML for now.

Jaws can recognize the Internet Explorer version of the MathML if the MathPlayer plugin is installed (but no Mac viewer could properly view that page). If a user needs MathML, a page with equations in one of the two flavors a page listing the equations can be developed if an editor which can export MathML is used.

If browsers evolve to use just one version of MathML, developers may be able to replace images with MathML in a future revision.

Links on Math and Accessibility

General Math Accessibility

• Jukka Korpela Presenting Mathematical Expressions on Web Pages
• Math Accessibility - especially in reference to Braille

Unicode and MathML

• Math in Unicode (Penn State Computing with Accents)
• Quick MathML Tutorial
• Math Player (Internet Explorer Only)
• del.icio.us - MathML+Accessibility

Top of Page

This Page

1. General Plug In Tools
2. Microsoft Word Tips
3. PowerPoint Tips
4. Excel Tips
5. Adding Image Alt Tags (Windows Only)
6. Cautions on Converting Word and Excel to HTML

General Plug In Tools

1. Make sure your audience has ready access to Microsoft Office packages, and for the version you are using. Although these are readily available at Penn State, they may not be available outside of Penn State; another option like PDF or pure HTML may be better in these situations.

   SECTION 508 - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with § 1194.21(a) through (l).

Microsoft Word Tips

1. Use the built in Header style tags (e.g. Header 1, Header 2, Header 3) in Word as you would H1,H2,H3 tags in an HTML file. These headers may be preserved and interpreted in screen readers when files are converted to PDF or other formats. The Format » Style menu allows users to adjust the appearance of these tags in a Word file.

2. Provide labels and captions for all images and charts.

3. In some HTML editors like Dreamweaver 2004, Header styles are converted to H tags when the text from Word is copied and pasted into Dreamweaver.
   Note: Avoid "Paste as Formatted" in Dreamweaver, since it will copy extra style tags.

4. Avoid using the "Save as Web file" option to convert Word and Excel files to HTML. Even in filtered mode, the code tends to be very clunky and may be inaccessible depending on how the original file was formatted (see inaccessible example below). It's better to convert the file into a PDF or cut and paste raw text into an HTML editor andreformat the content more accessibly.

Power Point

1. Always add labels to images and include extended text descriptions for graphics and charts as needed. Audio and video files should include captions or transcripts.

2. Use a color scheme which provides enough contrast of text versus background, yet is not too overpowering. See the color page for more information.

3. Use sans-serif fonts which are designed for both projectors and online viewing.

4. Give a title to every slide and make sure the title is entered into the designated title area (usually at the top). This generates a table of contents for the screen reader (in both Power Point and in the HTML version).

5. If you use the Chart Wizard, make sure the color formatting is accessible. See details below in the Excel section.

6. Screen readers may have difficulty processing Power Point files. If Power Point files are posted online, use the Save as Web Page option. Users of Office for Windows can also add ALT tags for images. Mac Office users should make sure all images are described in the text (i.e. a caption) in the slides.
   Note: You can also purchase a plug in to audit the accessibility of the output file (Windows only).

7. If you convert PowerPoint files to an HTML file on a Macintosh, then you will need to manually insert the ALT text for all images. PowerPoint files are published in its own folder and could be edited by an HTML editor such as Dreamweaver.

8. If you use Adone Presenter with a PowerPoint file to create a recorded presentation, make sure that images are tagged and minimize transitions. Text transcriptions are also necessary for audio content. See information at http://www.connectusers.com/tutorials/2007/09/accessible/index.php

Excel

1. Avoid converting files from Excel to HTML since inaccessible tagging may be added. See the Word HTML for a discussion of similar issues. It may be better to upload the Excel file itself or convert it into a tab delimited or comma delimited file.

2. Make sure headers and rows are labeled as in a data table.

3. If you are using the Chart Wizard
   
   1. Use the formatting options in line charts to create different types of dotted lines to facilitate legibility for color blind users.
   2. Avoid using the yellow and bright teal lines; use formatting options to change it to a darker color.
   3. Ensure that charts are legible are grayscale (black and white).
   Add a text key for bar charts or change the default colors to a color safe palette.

Adding Image Alt Tags (Windows Only)

The Windows version of Microsoft Office allows you to insert ALT tags to inserted images which can be read by a screen reader. If these files are converted to HTML, the ALT tag is generally preserved.

Note: This tool is not available in Office 2004 or Office 2008 for Macintosh.

Microsoft Office 2007

In Microsoft Office 2007, the Alt Tag tool is under the Picture Size options. In Office 2003, it is under the Format Picture options.

1. Open any Microsoft Office software and select an image so that square anchors are visible.
2. Right click the mouse and select Size.
   
3. In the Size window, select the Alt Text tab on the right, then fill in a description of the image. Click Close to finalize alt text.
   Note: If the tab is not available, make sure you have not selected the Format Picture option.
   
   
   

Microsoft Office 2003

In Office 2003, it is under the Format Picture options.

1. Open any Microsoft Office software and select an image so that square anchors are visible.
2. Right click the mouse and select Format Picture.
3. In the Format Picture window, select the Web tab on the right, then fill in the Alternative Text content. Click OK to close.
   Note: This tab is not available in Office for Macintosh.
   

Cautions on Converting Word and Excel to HTML

Although Microsoft products include a function to convert content to HTML, the implementation is not regarded as standards compliant. Below is a sample of what codes are generated by the Save as Web file option in Microsoft Word.

If need convert to HTML, you can look for the Filtered Web option (available in Office 2007 for Windows only) or you can purchase a plug in to audit the accessibility of the output file (Windows only).

 

 

Accessibility Issues of Word Generated HTML

Note: Some text editors such as Global Writer export HTML with less embedded formatting.

1. Styles use fixed font sizes, not relative font sizes. Zoom will be disabled in Internet Explorer 6 and earlier versions.

2. Will probably fix the font to Times New Roman which is designed for print, not for computer monitors.

3. Style sheets are embedded and are time consuming to remove manually. In fact, all Word styles in your template are exported even if they are not used in the original document.

4. Word HTML allows designers to specify for unusual fonts or symbols which may not be available on all computers.

5. If Smart Quotes are turned on, then they will be converted to a Unicode numeric character or left intact. Older browsers may not be able to decipher these symbols.

Top of Page

Microsoft Office Accessibility Links

• WebAim PowerPoint Accessibility
• WebAim Word Accessibility
• www.virtual508.com - Microsoft Office to HTML Wizard based on that developed by the University of Illinois.

Top of Page

Older screen readers had trouble reading tables, but this is not a problem for newer screen readers. See the tips section for information on how to make formatting tables more accessible

This Page

1. Older Screen Readers and Multi-Column Formats
2. Is CSS better than TABLE?
3. Tips for Implementing Formatting Tables
4. Reading Order Issues (Linearization)
5. CSS Options

Synopsis

1. Layouts with multicolumns are accessible to modern screen readers, but you must ensure that the flow of the text is coherent.

2. You can use TABLEs for layout, but note that cells are read left to right, top to bottom. You do not need to include data table accessibility tags such as TH and SCOPE.

3. CSS formatting is often preferred, but you must ensure that positioning is not used to place elements out of order so that text becomes incoherent when CSS is disabled.

Older Screen Readers and Multi-Column Formats

Older screen readers used to not recognize columns (whether they were in TABLEs or formatted with CSS). Instead they would read the text on the page left to right as if it were linear, causing text to be read out of order

For this reason, some accessibility experts in the past strongly discouraged the use of multiple column layouts, then mostly implemented with formatting tables.

NOTE: Some screen reader software packages, such as JAWS, allows users to enter tables reading mode, but some users may not be aware that this feature exists.

Is CSS better than TABLE?

For accessessibility, the difference is actually minimal. The main advantage of using CSS over TABLEs is that there is usually less code, making maintenance much easier.

However, you can cause accessibility glitches with CSS if the positioning is not properly implemented. There are also inconsitencies in how CSS is rendered across browsers.

If you cannot find a CSS solution wthich

Some experts recommend using CSS styled DIV to set up layouts, but there are a number of serious pitfalls to be wary of. If in doubt, a layout table may be a better solution in the short term. It is not currently a part of Section 508 policy that all formatting tables be eliminated, just that they be accessible.

Benefits

1. Screen readers do not announce the number of cells for DIVs.
2. There are more formatting options available.
3. Code is less bloated.

Pitfalls

1. Floating DIVS may place content out of order for screen readers.
2. It will probably not resolve the issue of multiple column layouts for older screen readers.
3. Implementation of CSS varies widely between browsers, so any desigm must be tested on multple browsers. This problem has been lessening over time.
4. Section 508 requires that content be readable with stylesheets disabled. Test to see that your site makes logical sense if CSS is disabled.
   
   Section 508 - Documents shall be organized so they are readable without requiring an associated style sheet.

Tips for Implementing Formatting Tables

1. Make sure your text makes sense when read cell-by-cell, row-by-row, starting from the upper left and ending in the lower right. This is the default reading order of table cells for screen readers.

2. If one of the columns is used for navigation, implement a Skip Navigation strategy so that users can navigate into content and skip repeating a set of site navigational links.

   SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links.

3. When using a table for formatting, you do not need to use the TH, SCOPE, CAPTION tags. These are only used for data tables.

4. You can use the SUMMARY tag to indicate to screen reader users that the table is being used for layout purposes.

5. Avoid using tables to create "textbars". CSS has more formatting options for this and generates cleaner code.

6. Avoid nesting tables for visual effect. Screen readers read out the number of rows and cells for each table, so the fewer tables, the better.

7. Whenever possible, set column and table widths to relative sizes (e.g. width="25%") rather than absolute sizes (e.g. width="200"). This way, tables can be adjusted to fit the screen more appropriately depending on monitor resolution or zoomed text.
   NOTE: Some users deliberately set their monitors to a lower resolution (e.g. 800 x 1200 or 640 x 400) as a way to increase text size in general.

8. Some formatting tables can be avoided by using cascading style sheets to specify background colors and borders for elements such as an H1 tag or a DIV class.

Reading Order Issues

As mentioned above, the default reading order of table cells is left to right, top to bottom as shown in the example table below.

It's important that, when using tables for formatting, the text be coherent when read in cell table order. See the following example for details.

Top of Page

CSS Options

See the CSS page for options relating to multiple column layout and links to tutorials.

The Divs Resembling Tables shows some options for adding borders and background colors with more control than in HTML Tables. The Inaccessble CSS section shows how CSS can be used to position text out of logical order.

Top of Page

HTML versus PDF

PDF Files are a convenient way to deliver print documents online, but should generally not be used a replacement for an HTML Web environment.

Potential Disadvantages include

1. PDF documents are usually formatted to printed vertically, but computer monitors are generally horizontal. The mismatch causes users to scroll more often than in an HTML site which can be difficult for users with mobility impairments.
2. Very large files can be slower to download than an HTML page.
3. PDFs consiting of scanned pages is really a series of images, and inaccessible to a screen reader. Only an OCR (optical character reader) scanner can can save a scanned document as a text file.
4. The interface between a browser and an PDF file is not consistent across platforms and browsers.
5. The transition between a PDF document and an external Web site is not as seamless as between HTML documents.
6. PDF files may need to be tagged in order to be considered accessible to screen readers.
7. Additional training and plug-ins for making PDF forms accessible is required in addition to the training needed to make an HTML form accessible.
8. PDF interfaces can be slower to zoom than an HTML version, particularly for complex documents such as a street map.

However, there are instances when a PDF file is the best way to deliver material.

Some good uses of a PDF File

1. Post print manuals and print forms online. These would include blank tax forms, how-to instructions for designed print, blank application forms, contracts, long articles or long users manuals.
2. Post material using technical fonts in specialized fields such as in music, foreign languages, mathematics, and so forth.
3. Deliver high resolution images in a relatively small file format.

Synopsis

In order to make the use of PDF files more accessible, consider these recommendations.

1. Always provide a link to the page to download Adobe Acrobat Reader.

   SECTION 508 - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with § 1194.21(a) through (l).

2. Convert files to be compatible the latest versions of Acrobat Reader since more accessibility options are available. Encourage users to download the latest versions of Acrobat Reader.

3. Note when a link goes to a PDF file (e.g. "User's Manual (PDF)"). This gives notice to all users that a link will be opening a PDF file, not going to another Web page.

4. Create files compliant with more recent versions of Acrobat Reader and use "tagging" to make sure all images have the equivalent of ALT tags. These tags can be accessed by some screen readers. Instructions are available from Adobe Acrobat Accessibility. See the Section 508 paragraph from the previous item.

5. Create a PDF file directly from a Word or text file whenever possible to enhance accessibility because the content will be stored as text and is more likely to be accessible by a screen reader.

6. If you use Microsoft Word, use the Header 1, Header 2, Header 3 styles where HTML would use H1, H2, H3. When these documents are converted to PDF, these styles will be parsed as headers.

7. Recent versions of Adobe InDesign (Mac and Windows) supports tagging when PDF files are created (or exported). Recent versions of Micorsoft Office for Windows also includes some additional PDF tagging features.

8. If you are scanning in material which is mostly text, scan the material in with an O.C.R. optical character scanner which converts a scanned image of a text to a text file. If files are scanned with a regular scanner, the PDF file will consist of a series of inaccessible images.

   Note: Scanning text with an OCR scanner will also make the transition of any text to HTML easier.

9. Avoid converting text with multiple columns into PDF This causes addition scrolling up and down as you read each column making it harder to process for people with motion impairments.

10. Be aware that some security measures on PDF files may disable screen reader access. Be prepared to provide alternative access to visually impaired users.

11. When in doubt, provide an alternative text-only or HTML only format which is more likely to be accessible.

12. Read more about how to optimize PDF files for accessibility. Some resources include the following:

P.D.F. File Accessibility Links

• Adobe Accessibility
• Adobe How to Create Accessible Adobe PDF Files
• University of Wisconsn Making PDF Files Accessible
• A List Apart Facts and Opinions About PDF Accessibility
• Making Connections - U.K.
• Planet P.D.F. Accessible P.D.F.

Top of Page

The Issues

Pop-up windows can add functionality to a Web site, but must accessible scripting. Further, the site should still be functional even ifJavaScript is disabled. In addition, many users with visual browsers use pop up blockers

in order to avoid pop-up advertising.

JavaScript pop-up windows should only only be used if they add a significant advantage in functionality.

SECTION 508 - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

Synopsis

1. If you do open a new window or new tab (with either the TARGET attribute or a script), then add a label that the link will open a new window. Many users (on screen readers and visual browsers) are confused when they do not realize a new window is open and the back button ceases to function.

2. Accessify.com provides a tutorial on creating an accessible pop-up window. However, it should be tested before using on a Penn State Web site.

3. Provide a <noscript> alternative which uses a plain link to direct users with Javascript disabled to the appropriate information.

4. Provide both a plain link and a pop-up link.

5. Avoid disabling the scroll bars and resizing options; readers with low vision may need to resize windows to accommodate larger text.

Accessible Java Script Pop-Up Windows

These Websites provide advanced tips for implementing Javascript pop-up windows in an accessible fashion. Testing on multiple platforms is recommended.

• A List Apart: Pop-Up Links
• Accessify.Com: Perfect Pop-Ups
• Javascript and Accessibility Part 1
• NetMechanic Pop-Up Windows and Accessibility

Top of Page

Synopsis

1. When using redirects or forms requiring a timed response, make sure adequate response time is given for mobility impaired users, users with screen readers and readers with cognitive impairments; all these audiences require extra time to process instructions.

   SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links or very long lists of links.

2. If you need to implement a permanent redirect for URL it is recommended that you use the "HTTP status code 301" on a server rather than the <meta http-type="refresh" > tag. The 301 code is more standard, but can only be implemented by a server administrator.

3. If you need to redirect users to a new Web address, then a static page with a link is recommended over a page with a timed redirect.

4. If your Web site is set to automatically log out a user after a certain period of inactivity, make sure the Web site gives a warning with a reasonable window of opportunity for the user to click to stay connected.

5. Avoid using redirects to circumvent navigation buttons, such as a redirect which returns a user to the same page when the Back button is clicked. It is generally considered inaccessible to disable standard browser functions unless absolutely necessary.

6. Don't Disable the Back Button. It is possible to code your Web page so that when users click on the Back button, they are redirected back to the same page instead of going to the previous Web page. This is generally considered both non-usable and non-accessible because it interferes with the standard protocols of a browser and could cause confusion for many users.

Permanent Redirects versus Temporary Redirects

A permanent redirect which directs users from an alternate Web address to a the real Web address can be automated to be instantaneous. Since this redirect path will be maintained permanently and is meant to be transparent to users, there is no need to provide any time lag.

A temporary redirect is one in which is implemented after a Web site has changed its permanent address. The purpose of this kind of redirect is to inform users that an address is changing and that bookmarks and links should be updated.

Since information about the redirect needs to be read and digested by users, an untimed static page with the new U.R.L. is recommended over a timed redirect. See example below.

Top of Page

Synopsis

1. Links to content and other functionality should be available even if JavaScript is disabled. A <noscript > alternative text-only navigational system or text links may add accessibility.

   SECTION 508 - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

2. If scripts are used to generate HTML code for dynamic pages, then the generated code should comply with accessibility guidelines.

3. If a script relies on a user clicking a mouse, then make sure to include event handlers that can also allow a user to use the keyboard to tab to the tool.

4. Avoid using arbitrary database numbers for ALT tags, TITLE tags, FRAME tags and other text-only accessibility devices.

Related Topics

Scripted Objects

• Drop Down Menus
• Dynamic Pages
• Pop Up Windows

Alternatives to Scripting

• CSS Rollovers
• Datestamping without Javascript

Links

Basic JavaScript

• Web Reference Javascript and Accessibility (Scroll down list of titles)
• WebAim Creating Accessible JavaScript
• Ohio State WAC JavaScript Tutorial Links

ARIA

• W3C WAI-ARIA Specifications
• W3C WAI-ARIA Best Practices
• Basic Slider with Aria

Top of Page

This Page

1. Why Skip Navigation Links?
2. An Inaccessible Example
3. Skip Link Method 1 - Pixel with Alt Text
4. Alternative Methods

Synopsis

It is recommended that a hidden "Skip to Content" link be included before the site's main navigation, but this one link is usually sufficient.

Users with screenreaders can skip between major headers and subheaders which are tagged H2,H3,H4.

Why Skip Navigation Links?

Having a consistent set of links at the top or left side of a document is beneficial for both usability and for people with some mobility impairments as they may not need to move the mouse as far to reach the navigation.

But for users with screen readers, hearing the same list of links at the beginning of each page is time consuming and potentially irritating. Therefore a Skip Navigation strategy should be included to allow users of screen readers to skip over a block of navigational links.

SECTION 508 - A method shall be provided that permits users to skip repetitive navigation links or very long lists of links.

 

Top of Page

Skip Link Method 1 - Pixel with Alt Text

In the first method, an invisible pixel graphic is placed before the navigation with the ALT tag reading "Skip to Content." This is turned into a link which goes to a page-internal link further down the page. Note that the image BORDER should be set to "0" in order to keep the image hidden from visual browsers.

Top of Page

Alternative Approaches

The Web AIM Skip Navigation Page lists some alternatives including making the Skip to Content link visible when a user tabs to it on a keyboard. This allows both motion impaired users and screen reader users to take advantage of it.

Links

• Web AIM Gratuitous Skip Links
• Web AIM Skip Navigation Links

Top of Page

A table can be classified as a data table whenever you need to specify a row or column with header information about that row/column. If no informational header is needed, then it is a formatting table.

This Page

1. Synopsis
2. Simple Tables: TH and SCOPE
3. CAPTION Tag
4. SUMMARY Tag
5. One-Row Cells
6. Accessibility Tags for Complex Layouts

Synopsis

1. When using tables to present data, use the use the TH and SCOPE tags to identify which cells are row and column headers. This helps the screen reader organize the data to be read in a logical order and identify data types.

   SECTION 508 - Row and column headers shall be identified for data tables.

2. Avoid spanned rows and columns in data tables, especially as headers. Many screen readers cannot properly parse these.

3. In general, data cells should take up one row only; this helps older screen readers read the table coherently.

4. Make sure any abbreviations and acronyms used in the tables are accessible.

5. For complex data tables, you must use newer accessibility tags such as SCOPE, CAPTION, SUMMARY, ABBR, ACRONYM, TFOOT and THEAD as needed to further organize information in complex data tables.

   SECTION 508 - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

   Given the complexity of this tag set however, you may want to consider replacing one complex table with a series of linked simple tables. Screen reader access is generally more straightforward and code maintenance may be simpler as well.

   See the Complex Table Tags section for more details.

Top of Page

Simple Tables: TH and SCOPE

A simple table here means means that there is a maximum of one row category and one column category. Use of the TH and SCOPE tags combined with CAPTION and SUMMARY tags will provide sufficient information for most newer screen readers to process simple tables.

The TH tag is used to designate certain cells as row and column headers. Visually, the TH tag changes the text formatting to bold face and center in most browsers.

The SCOPE attribute in the TH tag is used to further define whether the header is a row ( <th scope="col"> ) or a column ( <th scope="row"> ). Designating the SCOPE changes the order in which cells are read out in a screen reader from the default left-to-right, top to bottom order. This code is sufficient for most screen readers to process simple tables (one header row and one header column), but additional tags are needed for more complex tables. See below for details.

 

Top of Page

CAPTION Tag

The CAPTION tag can be used to display a title for the table. It can be visually formatted and be positioned above or below the table as needed.

 

Top of Page

SUMMARY Tag

The SUMMARY attribute is placed within the TABLE tag and is read by the screen reader only. It can be used to clarify the organization of a table or provide a quick summary of results. It should not repeat CAPTION text.

 

One-Row Cells

When possible, data cells should take up one row so that screen readers which do not process tables well will be better able to read the content.

Accessibility Tags for Complex Layouts

It is possible to structure complex tables to be accessible via the AXIS, HEADER, THEAD, TBODY and similar tags, but it is very tricky to implement. In addition, standards are in flux, so recommendations may vary. Below are some tutorials which explain how some of these functions work.

• Web AIM Table Tutorial - ID and HEADER tags, but recommends simple tables only
• Semantic XHTML Table Markup - HEADER, ID and COLGROUP
• W3C Recommended Tags - Some may or may not work in screen readers.

One option may be to break up a complex table into a series of linked simple tables which can be more easily maintained. These tables may also be more usable for the general audience.

Top of Page