Accessibility Guide

This section contains accessibility tutorials, references and links and the Accessibility Blog and Resources . We hope to add to this resource over time.

If you are not sure where a piece of information is, you can use the Search box on the left or View the Accessibility Site Map.

Quick Accessibility Checklist

This Quick Accessibility Checklist is meant to help faculty and staff who want to develop or modify Web-based course material, lectures, and assignments in an accessible way.

See also the Section 508 Requirements.

Table of Contents

  1. Multimedia Elements
  2. Web Tools
  3. HTML Tags
  4. Advanced Web Design

Multimedia Elements

  1. If you use images, use the ALT tag to provide a clear text alternative. Descriptive ALT text should provide equivalent information as the graphic. For complex images, an extended text description may be needed. If you want a tooltip for an icon, use the TITLE attribute, not the ALT attribute.
    View Details: Images

  2. If you use charts or graphs, provide a text alternative that summarizes the content of each chart or graph, and make sure color coding is not the only key used in the chart, but is supplemented with labels or differences in line shape.
    View Details: Charts

  3. If you use mathematical or scientific notation, be sure a screen reader can access the content either through an ALT tag on an image, an extended text description or some other mechanism.
    View Details: Math

  4. If you use motion or animation, make sure that it's necessary and that the flicker rate is lower than 2 Hz. and greater than 55 Hz; animations within these frequencies may trigger epileptic seizures. If the animation is needed, be sure to provide an alternate text description that clearly communicates the action and its purpose on a separate page.
    View Details: Animation

  5. If you use audio or video files, provide captioning or a description/transcript in text form. If a transcript is used, then text can be can be on the same page, or accessed via a hyperlink to a separate page can be placed near the clip.
    View Details: Video and Audio

  6. If you want to upload a PowerPoint file, then make sure all graphics are labeled and includes appropriate extended descriptions are included. All audio should be captioned or have a transcript. PowerPoint files converted to HTML should include ALT tags as needed.
    View Details: PowerPoint and Word

  7. If you want to use material from a Word file, then either upload it as is, recreate the HTML file or convert it to a PDF file. Avoid the Save as Web file option in Word as it creates inaccessible files.
    View Details: PowerPoint and Word

Top of Page

Other Web Tools

  1. If you use ANGEL or other course tools, make sure all uploaded images are described, all uploaded material is accessible and that all quizzes and forms are accessible.
    View Details: ANGEL

  2. If you use PDF files, make sure the PDF is restricted to appropriate uses and that files include labels or tags identifying embedded images and that text content is stored as text, not as a large image. Links to PDF files should include some sort of indication on the page that the link is different; this will reduce user confusion. When in doubt, create a text-only or HTML version of the content. Section 508 also requires that a Web site provide a link to the Adobe Acrobat Reader download page.
    View Details: PDF Files

  3. If you use Adobe Connect, make sure that the tool is usable by a screen reader if a participant is visually impaired. Captions or chat texting should be used if a participant is visually impaired.
    View Details: Adobe Connect

  4. If you use ASCII art in e-mail signature, then make sure it is placed below all the essential contact information so users of screen readers can stop reading the content.
    View Details: Chat and E-Mail

Top of Page

HTML Tags

  1. Basic HTML tips - Use appropriate H tags to structure your content into sections and be as concise as possible. Be aware of how screen readers pronounce acronyms and abbreviations as single words.
    View Details: HTML Structure | View Details: Abbreviations

  2. If you want to incorporate color, be sure that none of the content relies on color coding alone. Color coding should be supplemented by text or differences in lightness or shape. Contrasts of bright colors and strongly textured backgrounds should also be avoided to facilitate legibility.
    Note: Contrasts of red/green or red/black are the most likely to be confused.
    View Details: Color

  3. If you wish to specify a font, consider fonts designed for a computer monitor such as Arial and Verdana and always use relative sizes. Italics text should be used minimally, and blinking text should be avoided.
    View Details: Fonts

  4. If your page has a block of navigational links on each page, include a "Skip Navigation" strategy accessible to screen readers.
    View Details: Skip Navigation

  5. If your page has links, then make sure the text of the link describes the location of the new page. Avoid generic "Click Here" links.
    View Details: Links

  6. If you use lists, use ordered lists so that items are numbered, or include the item number within your text.
    View Details: Lists

  7. If you use tables, be sure to include header tags for data tables and that any table makes sense when read left to right, top to bottom. This is how a screen reader will read them by default.
    View Details: Data Tables | View Details: Layout Tables

  8. If you use frames, clearly title each frame, file name and use the TITLE attribute to facilitate navigation and frame identification. Provide basic navigation for each page in case user enters Frames Free mode.
    View Details: Frames

  9. If you use forms, clearly associate form labels with each elements by placing them to the left of the element. Use of LABEL and FIELDSET tags can facilitate accessibility.
    View Details: Forms

  10. If you need to include equations or formulas, make sure each one is labeled and that any equation or formula necessary for content includes a link to an extended text description which reads out the formula in words.
    View Details: Equations and Formulas

  11. If you use multiple languages, make sure to specify the LANG tag and use appropriate HTML entities for special characters and punctuation. For languages with low numbers of speakers, an audio transcript may be needed for full accessibility.
    View Details: Languages

  12. If you use CSS formating, make sure your CSS formatting produces an accessible page and that the page is still functinal if CSS is disabled.
    View Details: CSS

Advanced Web Design

  1. If your page includes image rollovers, then make sure the alt tag includes the most relevant information. For rollovers showing complex concepts, a link to a text description should be included. If you use image rollovers to change text formats, consider switching to CSS style sheet rollovers since they are often more accessible.
    View Details: Rollovers

  2. If your page includes automatic datestamping, you may want to consider one of several non-Javascript options available in which a date is inserted by a server or Web editor. Otherwise a date would need to be automatically updated in order to be accessible.
    View Details: Date Stamping

  3. If your page includes dropdown or floating menus, then make sure a text-based menu is included. Floating menus are difficult for screen readers, users with mobility impairments, and users with some types of cognitive impairments to use.
    View Details: Dropdown and Floating Menus

  4. If your page includes redirects or timed actions (such as clicking OK to continue being logged in), then be sure to provide adequate response time for users of screen readers or users with mobility impairments. In some cases, a redirect should be replaced with a static page containing a link.
    View Details: Redirects and Other Timed Responses

  5. If your page includes popup windows, make sure a link to the content is available even if Javascript is disabled. Windows should permit scrolling and resizing for low vision users.
    View Details: Popup Windows

  6. If you use dynamic pages, make sure all HTML chunks include accessibility tags and that ALT tags or frame TITLE tags are meaningful and not numeric database entries.
    View Details: Dynamic Pages

  7. If you use scripts or applets, then make sure a NOSCRIPT alternative is available.
    View Details: Scripts

Top of Page

Section 508 Summary Requirements

List of Regulations

Below is a table summarizing Section 508 requirements as of 2003 with links on where to find more details. Paragraph Numbers. These guidelines are not a list ofHTML "do's and dont's", but rather a list of accommodations that must be made for people with different disabilities. The technical implementation is left to the discretion of the developers, although some technical suggestions may be made in some cases.

See also the Quick Accessibility Checklist listing recommendations by different technologies.

Synopsis of Section 508 Requirements
Paragraph # Text of Regulation How to Implement
A
 A text equivalent for every non-text element shall be provided. Use TITLE or ALT when available as a minimum. Provide longer text transcriptions and descriptions for more complex items.

Details on pages for Images, Image Maps, Audio and Video, Charts, Math
B
 Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. Use captioning software for video or Flash animations when possible.

Details on page for Audio and Video
C
 Web pages shall be designed so that all information conveyed with color is also available without color. Supplement color coding with other signals such as shape or text.

Details on page for Color
D
 Documents shall be organized so they are readable without requiring an associated style sheet. Use external stylesheets, but also make sure pages are structured with appropriate H tags to be readable with stylesheets disabled.

Details on pages for CSS and HTML Structure (not found)
E
 Redundant text links shall be provided for each active region of a server-side image map. If you use server side image maps, provide a text based menu. But client side maps are preferred (see next paragraph).

Details on page for Image Maps
F
 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. Client side image maps are preferred unless they can only be implemented with server-side image maps.

Details on page for Image Maps
G
 Row and column headers shall be identified for data tables. Use the TH tags for column and row headers of data tables

Details on page for Data Tables
H
 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. Additional accessibility tags are need for very complex data tables.

Details on page for Data Tables
I
 Frames shall be titled with text that facilitates frame identification and navigation. Use the TITLE attribute and meaningful frame titles.

Details on page for Frames
J
 Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hertz (cycles per second) and lower than 55 Hertz. Avoid rapidly blinking texts and animation.

Details on pages for Fonts | Animation
K
 A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes. Use a text-only page only as a last resort. The text-only page must be updated with the rest of the site or the site will be out of compliance.
L
 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. Content must accessible on pages using scripts. Some screen readers are unable to process some types of Javascript links, so a NOSCRIPT alternative must be provided.

Details on Scripts
M
 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). 1. Always provide a link to an accessible Web page where a user can download a plug-in.

2. Plug-ins used should allow you to create Section 508 compliant content. See vendors for details.

Details on pages for PDF Files, Flash and Microsoft Office
N
 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. Use new forms tags to facilitate accessibility

Details on page for Forms
O
 A method shall be provided that permits users to skip repetitive navigation links or very long lists of links. Details on page for Skip Navigation
P
 When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Details on page for Redirects

 

Top of Page

Testing for Accessibility

Suggested Testing Protocol

  1. Make sure that all content is available in screen reader or text only mode.
    See Screen Reader Testing
  2. Make sure your page is legible in different color modes and has sufficient contrast between text and background.
    See Color Testing Details
  3. If you use style sheets, then make sure the content is usable with style sheets turned off.See Style Sheet Testing Details
  4. Make sure the page zooms well by going to your browser then the View menu and selecting a Text Size option. See Zoom Testing Details
  5. You can run the site through accessibility reporting services to see if you have missed any issues. See Accessibility Report Details
  6. Solicit feedback from multiple users.

Key Tools

  1. Illinois iCITA Firefox Accessibility Extension
  2. Web AIM Accessibility Checker
  3. Accessibility Testing with Opera Browser
  4. Fangs Screen Reader Emulator for Firefox
  5. Luminosity Colour Contrast Ratio Analyser
  6. Wickline Color Filter
  7. LIFT Plug In
  8. Cynthia Says

Other Resources

  1. Detailed Testing Protocol
  2. About Accessibility Reporting Tools
  3. Sample Accessibility Reports

Top of Page

Detailed Testing Protocol

This protocol gives a list of the general types of audiences you are testing for and some methods for testing at each stage.

A. Screen Reader Testing

Use one or more of the following options as needed.

  1. Use the online WebAIM Wave report to locate ALT tags, HTML headings and other hidden tags. Posts alerts for possible missing elements in red or yellow icons.
  2. Illinois iCITA Firefox Accessibility Extension and use the Hide Text Equivalents to show ALT tags

    . In the Style menu, un-check Author CSS to disable stylesheets
  3. Install Fangs Screen Reader Emulator for Firefox. To view a sample page in screen reader mode, go to Tools » Fangs. It does not read text aloud, but displays content from any Web page in screen reader format (no line breaks, headers/tables announced).
  4. The best results occur if you can install demo versions of different screen readers. Some demos like JAWS work for only limited stretches of time but can be re-used as needed. See the WebAIM Using Jaws page for details on how to test with JAWS.
  5. Computers with screen readers are available at the Penn State Libraries and in some labs designed for users with disabilities. See the Assistive Tech page for details.
  6. Test in the Opera browser with accessibility utilities.
  7. View the page on the Yellow Pipe Lynx Text Browser Similator. Although not the same experience as a screen, this tool will show you generally what a screen reader will see and allows you to quickly spot missing ALT and TITLE tags.

Top of Page

B. Color Testing

  1. Test color contrast at the Juicy Studio Luminosity Colour Contrast Ratio Analyser or WebAIM Color Contrast Checker
  2. Install and use the Color Contrast Analyzer published by Juicy Studio.
  3. Use a color blindness simulator from the list on the color blindness page.
  4. Photoshop CS4 includes a color blindeness view in its Proof menu.
  5. View your page or images in grayscale.It's not as effective as a color blindness simulator, but will catch most problems.
  6. In a pinch you can print your page (with HTML backgrounds) on a black and white printer to simulate grayscale.

Top of Page

C. Style Sheet Tests

  1. Illinois iCITA Firefox Accessibility Extension. In the Style menu, un-check Author CSS to disable stylesheets

  2. Download the Opera browser which allows you to toogle between Author Mode (with stylesheets) and User Mode (custom or no stylesheet). See the WebAim Opera article for more details.

Top of Page

D. Zoom Testing

  1. It's especially important to test documents on Internet Explorer for Windows version 6since it has the most issues with zooming. To test whether the code has disabled zooming, go to View then Text Size then Largest. If the text does not appear to change size, then the the coders have specified absolute font sizes and disabled zooming.

  2. Open Firefox or Opera and zoom to at least 200%. To zoom in Firefox, go to View then Zoom In about 4 times. To zoom in Opera, click on the magnify drop-down menu to the right of the URL address bar and type or choose "200%".

E. Accessibility Reports

See the section below for detailed information about accessing and evaluating accessibility reports.

Top of Page

Accessibility Reports

A variety of organizations and companies have developed tools to "scan" Web pages and see if they are accessible or not. Although these tools can catch some errors like missing ALT or TH tags, they cannot catch all errors. You must still use the manual checks above to determine that all accessibility requirements have been met.

Common Reports

Some common reports include:

Lists of Manual Checks

For errors that cannot be caught automatically, a list of manual checks, is generated. Therefore a completly Section 508 compliant site could still generate a list of items to check depending on the reporting tool - this is perfectly normal.

Limits of Accessibility Reports

Below are some advantages and limits of accessibility reporting tools.
(Chart provided by the University Libraries)

HTML Element Reports CAN Reports CANNOT
Images Check for Missing ALT tags Verify that ALT tags are accurate
Color Suggest manual color check Simulate Color Blindnesss modes
Data Tables Identify most missing TH tags Check that tables are coherent when read left-to-right, top-to bottom
Flash Objects Suggest manual check Determine accessibility of Flash forms or interactive modules
Style Sheets Suggest manual check without CSS sheets Check stylesheets for accessibility
Links Identify large blocks of links Identify links which are vaguely worded or too close together
Forms Identify missing LEGEND, LABEL and ID tags Fix them for you automatically or ensure that they are accurate
Javascript Suggest manual NOSCRIPT check Automatically insert a NOSCRIPT alternative
HTML Code Validation Do Nothing HTML and XHTML validation is completely different tool or report

Top of Page

Accessibility Tutorial

This is a tutorial about accessibility audiences, policy and where to learn more about accessibility accommodations for different technologies.

Definition of Accessibility

What is accessible Web design?

Tutorial Page 1

A Web Site is accessible when it can be understood by everyone, regardless of what browser or adaptive equipment he or she may be using. Creating a new Web site that is accessible, or making your current Web site accessible, is easy and benefits everybody.

This seminar was created to help Penn State Web developers and faculty develop, adjust, or adapt Web based course materials so that they are accessible, and to raise both faculty and staff's awareness of disability issues as they affect teaching and learning with technology.

Audiences for Accessibility

Who are the audiences for accessibility?

Tutorial Page 2

There are multiple audiences needing their own accessibility accommodation, depending on their needs. However, many "accomodations" actually serve more than just the intended core group...showing that accessibility can benefit everyone.

A. Severe Visual Impairment

This Page

  1. Tools Needed
  2. Demo
  3. Accomodations Needed
  4. Hidden Audience
  5. Testing and Demo Tools
  6. Lists of Jaws Commands
  7. Screen Reader Vendors

These are people who may rely on a screen reader (or software which reads content aloud) to access Web sites. Visual cues such as images, layout of data tables or multi-columns layouts may be unavailable to them without adding additional information within an HTML document.

Tools Needed

Screen readers are used by users with severe visual impairment. They may be paired with either Internet Explorer and Firefox or text only browsers such as Lynx in order to facilitate screen reader operation.

The most common screen reader is probably JAWS (Windows only), but other screen readers such as Windows-Eyes (Windows), VoiceOver (Mac), Emacspeak (Linux) may also be used.

Top of Page

Demo

The following two images shows a screen capture of the header at http://tlt.its.psu.edu in both Firefox and in Lynx.

TLT Header in Firefox

Image shows Penn State logo, Teaching and Learning with Technology logo, search box and tabs for Home, News, Events, Videos, About, Contact, RSS feeds

TLT Header Viewed in Lynx

Lynx screen capture shows alt tags for logos and tabs as menu. This is page 1 of 10 for this page.

Top of Page

Accomodations Needed

The main accomodations needed by this audience are:

  • ALT text to describe images on the Web, in Microsoft Word/PowerPoint, ANGEL, Flash, PDF and any other online document
  • Web Forms should identify functions of fields to users
  • Table headers should be properly labeled.
  • Frames on a Web page should be labeled with meaningful titles
  • a href="../../tech/scripts"Javascript, a href="../../tech/flash">Flash functions should be accessible from a keyboard.
  • Software and online tools should be designed to read out menus and functions to screen reader user.

See Details by Tech to learn more about how to implement specific accommodations for each technology

Hidden Audience for Text Browsers

Some users may be using a text-only browser such as a PDA, cell phone Web viewer, or they may disable image downloading because of slow connections. Users outside the United States may only have access to the Internet via a text-only browser such as Lynx or a cell phone.

Top of Page

Testing and Demos Tools

Screen Reader Simulations

Screen Reader Simulation Plugin

Top of Page

Lists of Jaws Commands

JAWS is one of the most commonly used screen reader programs. It not only reads Web sites, but reads all text within the Windows system (application menus, document text, help screens, and so forth).

Screen Reader Vendors

Top of Page

B. Low Vision

The term "low vision" refers to the audience who have enough sight to use a visual browser but may need to enlarge text or use special high-contrast font and color settings in order to access online information. It is important that a Web page NOT inadvertently disable zooming or the ability to adjust color/font settings.

This Page

  1. Tools Needed
  2. Demo
  3. Accomodations Needed
  4. Hidden Audience
  5. Testing and Demo Tools

Tools Needed

Low vision users need a mechanism to zoom content on a computer screen, sometimes to very large sizes. Zooming works well for vector-based text and PNG. graphics, but causes pixellation for bitmapped images such as GIF and JPEG.

Many users with special visual needs may implement custom stylesheets or plugins to override formatting specified on the page. The adjustments differ from person to person and can include zooming or light text on a dark background.

Demo

Page on High Zoom

This image shows an example of the Wikipedia King Henry IV of France zoomed to a level that a low vision person might need.

Image shows portrait and 3-4 sentences

Example of Reverse Contrast

This image shows an example of the Wikipedia King Henry IV of France for another low vision user CSS with light text on a dark background (designed to reduce glare). Note that links are yellow, not blue.

Portrait of Henry IV with gray background, white text, and links in yellow.

Top of Page

Accommodations Needed

This audience needs a technology which allow adjustments in visual formatting. CSS (Cascading Style Sheets) on HTML is one way to enable this since users can use their own styles. Flash, Word and PDF also enable zooming.

Depending on their visual needs, a user may need

  • Always dark text on a light background (some prefer cream backgrounds over white) OR
  • Always light text on a dark background (like a terminal) OR
  • Always serif fonts OR
  • Always sans-serif fonts OR
  • Always zoomed to large sizes OR
  • Or a unique combination of all of the above

Hidden Audiences for Low Vision Accommodation

  1. Users of mobile Web devices such as an iPhone face the challenges of reduced screen size.
  2. Users, particularly older users, may wish to zoom the text of a particular Web site because of small text size. In addition, some color combinations with bright colors and fonts are harder to read for all users to read.
  3. People who may be photo sensitive (e.g. migraine sufferers) or work in poor lighting conditions may need to adjust their browser views and colors.
  4. People accessing the Web in poorly lit conditions or on monitors with varying display capacities.

Top of Page

Low Vision Design Tips

Zooming Simulations

C. Color Defiency/Color Blindness

This Page

  1. About Color Deficiency
  2. Demo
  3. Accommodation Needed
  4. Hidden Audience
  5. Color Blindness Simulators

About Color Deficiency

Although considered only a minor disability, slightly under 10% of all men suffer some form of color blindness, so this audience is actually very widespread. Color blind users may not be able to distinguish certain color cues, especially red versus green.

Read the Color and Color Blindness section for more detailed explanation of these deficiencies and how to accomodate them.

Demo

The two images show a color coded menu and its appearance for a color deficient user.

Color Coded Menu

Color Coded Menu - re =math, green=science, orange=word games, purple=history

Viewed by Color Deficient User

Red, purple, green are all shades of brown

Accommodation Needed

For this audience, it is important that color coded information be available with another visual cue such as changes in shape, line texture or just a text-based code. For example, in the color coded menu above, even though the red and orange colors are muted, the user can still read the text to know which sections they refer to.

Hidden Audience for Color Blindness

  1. Screen readers also cannot spell out color differences, so alternatives to color changes must also be included for users with severe visual impairment.
  2. People using a black and white printer.

Top of Page

Color Blindness Simulators

  1. Color Vision (Cal Henderson) - Test color schemes with almost all forms of color blindness

  2. Visicheck Color Blindness Tester - Allows you to test images and live Web pages for red-green and blue-yellow. color deficiencies.

About Color Blindness

Top of Page

D. Hearing Impairment

Tools Needed

A hearing impaired person can see all the visual information in a Web site, but will not be able to hear any audio content.

Audio information should be presented in captions or an alternative text transcripts for hearing-impaired users.

Demo

Screenshot of Captioned Video

Even if audio is disabled, you can learn (and spell) the name of the speaker. You can Watch the Video on You Tube. Captions are enabled on lower-right arrow button on the player. Just select the CC option.

Still from video of a speaker saying 'Hi, I'm Cole Camplese'

Hidden Audience for Captions

  1. Some users may not be able to find one of several volume controls to enable audio or audio may be disrupted.
  2. All users may need captions if the original audio quality is poor.
  3. Non-native speakers of English often use captions to help understand content.
  4. Some users may not have access to headphones, and it is very common to mute audio in public computer labs or common work spaces such as the library.

Captioning How-tos

Top of Page

E. Impaired Mobility

Users with limited mobility may need to rely less on on a mouse and more on keyboards, special trackballs and input devices such as speech recognition software. Use of floating menus or small icons can be problematic for these users.

Tools Needed

Mouse alternatives include special trackballs, "sip and puff" systems, joysticks controlled by the teeth, eye tracking devices, speech recognition input or keyboard only systems.

Accommodations Needed

Generally speaking it is easier to input a keystroke rather than a mouse click. Whenever possible a tool should be available through text links, text based wizards or a keyboard shortcut (e.g. in Flash)

If mouse click tools are implemented, make the targets larger (e.g. a whole phrase) rather than smaller (e.g. only an icon or symbol).

Note: You should not necessarily implement these through hidden KEYACCESS tags. This can disrupt the normal operation of assistive devices and screen readers. Keyboard accommodations should be overtly spelled out.

Example

Photoshop lets you enter numbers for image dimensions/resolution and tab between fields to change image size.

Photoshop Image Size Window with fields for width, height, resolution

Top of Page

Hidden Audience for Impaired Mobility Accommodation

Anyone having difficulty using their GUI input device can be considered to have some form of mobility impairment. This includes:

  1. Users on a screen reader may not be able to see an interface well enough to aim a mouse to a tool or button.
  2. Users with carpal tunnel syndrome or some forms of arthritis in which manual dexterity is reduced or limits on mouse usage is imposed.
  3. Anyone who sprains or breaks an arm, elbow, fingers or writs and will need to rely on mouse alternates for the duration of their injury.
  4. Neurological disorders such as Parkinson's, essential tremor or others which cause loss of fine motor control.
  5. Anyone learning to use a new mouse, trackball, joystick or other device (e.g. iPhone touch control).

Mobility Impairment Links

Top of Page

F. Cognitive Impairment

Users with cognitive impairments may have difficulties processing certain types of information. At Penn State, these users would include users with various learning disabilities (the largest set of students registered with the Office of Disability Services).

Accommodations Needed

Experts generally recommend a consistent, simple interface in order to help users with some cognitive impairments more easily process online information. Specific recommendations include:

  1. Place universal navigational schemes in a consistent location on all Web sites.
  2. Make sure a Home link is included on as many pages as possible. Do not rely on a clickable logo alone to act as a home link - many people do not know that convention. Some research also indicates that most users expext the Home link to be in the upper left portion of a screen or menu.
  3. Use shorter chunks of text with plain language. Shorter text also helps many users who skim information on a Web rather than reading it.

  4. Some icons (e.g. arrows, trash can for delete) can be beneficial, but if an icon is too obscure, then a text label may be better. When using graphical buttons make sure these buttons also include text labels for non U.S. visitors and ALT text for screen readers.
  5. Avoid automatic background audio and automatic animation as it can be distracting for some users.
  6. Change CSS styles to add left and right margins and increase line spacing to increase readability.

Hidden Audience

The needs of different user groups is subtle and not always well understood, but consider that:

  1. Many usability recommendations facilitate cognitive processing in general.

  2. In terms of course deisn or instruction, a student or learner generally has a simpler cognitive model than an expert does.

Cognitive Disability Links

Top of Page

G. Other Neurological Impairment

Epilepsy and Flicker

Rapidly flashing or blinking objects are discouraged since they could trigger a seizure. Generally speaking, you should avoid flickers between 2-60 Hz (flashes per second). At 2 Hz images blink similar to the old Netscape BLINK tag. At 59 Hz, they strobe rapidly.

You can see references images posted at the NCAM Flickering Image Demo.

Items with gentle pulses or subtle dimming/lighting effects are effective yet meet this accessibility guideline.

Hidden Audience: Migraine Users

Some users, including those with certain types of epilepsy and migraines, may be susceptible to attacks or "episodes" depending on how "loud" the visual presentation is. In particular:

  1. Rapidly blinking or animated objects can trigger an epileptic seizure in some users and headaches in others.
  2. Migraines can be triggered by stripes, zig-zags and certain other types of geometric patterns.
  3. Some migraine users report getting headaches when color contrasts are too strong.

Top of Page

Assistive Technology At Penn State

Assistive Technology Labs

Seminar Page 3

These are a few locations at University Park where students with disabilities can access specialized computer terminals and other equipment.

Penn State Policy and Accessibility Guidelines

Penn State Policy AD-54 and Section 508

Seminar Page 4

The most current information on Penn State Accessibility policy is available from Access P.S.U.

The Penn State Policy AD-54 "Web Page Design and Image" has been revised to require accessibility accommodations in Penn State Web sites matching this Section 508 guidelines (New Window) mandated for federal government Web sites.

AD-54 Policy and Accessibility

To quote from policy AD-54:

  • Web Markup Standards: Site administrators should integrate W3C and Section 508 standards into site planning and design.
  • Accessibility: The University's policy is to be compliant with Section 508 of the Rehabilitation Act Amendments of 1998.
    • New Web pages and sites should comply, to the extent possible allowed by current technology, with Section 508 of the Rehabilitation Act Amendments of 1998, the Web-based intranet and Internet information and applications (1194.22) http://www.section508.gov/index.cfm?FuseAction=content&ID=12. Current pages and sites should be evaluated and developers should implement a timely program to address major flaws, using current best practices and professional judgment.

References to Section 508 Guidelines will be mentioned when relevant to discussing different HTML tags and tools.

NOTE: The LIFT Dreamweaver plug-in available from the Penn State Computer Store can check a Web site in terms of compliance with Section 508.

WCAG Guidelines and Other Guidelines

Although Penn State has elected to require compliance with Section 508 guidelines for official Penn State Web pages, you should be aware that other guidelines have been developed, some with more or different provisions.

WCAG

The other major guideline cited by usability experts is the Web Content Accessibility Guidelines ( WCAG) which is now being upgraded to WCAG 2 to include options for Web 2.0 applications and upgraded guidelines. The revised version of Section 508 (also pending) may parallel WCAG 2.0 guidelines more.

The guidelines for both WCAG 1 and WCAG 2 are divided into three priority levels, with Level 1 being the most critical guidelines and Level 3 the least critical.

WAI-ARIA

Another standard is WAI-ARIA which is a set of guidelines just for dynamic Web pages and Web applications. The very latest browsers (Firedox 3, Internet Explorer 8, Safari 4) can now recognize WAI-ARIA tags.

Other Guidelines

In addition, many countries are implementing their own national guidelines. If your Web site is housed in or substantially interacting with a particular nation, you may want to check their guidelines in addition to Section 508 guidelines.

Finally, individual colleges, departments or units may require additional accessibility guidelines.

Other Penn State Web Site Requirements

See the Penn State Web Style Guide for details on other Web Page guidelines such as logo placement, specifying contact information and implementing a standard Search function.

Top of Page

Accessibility versus Usability versus "Standards"

Different Standards for Different Purposes

Seminar Page 5

Although accessibility is related to the issues of usability and coding standards, it is possible for a site to be considered usable and standards compliant but NOT accessible (and vice-versa). Below are some definitions and situations where distinctions may arise.

Usability

Usability refers to the ability of average users with the "standard" range of equipment or abilities to navigate and use a Web site. In most cases, accessibility standards will also add usability to a Web site, but accessibility consists of more than just usability.

Web Standards

Web standards refer to initiative from the W3C Consortium and other Internet standards bodies to develop open Web standards which can be used by any software developer. The goals of standards is to ensure cross-platform compatibility and more compact file sizes.

The focus of standards has been to separate "content" from "formatting" by implementing CSS styles. Although CSS can definitely facilitate accessibility, it is possible to design inaccessible styles. Similarly, a non-CSS solution could be as equally accessible as a CSS solution.

A Standards Compliant site does not guarantee an accessible site.

Potential Mismatches

Although many accessibility guidelines are straightforward, some guidelines may conflict with usability or standards. For these cases, extra care must be taken to ensure that all audiences are able to access and use a Web site.

When Usability, Standards and Accessibility Collide
Issue Good Usability/Standards Bad Accessibility Solution
Color Coding Color is a key visual signaling device for humans BUT, about 10% of men are partially color blind and cannot distinguish certain colors (especially red/green) Supplement color coding with text/icon coding
Acronyms & Compounds Style conventions may require acronymns like HTML, PDF, NaCl, Sitemap, etc. to be listed without periods or spelled as one word BUT, screen readers often mispronounce these items. Include the ACRONYM tag to assist in pronunciation
Multimedia Using images, sound and animations can often be more comprehensible than large blocks of text. Some people even recommend icons for users with some cognitive impairments. BUT screen readers cannot interpret multimedia elements without textual assistance Always implement ALT text, extended text descriptions and captioning or transcripts
Repetitive Navigation Having navigation repeated on top and bottom is good for consistency and for some motion disorders. BUT it is tedious for users of screen readers to hear the navigation on every page. Implement "Skip Navigation" strategy
Multiple Columns Multiple columns are one way to reduce text width to narrower widths conducive for legibility and include more material in one screen BUT multiple columns are difficult for some screen readers to interpret. You can use style sheets to reduce a column width within a single-column layout.

Use appropriate table tags for data tables and make sure layout tables make sense when read left to right, top to bottom.
Unicode for Foreign Languages Unicode makes data exchange between operating systems and foreign languages easier. BUT some screen readers cannot recognize Unicode input. Consult with users for best solutions. Symbol or Audio files may be needed for some items.
PDF Files PDF may be the only way to present information in complicated layouts or with unusual symbols online for all browsers. Screen readers may not be able to interpret all the information PDF files need to be made accessible just as Web pages are.

Top of Page

Myths of Web Accessibility

Some Accessibility Gotchas

Seminar Page 6

There has been a lot of discussion of accessibility over the years and some implementation myths have sprung up.

1. There's only a small audience for accessibility

Myth - Accessibility compliance only benefits users registered with the Office of Disability Services.

Reality - At some point almost all of us will be in a situation where 1) the image link is broken, 2) the colors are not distinguishable, 3) the text is too small 4) the audio is not working, 5) we cannot see the whole screen or 6) we cannot move the mouse properly.

2. Accessibility = Captioning

Myth - If we caption all our video and audio recordings, we are accessible.

Reality - Accessibility also includes accomodations for users who are visually impaired, mobility impaired, and many other users with slighter impairments or lower-quality technology options.

Note - In the past accessibility was equated to just implementing image ALT tags. The rise of podcasting and video brought awareness of captioning needs to the surface.

3. If it's Audio, then a Screen Reader can access it

Myth - If content is delivered by audio, then by default a visually impaired user can access it.

Reality - The navigation to the audio (including the login) may not be accessible.

4. CSS Styling will Guarantee Accessibility

Myth - If I use CSS stylesheets, I will guarantee that my site will be accessible.

Reality - Although CSS stylesheets can improve accessibility, you can also create additional accessibility issues if you use the markup incorrectly. Similarly you can create sites which are standards compliant but still inaccessible. Section 508 does not require CSS, but Section 508 does require sites to be usable without CSS stylesheets.

The same statement applies to other standards such as XHTML, XML, MathML, Unicode and other standards. These standards facilitate data exchange and are easier for accessibility tools to work with, but do not guarantee accessibility.

5. Text Only is a good accessibility option

Myth - Creating a parallel text-only site while maintaining an inaccessible site as is the best solution for accessibility.

Reality - Most users prefer that accessibility options be incorporated into a single Web site, saving text only transcripts for multimedia and plug-ins as needed. The reasons include.

  1. Many people with disabilities feel that text-only sites are exclusionary. A single site with appropriate accessibility is perceived as more inclusive to the entire Internet community.
  2. It's much more difficult to maintain a second site. Once it's out of date, you are out of compliance because equivalent information is not available to everyone.
  3. Modern screen readers can actually process accessible HTML better than a text-only site.
  4. Text-only sites may address some accessibility issues specific to screen readers, but not all accessibility issues.
  5. Accessibility goes beyond "text only," so the original site must be reviewed in any case.

Note - Using CSS style sheets to present alternate views of content may be a valuable toolin some situations.

6. Accessibility Requires EM and STRONG

Myth - You must replace the B (bold face) and I (italics) tags with STRONG and EM tags to be compliant.

Reality - The STRONG and EM tags are functionally different from B and I in that screen readers change reading styles to highlight important information. However many uses of bold face and italics are for visual formatting only and may be irrelevant to screen readers. Use of STRONG and EM is not required by Section 508.

7. Accessibility Means No More Tables, JavaScript, Flash, Image Maps or Frames

Myth - All HTML tables, JavaScript, image maps, multimedia and frames must be removed to be compliant.

Reality - None of this is required by Section 508. What is required is that that these tools be implemented with sufficient information for a screen reader to use. In most cases, this only requires the addition of specific attributes. Even JavaScript programmers have developed techniques to create accessible code, especially in terms of ARIA.

8. Accessible Design is Plain

Myth - An accessible Web site is a plain Web site.

Reality - More complex designs can be accomplished and still be accessible. They key is to incorporate elements which do not interfere with readability, motion impairment or screen reader access. See the Web sites for Access P.S.U. and the Office of Disability Services for examples. Not to mention WebAim, Jim Thatcher Accessibility Tutorials, Accessify Com and many others.

9. Minimum 508 Compliance is Perfect

Myth - If you meet the minimum for Section 508 compliance, you will never have to worry about accessibility issues again.

Reality - Not all accessibility issues are covered in Section 508 regulations. Further, advances in Internet options will inevitably create additional accessibility issues. This page and this site will no doubt need to be redesigned in the coming years, although hopefully not too drastically.

10. Waiting for problems is just as easy as doing it now

Myth - You don't need to worry about implementing accessibility until a user requests accommodation.

Reality - If "an ounce of prevention is worth a pound of cure," then one minute of implementing an extra tag or adding more descriptions is worth one hour of finding each problem and figuring out how to fix it. Retrofitting a site for accessibility is far more time consuming than implementing it from scratch.

Conclusion: Accessibility for Everyone

Seminar Page 8

Here are some tips for effectively understanding and implementing accessibility strategies.

1. Experience a Screen Reader, a Film with no Audio and so forth

There is no wake up call like viewing a Web page you have developed on a screen reader to understand the issues that visually impaired users might face. This is also true for using the Internet with a grayscale monitor, a small screen, no audio, slow bandwidth connection or other less than ideal conditions.

2. Use a Multi-Pronged Testing Strategy

A testing strategy should include a standards verification report, checking to see how the site appears with images and CSS disabled, a color contrast check and an audit of content with

In addition any plugins, applications and web apps should be checked to ensure that they work with a screen reader (including login and navigation). Even if the plugin itself cannot be used, it may be possible to present the content or function within an alternate tool/format.

3. Remember the Context

There are very few accessibility requirements which can be blindly applied without considering the context of the Web page. For a screen reader audience in particular, a balance between too little information and too much redundancy should be maintained.

4. Make Sure Accessibility Tags or Tools are Supported

Some of the newer accessibility tags and standards have been proposed, but do not have full support yet in screen readers or broswers. Before spending great time and effort implementing new tags, make sure that modern browsers and screen readers such as Jaws have implemented them recently. Otherwise, it may be more efficient to use some other accessibility strategy.

For instance screen readers may not support all the tags for complex tables. In that case, a series of simple tables may be more accessible to more users.

5. Be Patient with Developers

Some tags and recommendations are time consuming to implement, especially if a Web site needs to be retro-fitted for accessibility. However, having developers experience screen readers may give them a different perspective.

6. Be Patient with Accessibility Experts

Accessibility is, unfortunately, a complex issue which does not always lend itself to simple answers. You may hear conflicting advice on how to best implement accessibility. Understanding the audience issues and your goals will hopefully provide you with sensible alternatives.

7. Be Patient with Users

Evan after implementing all the recommended tags and strategies, some users may still encounter problems you were not aware of, either because of unique conditions or outdated browsers or equipment. These users still need accommodation.

8. Keep up with Accessibility Developments

Screen readers and browsers are continuously evolving. Old problems may be solved and new ones created. Evolving technologies will create new accessibility issues.

BUT, if you incorporate accessibility now, you will be better prepared for new developments in the future and less likely to need to make major changes.

End of Seminar

Details by Tech & Tags (HTML)

Accessibility options for different HTML tags and Web-based technologies. See options in the alphabetical list below.

Abbreviations

In general screen readers do not recognize abbreviations and acronyms and generally read them as if they were typical English words. For instance the phrase "ITS at PSU" would not be read by screen readers as the intended "I.T.S. at P.S.U.", but as "It's at Sue". Here are some workarounds to help deal with this issue.

Synopsis

  1. Using periods between letters (e.g. P.S.U. versus PSU) in an acronym may help screen readers parse the acronym.

  2. When writing ALT tags with acronyms, add spaces between characters (e.g. <alt="P S U" >).

  3. For unusual abbreviations and acronyms, you can supply a key for what they mean.

  4. You can include an ACRONYM tag for abbreviations, which also causes a tooltip to appear in modern browsers.
    Note: You only need to use the acronym tag on the first instance of a repeated abbreviation or acronym.

Examples ACRONYM tag

Rollover text after "Test" to see a tooltip.

<acronym title="Pennsylvania">PA</acronymn>
Test: PA

<acronym title="H T M L">HTML</acronym>
Test: HTML

<acronym title="sodium chloride">NaCl</acronym>
Test: NaCl

What Screen Readers Say

  • Without the acronymn tags, the screen reader would say "Pah, Hitmill, nackle"
  • With these tags, the screen reader would say "Pennsylvania, H T M L, sodium chloride."

Links

Top of Page

ANGEL Course Management System

Because the ANGEL Course Management System is a Web tool you may not have all the ability to manipulate accessibility features that you would in a stand alone Web site. However, there are some steps you can take to make your ANGEL content more accessible.

Note: This version is current as of ANGEL 7.3. See the ANGEL Help Page "Ensure ANGEL Course Content is Accessible" for the most up-to-date information.

This Page

  1. Display Options
  2. HTML Editor
  3. Uploaded Files
  4. Quizzes

Display Options

  1. Users who use a screen reader or those with severe low vision may want to switch their display option to Accessible View, PDA or 508 mode. Any of these put ANGEL into a frames-free text-only mode and enlarges the text. See the ANGEL Help Page "Ensure ANGEL Course Content is Accessible" for more details.

  2. Color blind or users who need large font sizes may wish to view all their pages in an accessible theme. To change a theme, Login, go to Settings in the My Profile menu on the left then click on Personal Theme Selector. Some themes which have been developed for accessibility purposes include:

    1. Large Text - Default text size is set higher.
    2. Black and White - Uses black text with a white background for highest contrast.
    3. High Contrast - Black - Reverses colors so that background is dark and the text is light. Needed for some low vision users.

    NOTE: Users can check "Always use this theme" to override custom themes from a course.

  3. If students find the text too small in ANGEL even with zooming, you can suggest switching from older browsers such as Internet Explorer 6 to other browsers such as Firefox or Internet Explorer 7. These browsers tend to allow more text to be zoomed.

  4. If you use complex image maps, multimedia or scripts, you may want to develop them on an external Web site and link to them from within ANGEL.

ANGEL HTML Editor

The ANGEL HTML editor can be used to add formatting to HTML pages. Some tools that will assist users with different accessibility issues are:

  1. Page titles should be formatted with the Heading 1 <H1> option in the Select Format menu. This helps users with screen readers quickly identify the page title.

  2. Main section headings should be formatted with the Heading 2 <H2> option in the Select Format menu. This helps users with screen readers quickly scan and name major sections of the page. Use the Heading 3 <H3> option for subsection headings.

  3. When inserting images, remember to fill in the Alternate Text field in the upload screen. This is the text that will be read aloud by a screen reader. See the HTML Editor: Insert an Image help topic for more details.

  4. Make sure color schemes have enough contrasts between light and dark. See the Web site Color Page for more details on color schemes.

  5. If you copy formatted text from Microsoft Word, use the Paste from Word tool to clean the Word HTML code, then reformat the page.

  6. You can switch to View Source if you wish to hand-edit HTML code for accessibility.

Uploaded Files

All files uploaded into ANGEL should be made accessible. Accessibility accommodations include:

  1. Images and charts embedded within Word, PowerPoint, or other document files should include a caption for each image which adequately describes the content to a user with a screen reader. Excel charts should be legible in gray scale as well as color.

  2. Audio files (including podcasts) should include text transcripts for hearing impaired students.

  3. Video files should either be captioned or text transcripts should be provided.

  4. Uploaded Word files, PowerPoint files (especially with images) or PDF files should have accessibility incorporated into them.

Quizzes

  1. When writing multiple choice questions in ANGEL, select the format of "Multiple Choice" (choices listed with radio buttons option) instead of the "Matching Option" (drop-down menu). Drop down menus present more accessibility issues for users with mobility impairment, screen readers or certain cognitive disabilities.

    Multiple Choice versus Matching in ANGEL

    Matching Format - Answers in Dropdown

    screen capture-dropdown

    Multiple Choice Format - Answers listed with radio button

    screen capture-radio buttons

    Both examples ask how Spanish /ñ/ differs from English /n/ in articulation and provide a list of anatomical terms. The answer is that the tongue body makes contact with the alveolar ridge for English /n/, but with the palate for Spanish /ñ/.

     

  2. Add text description for all uploaded images. For instance, if you upload an image for a quiz, include a brief description within the text for the quiz question. For example

    Sample ANGEL Quiz Question
    with description of image

    Q: Identify the saturated fat below. The fat chain has 18 carbon atoms in it.

    saturated fat molecule

         

    NOTE: This description is also useful for students who cannot see an image attachment or image file online for technical reasons.

  3. Students with learning or physical disabilities may not be able to complete timed quizzes within the given time frame. If these students are registered with the Penn State Office of Disability Services, they are permitted to request accommodation for timed quizzes and assignments.

Top of Page

Animation

Synopsis

  1. Animations needed to present content should also include a non-animated, text- based alternative accessible to screen readers. Text with still images could also be beneficial for users who have cognitive difficulties processing animations.

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

  2. Avoid automatic or looped animations, blinking and scrolling. These are distracting and, if incorrectly implemented, could trigger an epileptic seizure or headaches for some users.

    SECTION 508 - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hertz (cycles per second) and lower than 55 Hertz.

    See the N.C.A.M. Flicker Rate demo to see what different flicker rates look like. Standard Blinking text is somewhere between 1-2 Hz, so is right on the edge of the bad flicker zone.

  3. Animations with sound should have synchronized captions or a text transcript.

    SECTION 508

    (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

    (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

    NOTE: Transcripts are also beneficial for users who may not be able to access audio on their computers. This is a very frequent situation.

    Top of Page

Audio or Video Files

This Page

  1. Synopsis
  2. Accessible Audio/Video Example
  3. Captioning Tips and Tools

Synopsis

  1. If you use audio files, a text transcript should be provided. See Section 508 regulations below for details.

  2. It may be better to use an A tag than an EMBED tag to link to a file. Not all browsers can detect an implement an EMBED tag.

  3. If video files are used, a synchronized text transcript or captions should be provided unless it is not technically feasible. In that case, a text transcript with description of video events can be substituted.

SECTION 508

(a) A text equivalent for every non-text element shall be provided.

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

NOTE: Transcripts are also beneficial for users who may not be able to access audio on their computers. This is a very frequent situation.

Accessible Audio/Video Example

Accessible Video File with Text Transcript

The following interview with Director of Education Technology Services, Cole Camplese is captioned. You can access captions by clicking the arrow button on the lower right of the screen

Still from video of a speaker saying 'Hi, I'm Cole Camplese'

 

Another Good Example - FMC iMovie Tutorial
This is accessible because text is reproduced under each video clip.

Captioning Tips and Tools

  1. Popular media editors such as Quicktime Pro, Flash Video (including YouTube), Real Player and Windows Media include captioning options. In many cases captions are stored in an external text file which can be easily edited.
    Note: It is recommended that you do a Google search to determine the latest options.

  2. If you have a script for an audio or video production, this can be the basis for a text transcript. Otherwise you may need to manually transcribe the text.

  3. Speech recognition software such as Dragon Naturally Speaking, can automate some transcription, but should be reviewed for errors, especially on unusual words or low-quality audio.

  4. Avoid automatically playing an audio or video file on a Web page. It can be potentially distracting for different users and could interfere with users who rely on speech recognition software to navigate the Web.

  5. Visually impaired users may need additional information about images in a video.

Captioning How-tos

Captioning Software

Top of Page

Auto Datestamps without Javascript

This Page

  1. If you use Java Script
  2. Dreamweaver Insert Date
  3. Front Page Timestamp Bot
  4. Server Side Incude

If you use JavaScript

Although JavaScript can be used to create accessible content, the code must be constructed with care. See the Scripts page for more information

If you wish to include an automatic date generator without JavaScript, the following options are available. All these options add special tags as HTML comments which allows the date to be updated by the Web editor, content management system or by the server.

Dreamweaver Insert Date

Dreamweaver allows you to insert a date in a format which updates itself everytime you save the file in Dreamweaver.

To Insert the Date

  1. Go the the Insert menu and select Date (or choose the calendar icon in the Common tab of the toolbar).
  2. In the pop-up window, select the desired format and check the option for "Update automatically on save."
  3. Save the document and the current date will be displayed. See the example below.

Dreamweaver Auto Date (in military style time)

This file was last saved on - August 8, 2005 15:30

View the Code (Date is not updated)

<!-- #BeginDate format:Am1m -- >February 25, 2004 16:40 <!-- #EndDate -- >

 

Front Page Timestamp Bot

This is similar to Dreamweaver, except that the code inserted is called a Front Page Webbot.
Note: It may be possible to implement this code in Microsoft Web Expression. Check documentation or tutorials for details.

To Insert the Date

  1. Go the the Insert menu and select Date and Time.
  2. In the pop-up window, select the desired format and check the option for "Date this page was last edited."
  3. Save the document and the current date will be displayed. See the example below.

Web Bot (in military style time)

This file was last saved on - 02/25/2004 04:23:45 PM -0500

View the Code (Date is not updated)

<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%m/%d/%Y %I:%M:%S %p %Z" startspan -- >
02/25/2004 04:23:45 PM -0500
< !--webbot bot="Timestamp" endspan i-checksum="38424" -- > </p >

 

Server Side Include (S.S.I.)

You can include a snippet of code which instructs the server to change the date everytime you upload the file. To do that:

  1. Write <!--#echo var="LAST_MODIFIED"-- > wherever you want a date to appear.

  2. Save your file with the .shtml extension to indicate that a server needs to parse a server side include.
    NOTE: Some servers support this extension even if the file type is .html. Test your page or check with your administrator for details. See also the Penn State I.T.S. Knowledge Base for setting up SSI support within .html files in your own directory.

Top of Page

Blogs

The Blogs at Penn State system includes some accessibility features, but instructors can take the following precautions.

Viewing Blog Entries

  1. Blogs with just text are normally accessible. Issues that a student or user may encounter may be reported to blogs@psu.edu.

  2. If you upload an image into the blog, make sure you give it a descriptive Name in the blog image upload window. This will become the ALT tag used by screenreaders and the text that is seen when an image fails to load.

  3. Other files that are uploaded to the Blogs such as PDFs, podcast files or Powerpoints should be made as accessible as possible if they are used in a course.

Students who write blogs entries

Depending on their situation, some users may not be able to fully interact with the system to create and write blog entries. If your course requires posting entries to a blog and a student reports a problem, consider alternate outlets such as the student forwarding an e-mail message/Word file or allowing a tech-saavy student to use another Web technology.

Accessibility problems that a student may encounter writing blog entries can be reported to blogs@psu.edu.

Working with HTML Source and CSS Templates

Although the output of the Blogs at Penn State is generally accessible, there are always improvements which can be made. If you are comfortable with using the HTML source view and CSS consider these options.

  1. Paragraph breaks are coded as <br /><br /> in the WYSIWYG editor and should be replaced with true P tags in the source view so that screen reader users can jump between paragraphs.
  2. Section headers within a long blog entry or page should be tagged as H3; note that entry titles are tagged as H2. This enhances ability of screen reader to jump though sections of a page. The easiest way is to do this in the HTML source view.
  3. You can modify the default theme style sheet to make H3 more distinct by default. See http://blogger.psu.edu/node/368 for details.

See support documentation at the Blogs at Penn State for information on how to access stylesheets or templates.

Bold and Italic Formatting

Bold Instead of Italics

Italics in print is been used for a number of reasons including listing book and movie titles, foreign words, mathematical variable names and emphasis, but since italic text is often not as clear on the Web, many editors use bold face or a combination of bold and italics where italics would have been used in print. See examples below.

Print Formatting

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

Web Formatting 1 (Bold)

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

Web Formatting 2 (Bold and Italics)

The book Le Petit Prince is considered to be poétique et philosophique in French literary culture (See French Wikipedia: Le Petit Prince).

 

B vs STRONG

Many accessibility experts recommend using STRONG instead of B for bold face text and EM instead of I for italic text. The reasons for this recommendation are

  1. Screen readers are more likely to recognize STRONG, EM and pronounce them in a different voice or volume.

  2. STRONG, EM are semantic tags meaning that they indicate that the author wishes to provide emphasis which is rendered as bold/italic on a visual browser or in different speaking styles on a screen reader.

It should be noted though that many authors specify bold or italics purely for visual reasons. In these cases, B or I may be better because having a screen reader switch voices without adding true emphasis may be distracting.

XHTML NOTE Both the B and I tags are included in the XHTML standard, and it is not currently a part of Section 508 policy that all B and I tags be replaced with STRONG and EM tags.

Some possible semantic uses of bold & italics.

These items should definitely be tagged as STRONG and EM.

  1. To provide a warning label.
  2. To highlight key concepts or key vocabulary items in a course.
    But using bold face to highlight every instance of emphatic intonation could be just a bit distracting within a long text but could be useful in visual browsers.

Some possible visual uses of bold & italics

  1. To make colored text or small text more distinct and legible.
  2. Academic conventions including
    • Book and movie titles (e.g. Gone with the Wind)
    • Foreign words in an English text (e.g. The Spanish word for cat is el gato.)
    • Variable names in math, science and computing texts (e.g. x = 2)
  3. To make menu items, titles or navigation more distinct.
  4. Bold face can help users on a visual browser scan for key concepts which may be delimited in another way (e.g. special punctuation) within the text.
  5. You include bold and italics for a design purpose, but not really to provide extra information.

Using CSS

When bold face or italics is primarily visual and tied to a specific presentational use, it is often better to include a specification for bold face or italics. For instance if you want a CAPTION tag within a TABLE to always be bold or bold and italics, you can use a CSS declaration such as

Examples of using CSS for bold and italics

caption {font-weight:bold}
caption {font-style: italic; font-weight:bold;}

However, there may still be times when using a B or I tag to indicate visual formatting is the most efficient solution. From a standards point of view, a stylesheet solution such as <span class="bold">Bold Text</span> is just as semantically vacuous as <b>Bold Text</b> and consumes many more ASCII characters in the HTML file.

Still More Tags

There are some tags which are not commonly known which are designed to represent different semantic concepts which are normally indicated by italics or other formatting changes. These tags are supported by all browsers and can be restyled with CSS.

CITE Tag (Italics by Default)

The CITE tag is semantically designated for short citations such as book titles. The default formatting is italics, but CSS can be used to make this tag both visually bold and italics.

VAR Tag (Italics by Default)

The VAR tag is semantically designated to represent variables in computer code or mathematical equations.

DEL Tag (Strikethrough by Default)

The DEL tag is semantically designated to indicate text which should be removed and should be used as a substitute for the STRIKE tag.

The INS tag is used to indicate recently inserted text or text that replaces deleted text. The formatting is underline by default, but you can use CSS to change it to some other format (perhaps a new color or with a color background).

CODE and KBD Tags (Monospace Font by Default)

The CODE tag is semantically designated to spell out code such as HTML tags (e.g. <br /> to use or CSS specifications (e.g. {font-weight:bold}).

Top of Page

C.S.S. (Styles)

This page includes information about C.S.S. (Cascading Style Sheets) for accessibility. See the list of C.S.S. style sheet tutorials if you are interested in learning more about style sheets. This site also includes a page on C.S.S. Rollovers.

This Page

  1. Synopsis
  2. Some Benefits of Style sheets
  3. When Styling is Inaccessible
  4. Links to CSS Tutorials

Synopsis

  1. The use of style sheets to provide formatting has several accessibility advantages including the following:

    1. You can use CSS to improve legibility by increasing line spacing, increasing left/right margins and by specifying fonts designed for a monitor.
    2. You can replace less accessible image links and Javascript rollovers with text links combined with CSS styles. Text links are more accessible because they do not "pixellate" when text is zoomed, but retain crisp edges.
    3. Users with color blindness or low visibility conditions can implement a custom style sheet to set formatting to one that suits their needs better.
    4. In some cases the use of Style sheets to specify background colors and borders can improve the accessibility of layouts and decrease reliance on HTML tables for layouts.
    5. It is easier to re-design content for alternate media such as printing and mobile technology (e.g. iPhone, Palm pilots and cell phones) via alternate Style sheets

    See some code examples below.

  2. However, care must be taken that Web sites are still readable on visual browsers with style sheets turned off. See a later section for details on what to avoid.

    SECTION 508 - Documents shall be organized so they are readable without requiring an associated style sheet.

    NOTE: The iCita Firefox Accessibility Toolbar will allow you to display your Web page without your CSS markup.

  3. Do not use "visibility: hidden" to hide text from visual browsers; it also hides it from screen readers. Use color (e.g. white on white) or negative margin positioning to 1px to hide text from visual browsers. See Accessible Methods for Hiding Text for details.

  4. Remember that any tag can be styled. This includes accessibility tags such as TH, CAPTION, STRONG, FIELDSET, LABEL, and even B, I and OPTION or SELECT.

  5. Avoid using float:right, since it typically requires coders to place elements which will be displayed on the right BEFORE elements placed on the left. Screen readers will read files in code order, not in layout order. A layout table may sometimes be more accessible than complicated CSS layouts.

  6. If you use absolute positioning, be sure that the positioned text is in logical order so that text will be coherent with CSS disabled.

  7. It is also important to preview styled sheets in several browsers. Implementation is still not standard across all browsers. Some text formatting may not occur in a particular browser, and in the worst case scenario, there may be overlapping text blocks.

  8. Style sheet commands should be stored in another .css text file, not embedded in the HTML document itself. This allows users to completely override your style sheet

  9. C.S.S. commands for fixing absolute font sizes should be avoided. Use relative font size scales instead.

  10. Care should be taken that color schemes and backgrounds are accessible.

Top of Page

Some Benefits of Style sheets

Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

Here are some examples of how Style sheets can improve accessibility and reduce code maintenance.

Line Spacing and Margins

The generic specifications for margin and line spacing are not optimized for screen legibility. Compare the following two paragraphs - one style for legibility and one with no styling.

With CSS

Increased side margins, Verdana specified and line spacing increased slightly.

SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

View the Code

body: {margin-left: 25px; margin-right: 25px;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-spacing: 120%}

Without CSS

Text goes to edge of screen, is single spaced and in Times New Roman (bad for monitors).

SAMPLE PARAGRAPH: Style sheets are designed to allow you to globally specify colors, fonts and backgrounds for an entire Web site. For instance, if you specify that all H1 tags should be centered, then you do not need to repeat the ALIGN="center" tag on every page.

Coloring and aligning H Tags

Sample H1 - Centered and colored blue

With C.S.S.

h1 {color: #000066; text-align: center;}

...

<h1 > Sample H1 </h1>

Without C.S.S.

<h1 align="center"> <font color="#336699> Sample H1 </font> </h1>

 

Creating Formatting Div's Resembling Tables

This is a centered pink div with dotted black border. Actually it's a P with a style specification.

With CSS

.pinkdiv {border: 1px dotted black;
background-color: #FFAADD;
padding: 7px;
margin-left: 150px; margin-right: 150px;}

...

<p class="pinkdiv" > I want a centered pink div area </p >

Without CSS

1. Displaying colored or dotted borders extremely difficult and would probably require nested tables.

2. For a pink table with a plain border:

<table align="center" width="60%" cellpadding="7" border = "1">
<tr>
<td bgcolor="FFAADD"> I want a pink table </td>
</tr>
</table>

NOTE: Data tables are still be the best option for presenting tabular data.

Top of Page

When Styling is Inaccessible

Styling can become inaccessible when style sheet commands are mixed with older HTML formatting tags. When Style sheets are turned on, the result may be readable. But with Style sheets turned off, only the older HTML formatting is read and the page may become unreadable. For example:

Positioning and Float: Right

Some sites use different "floats" to position content without tables. However, some style attributes, such as float: right cause text to place in an order different from that of the HTML file. For instance the following site uses float: right to position the gray box to the right of a list of links.

Page with Float:Right Positioning

Sample Page with gray box to right

But in the code, the list in the gray box actually comes first. When CSS is disabled, you can see that list above the links. Fortuniately, the text can be read in either order.

With CSS Removed. "Right" is on Top

Same page with no CSS and right text on top

Mixing Styles with Old Formatting Tags

This Web site has a black linen background with a pale rose area in the center with dark text. The color contrast is acceptable.

Stitching site with blackbaground and pink text area

The designer used CSS for the pink area and an HTML tag to specify the black linen background as <body background="blacklinen.gif">.

website with CSS on

 

Styling Turned Off - Inaccessible

Becaiuse only the rose text was formatted with CSS, when the style sheet was turned off, the result was black text and blue links on a black textured background - clearly unreadable in a visual browser.

no css, black on black

 

Styling Turned Off - Accessible

Once the site was redesigned so that the background image was included in the CSS file and not in the HTML, the site without CSS was readable, although it appears with standard white background with black text.

without css, black on white

Notice that the use of H tags to provide content structure means that sections are easier to distinguish even with Style sheets turned off.

 

Top of Page

Links to C.S.S.Tutorials

Basics

Additional Tutorials

C.S.S. Rollovers

This Page

  1. Synopsis
  2. CSS Rollovers: Font Color Change
  3. CSS Rollovers: Changing Background Color
  4. CSS Rollovers: Classes for Navigational Links
  5. CSS Button Style Links: Simple
  6. CSS Button Links with Borders
  7. CSS Image Rollovers
  8. Javascript Rollovers

Synopsis

  1. If you use rollovers to change text format, consider using CSS rollovers. They generally do not interfere with screen readers, are better for low vision users because they edges remain crisp when the page is zoomed and are usually easier to maintain on the fly. See below for examples of different types of CSS Rollovers.

  2. Rollover links should be distinct from other text even in the "Off" state. Otherwise many users, especially those with older browsers may not realize they are there.

  3. If you use an image rollover with Javascript, then make sure the ALT tag in the "Off" image is descriptive. For rollovers showing complex concepts, make sure a text description is included. See example below.

Top of Page

CSS Rollovers: Font Color Change

There are several specifications you can use to create a different type of rollover effects including changes in font color and style, changes in color background and additions of borders to create "buttons". This page will start with examples of font format changes.

Note: These techniques will work in Firefox, Mozilla, Internet Explorer, Safari or Opera, but not in earlier browsers such as Netscape 4.7. It is important to make sure that links are distinctive even in the "off" state.

For global specifications, you would need to create a . css file and write specifications for these classes:

a (all links)
a: hover (links with the mouse cursor over it)
a: visited (visited links)

Here is some code for making all links navy blue (#000066) which change to bright green (#006633) when the mouse passes over it. I've also specified "font-weight: bold" in order to make the links more visible.

Links which turn Green

C.S.S. File Specification

a {color: #000066; font-weight: bold} /*Navy Blue*/
a:hover {color: #006633; font-weight: bold} /*Green*/
a:visited {color: #9900FF; font-weight: bold} /* Purple */

HTML Code

<a href="#">Green Link </a>

Sample Link (No Effect in Netscape 4.7)

Green Link

 

The key to the rollover is in the specification in the a:hover class. Because it has been specified as a different color than the a (anchor) class, all links for a document linked to that style sheet will change to green when the mouse rolls over it. The style is coded once, but all links become rollovers automatically.

C.S.S. Rollovers: Changing the Background Color

With style sheets, you can also add specifications to change the background color of a link. In this case, this is done by doing nothing to a, but making the a:hover tag change it's color to white and it's background-color to gray (#333333). A left-padding and a right-padding of 3 pixels have been added to make the item more "button" like.

Links which change background colors

CSS File Specification

a {padding-left: 3px, padding-right: 3px}
/* You need to specify padding in order to keep the text in the same position as in a:hover */

a:hover {color: #white; background-color: #333333
             padding-left: 3px, padding-right: 3px }

HTML Code

<a href="#">Background Changing Link </a>

Sample Link (No Effect in Netscape 4.7)

Background Changing Links

Top of Page

C.S.S. Rollovers: Classes for Special Navigational Links

One advantage of stylesheets is that you can create specify different behaviors of the same tag depending on the context. For instance, many sites visually distinguish between two types of links - those embedded in the text and those used for general navigation (e.g. "Home" and "Sitemap"). Links embedded in the text are typically underlined, while those used for navigation may be made to look more "button" like with different background colors and no underlining.

In this first example, I will create a class of navigation links which are bigger, green (#006633) and not underlined. When a mouse rolls over them, an underline will appear and the color will change to black. Links like these might be placed within a colored table layout cell, toolbar or div.

The first step is to create a class of links called "mainnav". This is done by declaring "a.mainnav," then specifying the style classes as before. In this case I need to add a statement "text-decoration:none" in order to block the default underline of most links. To get the underline to appear at a mouseover, a parralel "a:hover.mainnav" class is declared and is specified as "text-decoration: underline." Finally, in order to block any color changes for visited links, a statement a:visited.mainnav is added and given the same values as a.button.

Within the HTML file, all links which are meant to be button like are specified as <a class="mainnav" href="" >. See the example below.

Green Plain Text Button Style Link

C.S.S. File Specification

/* .mainnav means the "mainnav" class*/

a.mainnav {font-weight:bold; font-size: 125%; color: #006633
             text-decoration: none }

a:visited.mainnav {font-weight:bold; font-size: 125%; color: #006633
             text-decoration: none }


/* You need to specify identical formats for a.button and a:visited.button in order to keep appearance the same*/

a:hover.mainnav {color: black; text-decoration:underline}

HTML Code

<a href="#" class="mainnav" >Main Navigation Link </a >

Sample Link

Main Navigation Link

Top of Page

C.S.S. Button Style Links: Simple

The trickiest type of link to encode are links which look like buttons. The simplest way to do it is to create a class of link which has one background color for the a and a:visited statements and another for a:hover. Here a class called "button1" has been created which starts out with black, non-underlined text with a pink background (#FFCCFF) and changes to white text on a purple background. As with the second case, a left and right padding of three pixels have been added. See the example below.

Simple Gray Button

C.S.S. File Specification

/* .button1 means the "button1" class*/

a.button1 {font-weight:bold; font-size: 125%; color: black;
             background-color: #FFCCFF; text-decoration: none;
             padding-left: 3px; padding-right: 3px}

a:visited.button1 {font-weight:bold; font-size: 125%; color: black;
             background-color: #FFCCFF; text-decoration: none;
             padding-left: 3px; padding-right: 3px}

/* You need to specify identical formats for a.button and a:visited.button in order to keep appearance the same */

a:hover.button1 { color: white;
             background-color: purple; text-decoration: none;
             padding-left: 3px; padding-right: 3px}

HTML Code

<a href="#" class="button1" >Simple Button Style Link </a >

Sample Link

Simple Button Style Link

Top of Page

C.S.S. Button Links with Borders

Changing the background color is still somewhat limited though. Ideally, one would also want to specify borders, and add additional padding at the top and bottom of a link.

Defining the Styles

For this example, I will create a class of links which have a gray background (#CCCCCC), a padding of five pixels and a black, three pixel solid border. When the mouse rolls over it, the link will become black with white text and a white border.

In order to access controls for borders and padding, you must specify that a specific class of links will be treated as a "block", like a P or H1, instead of as a "span". This is done by specifying a region such as a P, here called "navgation" within which a, a:visited and a:hover will behave as "blocks". To declare this, a statment p.navigation a is added and given its features. The browser will interpret these as meaning that any A tag found within a <p class="navigation" > statement will behave as a block. The p.navigation class itself contains specifications for font size, center alignment and a width of 50% of the page. These standardize the appearance of the "button" across the three type of a classes.

The statement for p.navigation a specifies no underlining, bold face and background-color as before. The property display:block will access the additional properties such as padding: 5px and border: 1px solid black. Similar statements for p.navigation a:visited and p.navigation a:hover are needed to complete the effect. See the example below.

Complex Rollover Button

C.S.S. File Specification

p.navigation {font-size: 125%; font-weight: bold; text-align: center;
                 width: 50% }
/*p.navigation is the holder unit for the block links. It also specifies larger bold text*/

p.navigation a {display:block; color: black;
             background-color: #CCCCCC; text-decoration: none;
             padding: 5px; border: 3px solid black}

p.navigation a:visited {display:block; color: black;
             background-color: #CCCCCC; text-decoration: none;
             padding: 5px; border: 3px solid black}

p.navigation a:hover {display:block; color: white;
             background-color: black; text-decoration: none;
             padding: 5px; border: 3px solid white}

HTML Code

<p class="navigation"> <a href="#">Complex Button Link </a> </p>

Sample Link

Complex Button Link

Top of Page

Image Rollovers

Since CSS can also be used to specify background images, almost all the visual effects found in a JavaScript rollover are available through CSS.

First, you will need to know the pixel dimension of your image. Note that if two images are used, the total dimensions should be the same, even if you add visual padding in one image.

Note: If the rollover is being used to compare two images, then a text description must be included in either hidden or visible text.

Defining the Styles

In this case, the links are embedded in a p.surprise class which is set to the height and the width of the image(s) - which is 250 pixels wide and 50 pixels high. As with the previous example, the A tags must be treated as a block so that the background can be formatted with CSS. Images are specified in the background-image: url() specification.

In this case, only the a:hover is specified with a background image. The a and a:visited just have a color code for their backgrounds.

Image Rollover in CSS Button

C.S.S. File Specification

p.surprise {font-size: 125%; font-weight: bold; text-align: center;
width: 250px; height: 50px}
/*p.surprise is the holder unit for the block links. Height and width match that of the image. It also specifies larger bold text*/

p.surprise a {display:block; color: black;
background-color: #CCCCCC; text-decoration: none;
padding: 5px; border: 1px solid black}

p.surprise a:hover {display:block; color: black;
text-decoration: none; background-image:url(surpriseme.gif);
padding: 5px; border: 1px solid black}

p.surprise a:visited {display:block; color: white;
background-color: black; text-decoration: none;
padding: 5px; border: 1px solid white}

HTML Code

<p class="surprise">&nbsp; </p>

Sample Link

Surprise Me

This rollover should reveal a colorful spectrum background image.

Top of Page

Javascript Rollovers

There may a few cases in which it is desirable to create a rollover with Javascript, but there are some guidelines to follow.

  • The ALT tag describes the two images - in this case alt="Color Chart versus Grayscale Chart". If this were a link, the ALT tag would describe the location of the link.

  • Follow other guidelines for JavaScript and other scripting processes.

  • If the comparison of the two images were critical, then a link to a longer text description describing the change would be needed. For example:

    • This rollover shows a color bar chart with red, blue and green contrast with a grayscale version in which the contrast is almost muted. It is an example of how color coding alone can be inaccessible.

    Top of Page

    Charts & Accessibility

    Charts, graphs and maps use visuals to convey complex images to users. But since they are images, they provide serious accessibility issues to color blind users and users of screen readers. See Accessible and Inaccessible Chart Samples for details on how to make charts more accessible.

    This Page

    1. Synopsis
    2. Text Descriptions for Charts
    3. Charts with Color

    Synopsis

    1. If the data in a chart, graph or chart is crucial to the content of the Web page, then you must provide a text description of the image. In some cases, a numeric table replicating the chart data could provide additional accessibility.

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

    2. Supplement color coding of charts with texture, differences in line style, text in graphs or shades of one color to improve accessibility for color blind users. Charts should be readable in black and white.
      Note: The default settings of the Chart Wizard in Excel are not color accessible. Use the formatting tools to change line styles and colors.

      SECTION 508 - Web pages shall be designed so that all information conveyed with color is also available without color.

    3. Don't convert tables of data into images - that's what data tables are for.

    Top of Page

    Text Descriptions for Charts

    Basic Chart

    Here is a line graph of showing operating system preference over time. Note that data is approximate for demonstration purposes.

    Sample Line Chart - Details in Text Below

    Sample Text Descriptions

    There are several approaches you can take depending on what data you wish to highlight. One is to summarize the key trends of the chart as below.

    Sample Text Summary - In the early 1990s, the Macintosh was extremely popular among college students (about 90%), but by 2005, Windows was the most popular (85%) with Linux (10%) and Mac (5%) far behind.

    Another approach is just to repeat a data table with the scope and TH tags properly marked as below. This allows users of screen readers to access the same numeric data that is available in the chart. In addition, a caption or SUMMARY tag can be added to provide further details.

    Percentage of Students On Windows, Linux, Macintosh: 
    1990 versus 2000
    Platform 1990 2005
    Windows 10% 80%
    Macintosh 90% 5%
    Linux 0% 15%

    Top Of Page

    Charts With Color

    Sample Data

    These charts will document the number of computers by platform.

    Preferred Computer Platform in Linguistics Seminar of Twenty Students
    Platform Number of Students
    Windows 16
    Linux 3
    Macintosh 1

     

    Bar Charts

    Below are some examples of charts with inaccessible and accessible color choices and formats.

    Inaccessible Bar Chart

    Below is an image of an inaccessible bar chart for distribution of platforms in 2003. Solid red and green are used for colors and may not be distinguishable for color blind users.

    chart with inaccessible color

    In Grayscale

    chart in grayscale, the gray bars

    From a color perspective, the image is inaccessible because charts are color coded in shades of red, green and blue which are of similar brightness. The only key to the chart refers to the colors; thus only color conveys information.

     

    Accessible Version of Bar Chart

    The data from the first table has been redone as a bar chart, but the colors have been changed to shades of blue. Color blind users can use the different levels of darkness to tell the platforms apart. In addition, labels for each platform have been added to the bottom of the chart, so that viewers do not even have to refer to the key.

    bar chart with accessible colors

     

    Line Charts

    For line charts, changing the style of the graph lines and adding labels increases usability.

    Inaccessible Line Chart

    This is an inaccessible line chart based on the data in the table comparing percentage of Mac and Windows users from 1990 versus 2003.

    Inaccessible line chart. Data shows Mac use declining and Windows and Linux use increasing

    This chart uses lines three colors of similar brightness with a key that only refers to color. In grayscale, these colors are virtually identical.

     

    Accessible Version of Line Chart

    The chart replaces three solid lines with one solid line and two distinctive solid lines and adds labels for each line.

    Accessible Line Chart. Same Data as previous image.

    Top of Page

    Chat & E-Mail

    Synopsis

    • If a participant is using a screen reader, make sure you use a chat client that is compatible with a screen reader. The screen reader should identify sender name, read text from incoming messages and inform the chatter where to input messages.

    • When using Computer Mediated Communication (C.M.C.) technology such as online chat, blogs or threaded discussion message board or e-mail, be sure to describe any ASCII art, attachments, or audio/visual files that are referenced.

      • Accessible CMC Passage

      Sample Message Board Assignment

      Tracking the Lion Logo - Realistic Lion

      Assignment: By Friday, send me your thoughts on the lion image above for the "Tracking the Lion" logo. This image is a realistic male African lion in profile. Should the mascot be changed? Why or why not?

      NOTE: This description is also useful for students who cannot see an image attachment or image file online for technical reasons.

      A Note about ASCII Art in E-Mail Signatures

      Many e-mail programs allow users to add a custom signature line and many people like to incorporate ASCII art or the use of punctuation symbols and letters to simulate an image. Here's an ASCII Nittany lion used in many e-mail signatures

      ascii nittany lion

      This image is a screen capture, but if this had been true ASCII art, then a screen reader would have read: left parenthesis, quote grave accent dash quote just for the left ear.

      If your signature line includes ASCII art, then make sure it is placed below all the essential contact information so users of screen readers can stop reading the content once they come to the ASCII art.

      Top of Page

    Color and Color Blindness

    These pages deal with different topics on color and color blindness.

    Color Synopsis

    In terms of color blindness, the most problems seem to occur with spot colors especially when many colors are combined. Photographs tend have enough color and shade changes to be interpretable to color blind users.

    For low vision users, a key issue is ensuring there is sufficient contrast in lights/darks between the background and text or objects in the foreground. Sufficient contrast is also important in design for color blind users.

    1. Do not rely on color codes alone to provide information. Always include additional changes in shape or text.

      SECTION 508 - Web pages shall be designed so that all information conveyed with color is also available without color.

    2. If you are using colored text or colored backgrounds, test that text and background have a sufficient contrast in light/dark or "luminosity." Juicy Studios hosts an online color contrast tester in which you enter the the color codes for the text (foreground) and background to receive a contrast value. You want a contrast ratio of at least 4.5 to 1.
      Note: In some other tools, you may want a number greater than 125.

    3. Avoid contrasts of red and black, since some color blind users do not perceive reds (i.e. red is the same as "no color" or black).

    4. In terms of color deficiency (color blindness), the safest colors are black, white and gray followed by blue and yellow. Contrasting red versus green is the most problematic, but can be usable so long as supplemental information is provided.

    5. To ensure that color contrasts are visible to the most viewers, use a color blind simulator. Having enough contrasts in darkness is important for low vision and color blind users.
      Note: There are some color combinations, such as some shades of teal and yellow which are acceptable in grayscale, but still problematic for color blind users.

    6. Adjacent areas of brightly colored hues also cause difficulties for normal-vision because of "color vibration."

    7. Avoid long blocks of light text on dark backgrounds; they are generally more difficult to read.

    8. Strongly textured backgrounds should be avoided since they make text harder to read. Subtly textured backgrounds or colored/textured toolbars can add interest without compromising legibility.

    9. Subtle variations of colors may be lost in different monitor settings. For instance, flat panel screens are brighter than older monitors; Mac colors are lighter than Windows colors. Finally, some low vision users set their monitors to high color contrast, reducing the mid-value range. If possible, test your colors on different monitors or different gamma settings.

    Color Blindness/Color Deficient Vision

    This Page

    1. Why Red/Black Can be Bad
    2. Why Red/Green Can be Bad
    3. Merry Christmas in Different Color Vision Modes
    4. Tests for Simulating Color Blindness
    5. Color Blindness Links

    The human eye contains rods which detects levels of light (dark versus bright) and three kinds of cones which distinguish among the different colors. If none of the cones are functioning (very rare), then a person has grayscale vision. If the cones are semi-functional (also rare), then the person sees colors, but they are muted.

    More commonly, a person with color blindness (or "color deficiency") has a difference in only one of the rods, and it is usually either the red rod or the green rod. The result is that some colors appear to be more similar or are muted. The different type of deficiencies are simulated below.

    Why Red/Black Can Be Bad

    Some color blind users are lacking the capability to detect the lower color wave frequencies associated with red. For these users, red color waves read as "no signal", or "black". These users confuse red and black, so this contrast should be avoided whenever possible. Red and white is legible, but indistinguisable from black and white.

    Sample Warning Signs

    The black text on red sign becomes black on black for some color blind users.

    Normal Vision Warning Warning
    Red Vision Missing Warning Warning

     

    Why Red/Green Can be Bad

    If one or two sets of cones do not function correctly, then a person will have trouble telling certain colors apart. Almost 10% of men are red/green color blind; another group are blue/yellow color blind. Despite the fact that red-green contrasts are very distinct for about 95% of humanity, there are about 5% of people for whom this is non-functional. This is exacerbated by the fact that red and green are nearly identical on a gray scale monitor. See examples below.

    NOTE: Red-Green color blind people are better able to find camouflaged objects in natural settings. See Visicheck Article for more details.

    Merry Christmas in Different Color Vision Modes

    Merry Christmas, Green on Red

    The paragraph above is "Merry Christmas" in green text on a red background which a color blind person may not be able to read. This is also problematic because it causes a visual vibration for users with normal color vision.

    In Grayscale

    merry christmas grayscale, gray bar

    In grayscale, there is only a slight contrast because red and green are of nearly equal brightness.

    In Deuterope Mode (Red/Green Color Blindness)

    Appears as dark olive on medium olive in normal color vision. Simulation courtesy of Visicheck.

    Merry Christmas, Red/Green Colorblind Mode

    In Tritanope Mode (Blue/Yellow Color Blindness)

    Actually appears as teal and magenta. Simulation courtesy of Visicheck.

    Merry Christmas, blue/yellow color blindness

     

    More Accessible "Merry Christmas" Banner with Yellow Background

    Merry Christmas, Yellow Background

    The yellow Background separates the areas of red and green and provides a contrast in brightness, making the sign more legible. See the grayscale example below.

    In Grayscale

    grayscale, visible Merry Christmas

    Tests for Simulating Color Blindness

    Although it is difficult to determine exactly how a color-blind person sees the world, it is usually the case that if something is legible in grayscale, then a color-blind person can also view the information, although it may not be particularly appealing to that person. This is because, in most cases, the rods are functional and are still able to distinguish levels of light and dark.

    Note: There are some color combinations, such as some combinations of teal and yellow which are O.K. in grayscale, but still problematic for color blind users.

    Some Color Blindness Simulators

    1. Color Vision (Cal Henderson) - Test color schemes with almost all forms of color blindness

    2. Visicheck Color Blindness Tester - Allows you to test images and live Web pages for red-green and blue-yellow. color deficiencies.

    Color Blindness Links

    Color Blindness Simulators

    About Color Blindness

    Top of Page

    Contrast or Luminosity/Brightness

    Synopsis

    An important aspect of color for both low vision and color blind users is that the there be sufficient contrast in lightness and darkness between the foreground (text or graphics) and the background. Maximum contrast is black versus white, but this can be considered too overwhelming (it might cause glare). Other colors can be used such as navy, dark green, maroon for darks and pastels for light to lessen the contrast.

    However, some modern designs are so "subtle" that the contrast can actually be insufficient for some readers. Examples include contrasts in light vs mid gray, mid pastel versus darks or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast.

    In most testers, you enter in the hexadecimal color code for foreground (text) and background, and the tester generates a numeric result. Usually a low number or ratio indicates too little contrast.

    Tests

    WCAG 2.0

    The WCAG 2.0 recommends the following luminosity ratio standard of 1 to 4.5 for main text and 1 to 3 for large scale text (18 pixels or 14 pixels bold).
    Note: If your target audience is mostly low vision, then a ratio of 1 to 7 is recommended.

    This is a relatively recent recommendation, so the toolset is currently limited (as of Spring 2009), but these links are available:

    AERT

    An older algorithm compared the difference in "brightness" between the background and foreground, and the target difference was 125 or greater. Overall results are similar to the luminosity contrast test, but the older test is generally not as strict.

    Sample Palettes

    If your color scheme fails the test, it's likely that only a few minor adjustments may be needed to correct the color values to a more acceptable level. See examples below.

    Note: "Large text" = 18 pixels or bold face, 14 pixels

    Tests on Different Values of Gray on White
    Grey Level WCAG Ratio AERT Difference
    #000000 (Black) 21 : 1 (pass) 255 (pass)
    #333333 12.63 : 1 (pass) 204 (pass)
    #666666 5.74 : 1 (pass) 153 (pass)
    #777777
    #777777 (large)
    		 4.48 : 1 (fail)
    OK for large text    		 136 (pass)
    #818181
    #818181 (large)    		 3.9 : 1 (fail)
    OK for large text    		 125 (fail)
    #999999 2.85 :1 (fail) 102 (fail)
    #CCCCCC 1.61 : 1 (fail) 51 (fail)

     

    Tests on Different Levels of Cyan on White
    Cyan Level WCAG Ratio AERT Difference
    #003333 13.8 : 1 (pass)
    Hard to detect as not black    		 219 (pass)
    #006666 6.79 : 1 (pass) 183 (pass)
    #008585 4.47 : 1 (pass) 161 (pass)
    #009999
    #009999 (large)    		 3.49 : 1 (fail)
    OK for large text    		 147 (pass)
    #00CCCC
    		 2.00 : 1 (fail) 111 (fail)

    Top of Page

    Supplementing Color Coding

    Color coding is possible as long as the color information is supplemented with differences in shape or text. Here are some accessible and inaccessible examples.

    Inaccessible Red/Green Encoding

    Accessibility Color Do's & Don'ts
    Red Box = Don't Green Box = Do
    Green Box Do Check site with color checkers or grayscale minor
    Red Box Don't Use color coding alone
    Green Box Do Use blue/green or black/white/gray
    Red Box Don't Use red/green colors

    A color blind user could have trouble distinguishing a green box from a red box. Furthermore, a colored cell would be inaccessible to screen readers unless invisible text were included.

     

    Accessible Color Coding with Shape

    Accessibility Color Do's & Don'ts
    Red x = Don't Green + = Do
    + Check site with color checkers or grayscale monitor settings
    x Use color coding alone
    + Use blue/green or black/white/gray
    x Use red/green colors

    Color deficient users can rely on cues of shape in the "+" and "x" symbols to distinguish "do's" and "dont's". Using text symbols with a key is also more accessible to screen readers.

     

    Accessible Color Coding with Text

    Accessibility Color Do's & Don'ts (colored text)
    Do Check site with color checkers or grayscale minor
    Don't Use color coding alone
    Do Use blue/green or black/white/gray
    Don't Use red/green colors

    Color coded, but text labels makes it accessible to color blind users and screen readers.

     

    Top of Page

    Textured Backgrounds

    Although changing a background on a Web page to a bright color or distinctive background can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors and subtly textured backgrounds. Here are some examples below.

    Problematic Light Text on Dark

    Skip TextAlthough changing a background on a Web page to a bright color can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors for long passages.

    This light green text on dark green would cause eyestrain if an entire article were formatted this way.

    More Acceptable Dark Text on Light

    Skip TextAlthough changing a background on a Web page to a bright color can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors for long passages.

    However, even this dark green text on lighter green should be used only for short paragraphs. An entire page of this could be difficult to read.

    Problematic Strong Texture

    Skip Text This is a not-so-good Celtic background texture - Although changing a background on a Web page to a bright color or distinctive background can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors for long passages and subtly textured backgrounds only.

    In a visual browser, this text is almost illegible because of the strong contrast and rapidly changing colors in the background image.

    A Subtler Texture

    Skip TextThis is a much more subtle Celtic background texture - Although changing a background on a Web page to a bright color or distinctive background can add excitement, these backgrounds can also make it difficult to read Web pages. In general, it is best to use dark text on light colors for long passages and subtly textured backgrounds only. Here are some examples below.

    The background image is more subtle, almost invisible, and is lightly colored. In small passages, legibility would be acceptable.

    Top of Page

    Vibrating Color Combinations

    In addition to the issues of color blindness mentioned above, placing areas of brightly colored hues together can be hard for users with color vision to read. Bright colors cause an afterimage effect.With only one bright color, the after image is usually not bothersome, but with two bright colors together, the afterimages interfere with one another, causing a "visual vibration." This can be reduced by placing a neutral color between the two areas of bright colors or by making one of the colors a pastel or dark shade.

    Some Vibrating Color Combinations (Avoid)

    Some Vibrating Color Combinations

    red/green

    red on green

    green on red

    blue/orange

    blue on orange

    orange on blue

    green/magenta

    green on magenta

    magenta on green

    yellow/cyan

    yellow on cyan

    cyan on yellow

    blue/magenta

    magenta on blue

    blue on magenta

    orange/yellow

    yellow on orange

    orange on yellow (not so bad)

    blue/green

    green on blue

    blue on green

     

    Top of Page

    Connect (Adobe) or "Breeze"

    Synopsis

    1. Users with hearing disabilities will have problems with audio (unless it is captioned), but may be able to use text chat and images.

    2. A live captioning service can be scheduled ahead of time for a fee. Captions can also be included in session recordings. See the "Audio Captioning" options on Setting Up Audio and Video or contact breeze@psu.edu for more information. See recordered presentation on

    3. Adobe Connect uses a Flash interface. Confirm that users with screen readers can access tools. If there is an issue, then consider using a telephone for audio or an accessible text chat or voice chat client such as Skype which includes JAWS scripts for Skype.

    4. If you are screen sharing a document such as a Word file or a Web site, consider enlarging text to enhance legibility. You can also instruct users to click the Full Screen button beneath the shared document (in the "Share Pod"). See Adobe Connect Display Strategies for more information.

    5. If your audience includes low vision participants, confirm that the interface is legible. Users can both enlarge the window and zoom in on the interface in the View menu (Windows) or Command-+ on the Mac (Firefox). Note: On a Mac zooming cuts off the bottm portion of the window, and it may not be possible to return to the original view without closing and re-opening the meeting room.

    6. If your presentation includes a PowerPoint file with images, then include Alternative Text or text descriptions for images. Transitions (e.g. flying bullet points) should be minimized since each transition is converted into a seprate slide, one for each bullet point displayed.

    Links

    Dreamweaver

    Dreamweaver Accessibility Options

    Dreamweaver comes with a varity of tools and reports to help create accessible sites from the start.

    This Page

    1. Activate Accessibility Options
    2. Properties Panel
    3. Dreamweaver Accessibility Reports
    4. Word Header Styles
    5. Links
    6. ITS Training Handout

    Activate Accessibility Options

    To activate these, do the following:

    1. Open Dreamweaver and go to File then Preferences (Windows/Mac System 9) or the Dreamweaver menu then Preferences (Macintosh OSX).

    2. Click on Accessibility in the left side of the panel.

    3. Make sure the options for Show Attributes when Inserting are checked for each type of HTML object.

    4. Click OK to close the window.

    The next time you insert a table, graphic, form or other media, a pop-up window will appear to prompt you to enter the appropriate accessibility tags for each item.

    Properties Panel

    The Dreamweaver Properties Panel includes options for inserting accessibility tags depending on the item being edited.

    For example, when an image is highlighted, the ALT tag can be edited in the Properties panel.

    Dreamweaver Accessibility Reports

    Dreamweaver MX includes an accessibility reports geared for W.C.A.G. standards. Go to the Site menu then Site Files, then click the Site Reports tab to view available reports.

    Note: Dreameaver MX 2004 now includes reports for Section 508 guidelines.

    LIFT Section 508 Accessibility Reports

    The LIFT Plug-in for Dreamweaver is available at a discount from the Penn State Computer Store. This plug-in includes access to Nielsen Norman Group usability reports and tools for creating custom reports.

    See the Penn State Access P.S.U. LIFT page for detailed documentation and free upgrades.

    Word Header Styles

    In Dreamweaver, when text is pasted from Microsoft Word, the Header 1, Header 2, Header 3 styles are converted to H1, H2, H3 tags. These styles are available from the Style menu in word.

    Word users can use the Format » Styles options to modify the appearance of these styles in a Word document.

    Links to Additional Tips

    I.T.S. Training Handout (P.D.F.)

    Detailed instructions for using Dreamweaver Accessibility options are available in the PDF attachment below. Although the handout is for Dreamweaver MX, the options are very similar in newer versions of Dreamweaver.

    Top of Page

    Drop Down or Floating Menus

    Definition

    A floating menu is one that appears when you roll your mouse over a target area. Floating menus may be found on http://www.psu.edu, http://www.missamerica.org and other Web sites.

    Synopsis

    • If your Web site includes a Javascript drop-down men or a DHTML "floating" menu, then make sure a text based menu is also included in the Web site. The menu can be at the bottom, but a visible link to a text based menu should appear at the top of a page.

      • 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.

      Potential Accessibility Issues

      Although innovative, floating menus feature the following accessibility issues.

      1. Incorrectly coded menus may not work on screen readers

        .

      2. Users with mobility impairment may find it difficult to move the mouse and click on the correct option. The more submenus, the more difficult the problem.

      3. If only part of the hierarchy is visible at any one time, users with memory or cognitive disabilities may have difficulty locating which menu to click on.

      Recommendations

      • A link to a text-based menu or Site Map at the top of the page allows users unable or uncomfortable using a floating menu to use a more static set of navigational links.

        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.

      • According to a usability study by Jakob Nielsen, the most effective drop down menus show all options available.

      • CSS and JavaScript can be used to hide sub menu options by default, but still make them available on a screen reader. However you must ensure that events can recognize keyboard tabbing as well as a mouse click.

      • Ensure that menus can be accessed through tabbing on a keyboard

      Links

      Top of Page

    Dynamic Pages

    What's a Dynamic Page?

    Dynamic pages are created by pulling repetitive chunks of HTML code from different sources. For instance, this site uses a database engine to insert the same header and footer on each page of this Web site.

    Dynamic pages or content management systems can be a convenient way to make sure navigation blocks, skip navigation links, ALT tags in headers and so forth are consistently implemented on each page. However, almost all dynamic pages require access to special server set-ups, so require input from server administrators or programmers.

    Some Dynamic Page Types

    • AJAX
    • Server Side Includes (.shtml)
    • Active Server Pages (.asp)
    • Cold Fusion (.cfm)
    • PHP (.php)
    • Java Servlets and Java Server Pages (.jsp)
    • Perl CGI's
    • Dynamic page technology is used on content management systems such as blogs and wikis, ANGEL, Drupal and other systems

    Some Tips

    1. Implement recommendations from the WAI-ARIA working group whenever possible. ARIA support is available in Firefox 3, Opera 9.5 and is scheduled to be available in Internet Explorer 8 (in beta as of April 2008) as well as Safari 4 (in beta).

    2. Make sure all HTML code chunks include accessibility tags such as ALT tags, TH tags for data tables, LABEL tags for forms, and so forth.

    3. If your system uses Javascript links, make sure to include a link to a text-only alternative navigational system such as a Sitemap.

    4. Avoid using arbitrary database numbers for ALT tags, TITLE tags, FRAME tags and other text-alternative accessibility tags. Ideally, a content management system would allow users to enter an ALT tag text for an uploaded image.

      Inaccessible ALT Tag

      <img src="1103AB43.jpg" alt="Image_1103AB43.jpg" >

      A screen reader would say Image 1103AB43.

    5. If possible, use a script to convert dynamic page style links (e.g. www.mysite.psu/main.php?id=11) to more traditional type links (e.g. www.mysite.psu/page11.html) They are less likely to encounter compatibility issues with screen readers or older browsers.

    Links

    Some Server Side Include Tutorials

    If you wish to experiment with dynamic page creation, the simplest technology is probably Server Side Includes. The rest require either extensive programming, access to a database backend or both.

    Top of Page

    Flash Files

    HTML versus Flash

    Flash is a well-respected tool able to deliver interactive components to multiple browsers and platforms but can be problematic for screen readers and mobility impaired users. Although Macromedia is committed to providing tools to develop accessible Flash tools, ensuring Flash accessiblilty can be difficult.

    Tip: HTML Shell, Flash Objects

    Although many developers create entire modules in Flash, including navigation between pages, it may be easier to maintain the navigation, text and images in HTML and use Flash only for key animations, interactive activities or multimedia elements (audio/video) inserted within a Web page.

    When navigation is in HTML, the options for accessibility are generally easier to implement.

    Synopsis

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

    1. For animations – Start the animations in pause mode, then allow the user to start and stop as needed whenever possible. Avoid endless loop aninmations as they can be distracting for many users.

    2. For Flash video – Flash allows developers to link to an XML caption text file. This should be provided whenever possible. See Flash documentation and tutorials for details.

    3. Avoid including a full-screen automated Flash movie on a homepage since mobility impaired users may not be able to exit and cognitively disable users may become disoriented. These Flash files should be started by the user.

    4. Provide keyboard alteratives for common actions and tabbing through forms. For example you can have both a zoom button and program the +/- keys for zooming in and out. See Flash documentation and tutorials for details.

    5. Add text labels to all controls, form fields, labels and components so they can be identified by a screen reader. See Flash documentations and tutorials for details.

    6. Flash files should follow the same principles for font-styling, color schemes, avoidance of blinking, animation accessibility and audio and video accessibility that HTML pages do. One advantage to Flash files is that images and text are vector based and are usually zoomable.

    7. Keep text together in one object whenever possible. Screen readers may jump from text object to text object in unexpected directions.
      Note: Action script can be used to control reading order in newer versions of Flash.

    8. Minimize navigation within a Flash interface. This will minimize the amount of accessibility features needed within Flash.

    9. Always provide a link to an accessible Flash plug-in page.

      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).

    Links to Flash Accessibility Tutorials

    These links are current as of Flash CS4. If you use a different version, make sure you learn the techniques applicable to your version of Flash.

    Top of Page

    Fonts and Text Layout

    The links below contain information on font selection and text layout.

    See also - Bold/Italics and Color.

    Font/Text Layout Synopsis

    1. Do not manually adjust text size for section headers and subheaders - use the proper header tags instead.

    2. Avoid using fonts smaller than 9 points/9 pixels as they will become illegible on the Mac platform.

    3. Use font faces which more favorable for computer screens such as Verdana, Tahoma, Lucida Grande, Arial, or Georgia.

    4. Avoid underlined text except for links. Users unfamiliar with Web conventions may click on any underlined text.

    5. Avoid using italic text except for short passages or when academic convention calls for it. Italics is particularly difficult to read on a monitor; in some cases, bold face can be used in place italics.

    6. Generally use dark colored fonts on light backgrounds instead of the reverse since these are more readable.
      Note: PowerPoint presentations should be light text on dark when projected on a screen,

    7. If you need screen readers to distinguish bold or italic text in a different reading style for emphasis, use the STRONG and EM tags for B and I .

    8. Whenever possible, use external cascading style sheets instead of the FONT FACE tag or inline style specifications (i.e. avoid <p style="font-family: Verdana, sans-serif" >). This allows users with certain visual problems to replace your stylesheets with their own custom style sheets tailored for their needs.

    9. Avoid blinking text as it could trigger epileptic seizures in some users and is generally very distracting.

      SECTION 508 - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hertz (cycles per second) and lower than 55 Hertz. (i.e. avoid blinking, especially in the 2-55 Hz range).

    10. Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.

    11. Avoid specifying absolute font-sizes unless absolutely necessary; otherwise zooming may be disabled for low vision users, particularly on Internet Explorer 6 for Windows.

      If you do need to specify a font size, tags such as BIG or SMALL or relative sizes in CSS styles (e.g.font-size: small / font-size: 75% / font-size: .8em) instead of an absolute font-scale (e.g. font-size: 10pt).

    Top of Page

    Font Size

    The main concern for font size is that they are not too small.

    WYSIWYG Editors: Only Change Font Sizes When Necessary

    Many low vision users use custom settings which enlarge text to the size of their choice (to levels of 300-500%). However some font size settings can interfere with that zooming mechanism. The easiest way to avoid this is to not rely on the default font settings especially for WYSIWYG editors.

    9 Point/Pixel Minimum

    If you are using a WYSIWYG editor and it provides a set of font size options for smaller text, then make sure no font size is smaller than 9 point or 9 pixels. Font sizes at 8 points or smaller can be illegible on a Macintosh, as in the example below (see the "Points versus Pixels" section below for an explanation).

    The minimum font size only applies to footers, such as a copyright statement. For body text, you should leave the font size set at the default (which is usually set between 12-14 points).

    8 Point Text on a Mac

    The image below shows how 8 point text can be rendered in some browsers.

    screen capture-squeezed text

    BIG and SMALL Tags

    Ideally, CSS styles should be used for adjusting font sizes, but if you are editing HTML and cannot access the CSS file, then you can use the BIG and SMALL tags. These adjust font sizes, but not beyond the point of legibility. See example below:

    BIG and SMALL Tag Examples

    Medium, Big and Small

    Medium, <big>Big</big> and <small>Small</small>

    Avoid CSS Sizes x-small and xx-small

    If you are editing CSS, avoid using {font-size: x-small} since it is often rendered in 8 point on a Mac and becomes virtually unreadable. {font-size:xx-small} is even smaller.

    CSS: Pixels versus Points

    Font sizes can be measured in either points or pixels, however points are not rendered consistently across platforms. Therefore if you need to use absolute font sizes, use pixels (e.g. {font-size: 12px}) instead of points. See the chart below for a comparison.

    Read the next section on absolute font sizes to see some warnings about using pixels

    Display of Points vs. Pixels on Mac and Windows
      Windows Macintosh
    12 points 12 point text 12 point text
    12 pixels 12 pixel text 12 pixel text
    14 points 14 point text 14 point text
    14 pixels 14 pixel text 14 pixel text

    Note: In newer Mac browsers, text specified in point sizes may be enlarged to Windows point sizes. Pixel sizes remain consistent.

    CSS: Relative Font Sizes

    A current accessibility recommendation is to use relative font sizes such as percentages or units of .em instead of absolute sizes such as pixels or points. In older browsers (including Internet Explorer 6), an absolute font size remained set as is even if a user wanted to use the zoom command to enlarge text.

    The tradeoff is that designers cannot have full control over layout (especially in terms of placement of different divisions) when relative font sizes are use. Another issue has been that results are inconsistent from browser to browser and platform to platform when using relative font sizes.

    The good news is that most modern browsers, including Internet Explorere 7, Firefox, Safari, Opera, fully support zoomed text, even if the font is set to an absolute size. However, if your user base is relying on older browsers, then absolute font sizes will potentially be inaccessible.

    Top of Page

    Font Face

    List of Recommended Fonts

    Below are a list of fonts with notes on legibility. See the sections below for descriptions of different factors used to determine legibility. Fonts are available on PC and Mac unless otherwise specified.

    Highly Recommended Fonts
    Fonts Notes x-height I vs 1 vs l zero vs O Lower i,j
    Verdana Designed for Monitors by Microsoft. Many sites on accessibility use Verdana. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Lucida Sans (PC)/
    Lucida Grande (Mac)    		 Relatively new font. Used as a Mac system font. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Tahoma Available from Microsoft Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Georgia Serif. Designed for monitors by Micrsoft. Xx Oo Aa Rr I vs 1 vs l 0 vs O i, j
    Palatino (Mac)/
    Palatino Linotype (PC)/
    Book Antiqua (PC)    		 Serif. Traditional print font. Weight can be light. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j

     

    Additional Fonts of Reasonable Legibility
    Fonts Notes x-height I vs 1 vs l zero vs O Lower i,j
    Helvetica Traditional Print font. Available on Mac, Unix and new Windows. Some letter forms can be confused Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Arial A Windows analogue to Helvetica. Some typographers prefer Helvetica, but they are generally similar. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Trebuchet MS Available from Microsoft. Good x-height, but some letter forms (e.g. "g" and &") considered too unusual for some readers, especially if there are literacy issues. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Century Gothic Sans-serif, somewhat Art Deco. Good x-height, but some letters can be confused. Weight is light. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Times New Roman Serif. Relatively small x-height, but succeeds in many legibility tasks Xx Oo Aa Rr I vs 1 vs l 0 vs O i, j
    Bookman Old Style Available from Microsoft. Traditional Serif font designed for legibility. Good x-height, but may not be on all computers. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Garamond Available from Microsoft. Traditional font, but x-height relatively small and weight is light. Xx Oo Aa Rr I vs i vs l 0 vs O i,j
    Comic Sans Considered legible by some, but also "childlike". Can work on sites for younger audiences. Xx Oo Aa Rr I vs i vs l 0 vs O i,j

     

    Decorative: Use for Large Text Only
    Fonts Notes x-height I vs 1 vs l zero vs O Lower i,j
    Arial Black Available from Microsoft. Very Heavy Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Arial Narrow A narrow font which is probably too compressed for body text. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Haettenschweiler, Impact Available from Microsoft. Very Narrow and heavy. Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Harrington Available from Microsoft. Letter forms very ornate which can slow down reading speeds Xx Oo Aa Rr I vs 1 vs l 0 vs O i,j
    Monotype Corsiva A cursive style font. Italic-type slant can slow down reading. Xx Oo Aa Rr I vs 1 vs l 0 vs O i, j

     

    Factors for Selecting Fonts

    Type of Fonts

    Fonts can be classified as follows

    • Serif: Strokes extend out from the top or bottom of the letterforms and include Georgia, Times New Roman, and Palatino.
    • Sans serif font: Strokes do not extend out from the top or bottom of the letterform and include Arial, Helvetica, Verdana, and Lucida Grande (Mac)/Lucida Sans Unicode (PC).
    • Monospace: Each letter has the same width. Monospace fonts can be serif (Courier New) or sans serif-fonts (Andale Mono or Monaco (Mac)).

    Sans-serif fonts such as Verdana and Arial were originally recommended over serif fonts like Times New Roman because monitors were not able to render fonts with serifs very accurately. A lot of detail useful in print was lost on computer monitors.

    However, advances in display technology can allow for more serif fonts to be used on the Web (if the audience is using recent operating systems/browsers).

    Font availability

    The target font should be one that is available to many members of the audience. Microsoft fonts are a good source, but some fonts may be more recent than others. Also, if your audience contains a lot of Unix users, be aware that their font selection can be different from Windows and Mac.

    If you specify a font in a CSS, you should include alternate backup fonts whenever possible.

    X-height

    The x-height is the height of any lowercase letter without ascenders or descenders. Letters used to measure x-height include lowercase x,o,a,r,m,s. Letters with ascenders include lowercase "b,d,h,k" and those with descenders include "p,q,g,j."

    Generally speaking the higher the x-height in relation to a capital letter, the more legible the font is likely to be.

    Distinguishing ambiguous characers

    Another factor mentioned in legibility is how well the font distinguishes among similar characters such as capital I, number 1 and lowercase l (L) or 0 (zero) vs. capital letter O. Ideally each letter or number form should be distinct.

    Weight

    Weight is a measure of thickness in a letter form in comparison to height. Some fonts, such as Verdana are designed with more weight than others such as Palatino. Weight and can assist legibility because it darkens letters, but too much weight, such as in Arial Black can make a font unsuitable for body text.

    Character width

    Generally speaking, fonts which are wider are more legible than narrower fonts (within reason). One way to check width is to examine the letters x,o. You may also want to check narrow letters such as lowercase i,j to see how legible they are. A related concept is tracking or the width between adjacent letters.

    Links

    Top of Page

    Text Block Formatting

    With the exeption of headlines or decorative text, it is best to avoid large blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.

    Below are the examples to avoid.

    Note: Blocks in CSS refers larger units of text such as a paragraph, quotation or headline.

    Don't format Text Blocks Like this

    All Italics - An entire block of italic can be hard to read because computer monitors may not render diagonal lines clearly.

    All Underlined - Not only is underlined text harder to read, but underlines should only be used to designate a link.

    All Colored - Subtle, dark colors can work, but not long passages of brighlty colored text. Too much color can cause eyestrain and may induce migraines.

    Light Text on Dark Background

    On the Web, most readers prefer to read dark fonts on a lighter background

    All Decorative Font - Reading times for unusual fonts are much slower, and display technologies may affect visibility.

    All Caps - TESTS SHOW THAT READERS RELY ON CUES FROM LOWERCASE ASCENDERS & DESCENDERS....PLUS, CAPITALIZATION IS EQUATED TO "SHOUTING" ON THE WEB.

    Justified Text - Justified text (alignment on both the left and right margins) is currently not recommended because the justification algorithm could cause large space gaps.

    See image below for an example badly justified text.

    Shows text 'margin-right is formatted' with 2 inches between each word

    Top of Page

    Forms

    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.

    Sample LABEL Code

    See the Code - Alternate 1

    <label><b> Your Name </b>
          <input type="text" name="yourname">
    </label>

    See the Code - Alternate 2

    Use Alternate 2 if your layout requires the label and the field to be separated in the HTML.

    <labelfor "yourname"> <b> Your Name </b> </label>
    <input type="text" name="yourname"id="yourname">

     

    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.

    Inaccessible Form with Unlabeled Elements

    Instructions: Please enter your name, address, and phone number in the fields below.

      



    The form above is inaccessible because the form has three unlabeled fields. A screen reader would read it as:

    Instructions: Please enter your name, address, and phone number in the fields below.
    [INPUT] [INPUT] [INPUT]

     

    Inaccessible Form with Tables:
    Elements & Labels in Different Table Cells

     

    Inaccessible Form with Tables
    Name Phone Number Userid
    Street Address City,State Zip Code



    The form above would be read as follows in a screen reader:

    Name, Phone Number, Userid
    [INPUT] [INPUT] [INPUT]

    Street, City/State, Zip Code
    [INPUT] [INPUT] [INPUT]

     

    Accessible Form, Vertical Layout

    Name:

    E-Mail Address:

    Your Comments:

    NOTE: You can use style sheets to make sure label text is always the same width.

     

    Accessible Form, Horizontal Layout With Tables

    Accessible Form in Table
    Name:  E-mail: 

    Although the above form is laid out in an HTML table, each label and corresponding field are in the same cell and on the same line.

     

     

    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:

    Sample TABORDER Code

    <input type="text" name="textfield2" taborder="2" >

     

    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.

    Fieldset and Legend for Student Year

    Identify Current Student Year


    View the Code

    <fieldset>
    <legend>Identify Current Student Year</legend>

    <label><input type="radio" name="class" id="Freshman" value="1">Freshman</label><br />
    <label><input type="radio" name="class" id="Sophomore" value="2">Sophomore</label><br />
    <label><input type="radio" name="class" id="Junior" value="3">Junior</label><br />
    <label><input type="radio" name="class" id="Senior" value="4">Senior</label>

    </fieldset>

    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.

    Sample Dropdown Menu of Size=3

    View the Code

    <select name="Campus" id="Campus" size="3">
        <option value=""> </option>
        <option value="OZ::Abington Campus">Abington Campus (OZ)</option>
        <option value="AA::Altoona Campus">Altoona Campus (AA)</option>
    ...
    </select>

     

    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.

    Color Choice Example

    This form asks users to select a favorite color word and divides the list into types of blue-greens and types of reds.

    View the Code

    <label>What is your favorite color?
    <select name="color" id="color">
    <optgroup label="Blue-Greens">

    <option value="bgteal">Teal</option>
    <option value="bgcyan">Cyan</option>
    <option value="bgaqua">Aqua</option>

    </optgroup>
    <optgroup label="Reds">

    <option value="rscarlet">Scarlet</option>
    <option value="rvermillion">Vermillion</option>
    <option value="rcrimson">Crimson</option>

    </optgroup>

    </select>
    </label>
    </form>

     

    Top of Page

    Links to Additional Tutorials

    Top of Page

    Top of Page

    Frames on a Web 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     		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

     

    View the Code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <head> <title>A page that contains frames</title> </head>

    <body>

    ....

    <frameset rows="80,*" frameborder="no" framespacing="0" border="0">      <frame src="titlebar.html" title="My Page Titlebar"> <frameset cols="175,*" frameborder="no" framespacing="0" border="0">      <frame src="mainmenu.html" title="Main Menu" name="mainmenu">      <frame src="initialcontent.html" title="Page Content" name="content"> </frameset>

    Note that all NAMES , TITLES and file names indicate which type of content is available. Avoid using generic names like "left frame" or "frame01".

    No Frames Skeletal Navigation

    Here is an example of NOFRAMES code with skeletal navigation makes the site accessible to non-frames browsers.

    <noframes> <h1> Welcome </h1> <p> This page... </p>

    <h2> Main Menu </h2>

    <ul> /!-- Alternative No Frames Navigation --/      <li> <a href="page1.html">Page 1</a></li>      <li> <a href="page2.html">Page 2</a></li>      <li> <a href="page3.html">Page 3</a></li>      <li> <a href="pagen.html">Page n</a></li>
    </ul> </noframes>

    </frameset> </html>

     

    Links

    Top of Page

    Front Page & Microsoft Expression

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

    Front Page and Accessibility

    Microsoft Expression and Accessibility

    Header Tags (H1, H2, H3, P)

    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.

    Inaccessible Use of < font size > tag for headers

    In this example, the <font size="+1" color="#000066" (navy) > and <b > tags have been used to create large sub headings.

    Topic 1

    Content

    Topic 2

    Content

    A screen reader set to a scanning mode would not list these as topics. In addition the code contains more formatting tags than needed.

    View the Code

    <p> <font size="+1" color="#000066"> <b> Topic 1 </b> </font> </p>

     

    Accessible Use of H2 tag for headers

    In this example the H2 tag has been used and has been styled so that it is automatically navy.

    Topic 1 (example)

    Content

    Topic 2 (example)

    Content

    A screen reader set to a scanning mode would list "Topic 1" then "Topic 2"

    View the Code


    h2 {color: #000066}
    ...
    <body>
    <h2> Topic 1 </h2>

    Tagging Large Sizes Appropriately

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

    Inaccessible use of H1 tag

    In this example, the H1 tag is used to increase font size in the table cells. The screen reader in scanning mode will could read all the H1 cells out of context. In this case you could use CSS to ensure that the TH table header cells are styled with larger text.

    Summary of Jedi Knight Staff Review
      Vader Luke Obi-Wan
    Overall Grade C– A A+
    Summary Strong technical skills, but too quick to use them in an aggressive manner. Counseling on family issues may be needed. Technical skills still weak, but has excellent communication and relationship skills. May need to develop assertiveness. Strongly improved management and mentoring skills. Has clearly learned much from previous mistakes.

    A screen reader scanning H1 tags would read Vader, Luke, Obi-Wan, Overall Grade, Summary

    Top of Page

    Image Maps

    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.

    Example Code for Client-Side Image Map

    Penn State Links Menu Penn State Home Page LIAS-Libraries Catalog Penn State Directory Penn State Registrar Penn State Google Search

    View the Code

    Note that the ALT tag is included for the main image at top and each hot spot in order to provide a text alternative for screen readers. Titles for hot spots are included in order to display tooltips.

    <img src="examples/ANGELHeader.jpg" alt="Penn State Links Menu" width="586" height="72" border="0" usemap="#Map">

    <map name="Map">

    <area shape="rect" coords="245,52,317,72" href="http://www.psu.edu" alt="Penn State Home Page" title="Penn State Home Page" >

    <area shape="rect" coords="324,55,366,70" href="http://wwww.lias.psu.edu" alt="LIAS-Libraries Catalog" title="Libraries Catalog" >
    ...
    </map >

     

    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:

    Server-Side Image Map - Avoid

    <a href="/cgi-bin/imagemap/psu.map"> <img src="psu.gif" ismap width="160" height="140" border="0"> </a>

    Note that this code does not allow for any ALT or TITLE tags to be included.

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

    Accessible Text Based Menu for Server Side Image Maps

    About Penn State | Prospective Students | Academic Units

    Top of Page

    Images

    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.

    Sample ALT text Code

    <img src="imageXXX.gif" alt="Description" title="Description">

    Demo Web site with Image links

    Fake Child Education Site Label

    Math Problems Label
    Science Labs Label
    Word Games Label
    History Facts Label

    What Screen Reader Says with Alt Tag

    Fake Child Education Site Label

    Math Problems Label
    Science Labs Label
    Word Games Label
    History Facts Label

    View the Code

    <img src="K12Title.gif" alt="Fake Child Education Site Label"> </p>
    <p> <img src="K12MathProblems.gif" alt="Math Problems" <br>
    ...

    What Screen Reader Says without Alt Tag

     




    Screen reader says "Image" five times.

     

    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.

    TITLE Tooltip Example

    HTML Code
    <img src="bluemark.gif" alt="Penn State University" title="Founded in 1855" >

    Example (Hold cursor over image to test tooltip)
    Penn State University

     

    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.

     

    Inaccessible Alt Tag for Graphic Link

    This code is meant to implement the Penn State logo as a link to the homepage.

    View the Code

    <a href="http://www.psu.edu" > <img src="psulogo.gif" alt="Penn State Logo"> </a>

    A screen reader would say "Penn State Logo" but would not indicate that this link goes to the Penn State homepage.

    Accessible Alt Tag for Graphic Link

    This code is a more accessible implementation of the Penn State logo as a link to the homepage.

    View the Code

    <a href="http://www.psu.edu"> <img src="psulogo.gif" alt="Penn State Home Page"> </a>

    The screen reader would say "Penn State Homepage" which indicates where the link is going.

    If more information about the image or its design is desired, then a D link or LONGDESC tag can be provided.

    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

    Accessible Toolbar Image Code

    demo rainbow toolbar

    <img src="examples/spectrumtooltip.gif" alt="" >

    Screen Reader Says nothing and goes on to the next section

     

    Less Accessible Toolbar Image Code

    <img src="examples/spectrumtooltip.gif" alt="A Rainbow line used as toolbar" >

    Screen Reader says "Rainbow line as a toolbar". If you have eighteen rainbow toolbars, the screen reader would repeat this eighteen times. This is irrelevant to a screen reader user and increases reading time.

     

    Inaccessible Toolbar Image Code (no < alt > )

    <img src="examples/spectrumtooltip.gif" >

    With no ALT tag, Screen Reader Says "Image" which leaves users wondering if they are missing anything important.

    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.

    Saturated Fat Molecule

    Accessible Summary Alt Tag

    <...alt="saturated fat molecule" >

     

    Less Accessible Verbose Alt Tag

    <...alt="image of straight saturated fat with 18 carbons" >

    NOTE: This kind of description would be useful if the context is needed to understand the content, although a better strategy may be to include the text in the Web page itself or to link to a longer description as discussed in the next section.

    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.

    saturated fat moluecule
    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.

    Saturated Fat MolueculeD

    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.

    football player photo

    View the Longdesc code

    <img src="examples/runningfootbalplayer.jpg" alt="photo of football player" width="102" height="154" longdesc="dfootball.html" >

    Longdesc Text (in dfootball.html)

    This is a publicity photo of a Penn State football player running with the football in a crowded football stadium on a sunny day.

    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.

    Inaccessible ASCII Art Image

    ascii nittany lion

    This is a GIF file, but if it were true ASCII art, a screen reader would say:

    left parenthesis quote acute accent dash quote backslash quote right parenthesis...

    Top of Page

    Links on ALT Tags

    Top of Page

    Languages and Accessibility

    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 &egrave; for French è or &pound; 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.

     

    Declaring a U.S. English Page (Penn State)

    <html lang="en-US">

    ...

    </html>

     

    Declaring a British English Page

    <html lang="en-GB">

    ...

    </html>

    Screen readers supporting this tag could switch to a British accent.

     

    Declaring a French Page

    <html lang="fr">

    ...

    </html>

    Screen readers supporting this tag could switch to a French accent.

     

    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

    Test Text with Lang Tags

    This sentence is in default American English.

    This sentence will be read with a British accent.

    Esta frase es en español. (Spanish)

    Cette phrase est en français. (French)

    Mae'r frawddeg hon yn cymraeg. (Welsh - Not Supported)

    View the Code

    <p> This sentence is in English. </p>

    <p lang="en-GB"> This sentence will be read with a British accent </p>

    <p lang="es"> Esta frase es en espa&ntilde;ol. </p> (Spanish)

    <p lang="fr"> Cette phrase est en fran&ccedil;ais </p> (French)

    <p lang="cy"> Mae'r frawddeg hon yn Cymraeg. </p> (Welsh, not supported) </p>

    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.

     

    Spelling Out Language Name in Text

    Translations of U.N. Universal Declaration of Human Rights

    Spanish | French ... (Menu provides quick list of where non-English passages are)

    Spanish Article 1 (Spelling it Out)

    Artículo 1
    Todos los seres humanos nacen libres e iguales en dignidad y derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.

    French Article 1

    Article premier
    Tous les êtres humains naissent libres et égaux en dignité et en droits. Ils sont doués de raison et de conscience et doivent agir les uns envers les autres dans un esprit de fraternité.

     

     

    With Invisible Graphics

    Artículo 1
    Todos los seres humanos nacen libres e iguales en dignidad y derechos y, dotados como están de razón y conciencia, deben comportarse fraternalmente los unos con los otros.

    View the Code

    <img src="transpixel.gif" alt="Begin Spanish">

    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.

    Top of Page

    Links on a Web 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

    Top of Page

    Lists in HTML

    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.

    Inaccessible Nested list

    What a typical browser sees

    University Park Colleges and Departments

    1. Agricultural Sciences
      1. Agricultural and Biological Engineering
      2. Agricultural Economics
      3. ...
    2. Arts and Architecture
      1. Architecture and Landscape Architecture
        1. Department of Architecture
        2. Department of Landscape Architecture
      2. Art History
      3. ...
    3. ...

    What a screen reader may say

    University Park Colleges and Departments

    1. Agricultural Sciences 1. Agricultural and Biological Engineering...2. Arts and Architecture 1. Architecture and Landscape Architecture 1. Department of Landscape Architecture.

    Accessible Nested list

    What a typical browser sees

    University Park Colleges and Departments

    1. Agricultural Sciences
      1. Agricultural and Biological Engineering
      2. Agricultural Economics
      3. ...
    2. Arts and Architecture
      1. Architecture and Landscape Architecture
        1. Department of Architecture
        2. Department of Landscape Architecture
      2. Art History
      3. ...
    3. ...

    What a screen reader may say

    University Park Colleges and Departments

    1. Agricultural Sciences A. Agricultural and Biological Engineering...2. Arts and Architecture A. Architecture and Landscape Architecture i. Department of Landscape Architecture.

    Using Image Bullets (C.S.S.)

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

    Example List with Custom Bullets

    Penn State's two colors are:

    1. Blue
    2. White

    C.S.S. File Specification

    ol.paw {list-style-image:url(examples/paw.gif)}

    View the HTML Code

    <ol class="paw">
        <li>Blue</li>
        <li>White</li>
    </ul>

    The list-style-image attribute replaces a bullet with the image.

    What a screen reader says

    Penn State's two colors are:

    Item 1 Blue
    Item 2 White

     

    Top of Page

     

    Math Equations & Formulas

    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.

    Inaccessible Snell's Equations

    In HTML (Extended Text Description Below)

    ni sinθi = nr sinθrN sub I times sine theta sub I = N sub R times sine theta sub R

    View the Code

    n <sub>i</sub> sin <font face="Symbol">q</font>i = n <sub>r </sub> sin&theta; <sub>r</sub>

    This code includes the SUB subscript tag, changes the font to "Symbol" for one theta and uses the &theta; entity code (better) for the other instance.

    What the Screen Reader Says

    Knee sinqui equals ennar sin question-mark R.

    The "question-mark" indicates the screen reader was not able to decipher the &theta; entity code.

     

    Adding a Label and Text

    Snell's Equation- ni sinθi = nr sinθrN sub I times sine theta sub I = N sub R times sine theta sub R

    Extended Description - N sub I times sine theta sub I equals N sub R times sine theta sub R.

    The label "Snell's Equation" gives a user of a screen reader an idea of the content is and an extended text description gives the full details. An extended description can be linked or incorporated into the text as needed.

    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.

    Accessible Use of Image for an Equation

    Quadratic Formula

    X equals negative b, plus or minus the square root of B squared minus four times A times C all divided by two times A

    View the Code

    <img src=quatratic.gif alt ="X equals negative b, plus or minus the square root of B squared minus four times A times C all divided by two times A">

    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.

    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

    Unicode and MathML

    Top of Page

    Microsoft Office: Word, PowerPoint, Excel

    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.

      Size window with ALT Tag 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.
      screencapture, Format Picture window Office 2007

    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).

    Intended Result

    This is unformatted text.

    View the Code

    <p>This is unformatted text</p>

     

    Actual Result (Inaccessible)

    Font was fixed to 12 point, Times New Roman

    This is unformatted normal text.

    View the code

    <p class=MsoNormal>This is unformatted text</p>

    p.MsoNormal, li.MsoNormal, div.MsoNormal
    {mso-style-parent:"";
    margin-top:0in;
    margin-right:0in;
    margin-bottom:5.0pt;
    margin-left:0in;
    mso-pagination:widow-orphan;
    font-size:12.0pt;
    font-family:"Times New Roman";
    mso-ascii-font-family:Palatino;
    mso-fareast-font-family:Cambria;
    mso-hansi-font-family:Palatino;
    mso-bidi-font-family:"Times New Roman";}

     

    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

    Top of Page

    Multi-Column Layout

    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.

    Example Table

    Table Showing Screen Reader Order
    Cell 1 Cell 2 Cell 3
    Cell 4 Cell 5 Cell 6
    Cell 7 Cell 8 Cell 9

    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.

    Inaccessible Table Reading Order

    Here's a table with "3 2 1 Ignition" going from the lower left to the upper right.

          Ignition!
        1  
      2    
    3      

    Users of visual browsers would process the text as "3 2 1 Ignition", but because of how the table is laid out, a screen reader would say "Ignition 1 2 3."

    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

    PDF Files

    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

    Top of Page

    Pop-Up Windows (Issues and Some Solutions)

    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.

    Top of Page

    Redirects and Other Timed Responses

    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.

    An Automatic Permanent Redirect for ANGEL

    An example of an permanent redirect would be a Web address like angel.psu.edu for the ANGEL Course Management system which automatically redirects users to the true ANGEL Web address which is cms.psu.edu.

    Click on http://angel.psu.edu to see the redirect in action.

    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.

    Accessible Page Announcing New U.R.L.

    This page announces the new U.R.L. as a link instead of doing a timed redirect.

    The TLT Cyberplagerism Web site has been moved to:

    http://tlt.its.psu.edu/plagiarism.

    Please visit the new U.R.L. to view the updated Web page.

    Top of Page

    Scripts

    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

    Alternatives to Scripting

    Links

    Basic JavaScript

    ARIA

    Top of Page

    Skip Navigation

    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.

    View Example

    Skip Navigation [A Bunch of navigation buttons/tabs]

    [Content Starts Here]

    In visual browsers, the hidden graphic is marked by a blue dot before the "[A Bunch...]" because the border was not set to 0.

    View the Code

    <a href="#skip">
    <img src="transparent-pixel.gif" alt="Skip Content " border="0" >
    </a >

    <!-- DIV tags are used to break the pageinto sections. No formatting is visible unless CSS formatting is applied-->

    <div id="navigation">[A Bunch of navigation buttons/tabs]</div>

    <div id="content">
    <a name="skip" > </a > [Content Starts Here]
    </div>

    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

    Top of Page

    Tables for Data

    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.

    Examples of TH and SCOPE

    Color Names in Multiple Languages
    Color Spanish French Irish Welsh
    Black negro noir dubh du
    White blanco blanc bán gwyn
    Red rojo rouge ruadh coch
    Blue azul bleu gorm glas
    Green verde vert glas gwyrdd
    Yellow amarillo jaune buí melyn

    Note: Gray cells with bold, centered text are TH. The gray background is from a style sheet.

    In Screen Readers

    Because this table contains TH tags with the proper SCOPE definitions, some screen readers will read this table as follows.

    Color: Black, Spanish: negro, French: noir, Irish: dubh, Welsh: du.
    Color: White, Spanish: blanco, French: blanc, Irish: bán, Welsh: gwyn.
    Color: Red, Spanish: rojo, French: rouge, Irish: ruadh, Welsh: coch...

    View the Code

    <table>
    <caption>
    Donuts consumed by each staff member
    at Monday Meeting
    </caption>
    <tr>
         <th scope="col"> Color </th>
         <th scope="col"> Spanish </th>
         <th scope="col"> French </th>
         <th scope="col"> Irish </th>
         <th scope="col"> Welsh </th>

    </tr>
    <tr>
        <th scope="row"> Black </th>
        <td> negro </td>
        <td> noir </td>
        <td> dubh </td>
        <td> du </td>
    </tr>
    <tr>
         <th scope="row"> White </th>
             <td> blanco </td>
         <td> blanc </td>
         <td> bán </td>
         <td> gwyn </td>
    </tr>
    </table>

     

    Without TH and SCOPE

    The data would be read as a list with no identifiers. You would have to memorize which word went with a particular language.

    Black, negro, noir, dubh, du.
    White, blanco, blanc, bán, gwyn.
    Red, rojo, rouge, ruadh, coch...

    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.

    Example of CAPTION

    Caption: Table Showing Screen Reader Order
    Cell 1 Cell 2 Cell 3

    View the Code

    <table>
         <caption>
        Table Showing Screen Reader Order
         </caption>
    <tr>
         <td> Cell 1 </td>
         <td> Cell 2 </td>
         <td> Cell 3 </td>
    </tr>
    </table>

     

    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.

    Example of SUMMARY

    Caption: Table Showing Screen Reader Order
    Cell 1 Cell 2 Cell 3

    View the Code

    <table summary="Table cells are read left to right, top to bottom. ">
         <caption>
        Table Showing Screen Reader Order
         </caption>
    <tr>
         <td> Cell 1 </td>
         <td> Cell 2 </td>
         <td> Cell 3 </td>
    </tr>
    </table>

     

    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.

    In some cases, text can be forced onto one line by inserting a non-breaking space code (&nbsp;) between words. For example

    I can make sure this is one line.

    I&nbsp;can&nbsp;make&nbsp;sure&nbsp;this&nbsp;is&nbsp;one&nbsp;line 

    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.

    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

    Accessibility Blog

    To view the Accessibility Blog, click on the "Accessibility Blog" at the top or the left"

    Accessibility Resources (Links)

    The following links have information about accessibility:

    Penn State

    Non-Penn State Tutorials and Guides

    See also Access PSU Web Accessibility Resources.

    Accessibility Test Pages

    This section links to some accessibility test pages.

    Generic Inaccessible Web Page (Contains Blinking Text)

    This page includes basic accessibility errors and can be used to test reporting tools

    How Can This Page be Inaccessible?

    Let us Count the Ways

    Note: All the following passages say "Warning: This Page is Inaccessible!"

    Warning: This Page is Inaccessible!

    Warning: This Page is Inaccessible!

    Warning: This Page is Inaccessible!

     

    View Inaccessible Results

    View this Page as a P.D.F. (or not) | Maybe Inserting a Foreign Character Will Help (Video)

    Section 508 Errors on this Page
    A
    		 Violated
    B
    		 Violated
    C
    		 Violated
    D
    		 Violated
    E
    		 Violated
    F
    		 Not relevant
    G
    		 Violated
    H
    		 Violated
    I
    		 Not relevant
    J
    		 Violated
    K
    		 Not Relevant
    L
    		 Violated
    M
    		 Violated
    N
    		 Violated
    O
    		 Implemented
    P
    		 Not Relevant
    Your Name Your E-Mail Your Affiliation

    What are your comments?

    What Now Table
    ¡Ay Cáramba!
    What Now?

     

    List of Errors

    1. Close Window link uses Javascript, but no alternative is provided.
    2. No ALT tag on ASCII Lion
    3. ASCII Lion is actually an image map, but not text alternative is provided.
    4. Incorrect ALT tag on T.L.T. logo (ALT is "C.E.T.S", the old unit name).
    5. "How Can this..." is not an H1, but a styled P
    6. Teal/Yellow contrast potentially problematic for color blind users
    7. Text size fixed at 9 point via CSS
    8. Text contrast too light (done via external CSS)
    9. Blinking text
    10. Link to P.D.F. file included, but not a link to a page to download the plug-in
    11. Link to uncaptioned video.
    12. Data table uses spanned column and does not use TH to indicate headers
    13. Labels are incorrectly placed in form and does not use LABEL tag to indicate relationships
    14. Layout table for "What now?" has a redundant CAPTION tag
    15. Spanish ¡Ay Cáramba! in table is not labeled with a LANG tag
    16. Code actually specifies dark gray as page background in BODY tag. It will be unreadable without the stylesheet. See screen capture below for what happens with the stylesheet is disabled.

    No css, black on gray

     

    Top of Page

    Inaccessible HTML Code from Word

    Intended Result

    "This is a sample of unformatted normal text." (default Verdana medium text enclosed in P tag)

    <p>This is a sample of unformatted normal text." (default Verdana medium text enclosed in P tag)</p>

    Actual Result

    XHTML file with embedded styles which fixes text at Times New Roman, 12 point.

    This is a sample of unformatted normal text.

    <p style="font-size:12pt; font-family:'Times New Roman'">This is a sample of
    unformatted normal text.</p>

    Here's the Full Code

    This code was generated in 2002. For an example of code generated in Word 2008, see the Microsoft Office Page. The code still generates extensive styles that may not be needed.

    Problematic Code Generated by Word

    <html xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    xmlns="http://www.w3.org/TR/REC-html40" >
    more code, return to top
    <head >
    <meta name=Title content="This is normal unformatted text" >
    <meta name=Keywords content="" >
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" >
    <meta name=ProgId content=Word.Document >
    <meta name=Generator content="Microsoft Word 10" >
    <meta name=Originator content="Microsoft Word 10" >
    <link rel=File-List href="WordtoHTML_files/filelist.xml" >
    <title >This is normal unformatted text </title >
    <!--[if gte mso 9] > <xml >
    <o:DocumentProperties >
    <o:Author >Elizabeth Pyatt </o:Author >
    <o:Template >Normal </o:Template >
    <o:LastAuthor >Elizabeth Pyatt </o:LastAuthor >
    <o:Revision >1 </o:Revision >
    <o:TotalTime >1 </o:TotalTime >
    <o:Created >2003-10-22T19:05:00Z </o:Created >
    <o:LastSaved >2003-10-22T19:06:00Z </o:LastSaved >
    <o:Pages >1 </o:Pages >
    <o:Company >ETS </o:Company >
    <o:Lines >1 </o:Lines >
    <o:Paragraphs >1 </o:Paragraphs >
    <o:Version >10.2418 </o:Version >
    </o:DocumentProperties >
    </xml > <![endif]-- > <!--[if gte mso 9] > <xml >
    <w:WordDocument >
    <w:DisplayHorizontalDrawingGridEvery >0 </w:DisplayHorizontalDrawingGridEvery >
    <w:DisplayVerticalDrawingGridEvery >0 </w:DisplayVerticalDrawingGridEvery >
    <w:UseMarginsForDrawingGridOrigin/ >
    <w:Compatibility >
    <w:SpaceForUL/ >
    <w:BalanceSingleByteDoubleByteWidth/ >
    <w:DoNotLeaveBackslashAlone/ >
    <w:ULTrailSpace/ >
    <w:DoNotExpandShiftReturn/ >
    <w:AdjustLineHeightInTable/ >
    </w:Compatibility >
    </w:WordDocument >
    </xml > <![endif]-- >
    <style >
    <!--
    /* Font Definitions */
    @font-face
        {font-family:"Times New Roman";
        panose-1:0 2 2 6 3 5 4 5 2 3;
        mso-font-charset:0;
        mso-generic-font-family:auto;
        mso-font-pitch:variable;
        mso-font-signature:50331648 0 0 0 1 0;}
    @font-face
        {font-family:Arial;
        panose-1:0 2 11 6 4 2 2 2 2 2;
        mso-font-charset:0;
        mso-generic-font-family:auto;
        mso-font-pitch:variable;
        mso-font-signature:50331648 0 0 0 1 0;}
    @font-face
        {font-family:Palatino;
        panose-1:0 2 0 5 0 0 0 0 0 0;
        mso-font-charset:0;
        mso-generic-font-family:auto;
        mso-font-pitch:variable;
        mso-font-signature:50331648 0 0 0 1 0;}
    /* Style Definitions */
    p.MsoNormal, li.MsoNormal, div.MsoNormal
        {mso-style-parent:"";
        margin:0in;
        margin-bottom:.0001pt;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:Palatino;}
    h3
        {mso-style-next:Normal;
        margin-top:12.0pt;
        margin-right:0in;
        margin-bottom:3.0pt;
        margin-left:0in;
        mso-pagination:widow-orphan;
        page-break-after:avoid;
        mso-outline-level:3;
        font-size:13.0pt;
        font-family:Helvetica;}
    p.MsoBodyText, li.MsoBodyText, div.MsoBodyText
        {margin:0in;
        margin-bottom:.0001pt;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:Palatino;
        color:#993366;
        font-weight:bold;}
    p.HeaderE, li.HeaderE, div.HeaderE
        {mso-style-name:HeaderE;
        margin:0in;
        margin-bottom:.0001pt;
        mso-pagination:widow-orphan;
        font-size:16.0pt;
        font-family:Palatino;
        font-weight:bold;}
    p.SubHeadE, li.SubHeadE, div.SubHeadE
        {mso-style-name:SubHeadE;
        margin:0in;
        margin-bottom:.0001pt;
        text-align:center;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:Palatino;
        font-weight:bold;}
    p.TitleE, li.TitleE, div.TitleE
        {mso-style-name:TitleE;
        margin:0in;
        margin-bottom:.0001pt;
        text-align:center;
        mso-pagination:widow-orphan;
        font-size:18.0pt;
        font-family:Palatino;
        font-variant:small-caps;}
    p.FigureText, li.FigureText, div.FigureText
        {mso-style-name:"Figure Text";
        margin:0in;
        margin-bottom:.0001pt;
        mso-pagination:widow-orphan;
        font-size:10.0pt;
        font-family:Helvetica;
        font-weight:bold;}
    p.RedBold, li.RedBold, div.RedBold
        {mso-style-name:RedBold;
        margin:0in;
        margin-bottom:.0001pt;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:"Times New Roman";
        color:red;
        font-weight:bold;}
    p.Sub-SectionHeading, li.Sub-SectionHeading, div.Sub-SectionHeading
        {mso-style-name:"Sub-Section Heading";
        margin-top:0in;
        margin-right:0in;
        margin-bottom:6.0pt;
        margin-left:.25in;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:Arial;
        font-weight:bold;}
    p.Sub-SectionParagraph, li.Sub-SectionParagraph, div.Sub-SectionParagraph
        {mso-style-name:"Sub-Section Paragraph";
        margin-top:0in;
        margin-right:0in;
        margin-bottom:6.0pt;
        margin-left:.5in;
        mso-pagination:widow-orphan;
        font-size:12.0pt;
        font-family:"Times New Roman";
        letter-spacing:-.5pt;}
    p.MainSectionHeading, li.MainSectionHeading, div.MainSectionHeading
        {mso-style-name:"Main Section Heading";
        mso-style-parent:"Heading 3";
        margin-top:0in;
        margin-right:0in;
        margin-bottom:6.0pt;
        margin-left:0in;
        mso-pagination:widow-orphan;
        page-break-after:avoid;
        font-size:16.0pt;
        font-family:Arial;
        font-weight:bold;}
    p.TitleHeading, li.TitleHeading, div.TitleHeading
        {mso-style-name:"Title Heading";
        margin:0in;
        margin-bottom:.0001pt;
        text-align:center;
        mso-pagination:widow-orphan;
        font-size:24.0pt;
        font-family:Arial;
        font-weight:bold;}
    @page Section1
        {size:8.5in 11.0in;
        margin:1.0in 1.25in 1.0in 1.25in;
        mso-header-margin:.5in;
        mso-footer-margin:.5in;
        mso-paper-source:0;}
    div.Section1
        {page:Section1;}
    -- >
    </style >
    </head >

    <body bgcolor=white lang=EN-US style='tab-interval:.25in' >


    <div class=Section1 >

    <p class=MsoNormal >This is a sample of unformatted normal text </p >

    </div >

    </body >

    </html >

    Top of Page

    Cynthia Says Sample Report

    Sample Cynthia Says Report

    Posted with Permission from Cynthia Says

    Cynthia Says - Web Content Accessibility Report
     Powered by HiSoftware Content Quality Technology
     Let us know what you think by completing this feedback form

    Verified File Name: http://www.personal.psu.edu/staff/e/j/ejp10/tempaccess/badpage.html
    Date and Time: 10/23/2003 1:45:00 PM
    Failed Automated Verification
    Emulated Browser: Cynthia 1.0
    The level of detail setting for the report is to show all detail.


    Verification Checklist
    Checkpoints Passed
    508 Standards, Section 1194.22 Yes No Other
    A. 508 Standards, Section 1194.22, (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
    • Rule: 1.1.1 - All IMG elements are required to contain either the alt or the longdesc attribute.
      • Failure - IMG Element at Line: 21, Column: 13
    • Rule: 1.1.2 - All INPUT elements are required to contain the alt attribute or use a LABEL.
      • Failure - INPUT Element, of Type TEXT, found at Line: 158, Column: 7
      • Failure - INPUT Element, of Type TEXT, found at Line: 161, Column: 7
    • Rule: 1.1.3 - All OBJECT elements are required to contain element content.
      • No OBJECT elements found in document body.
    • Rule: 1.1.4 - All APPLET elements are required to contain both element content and the alt attribute.
      • No APPLET elements found in document body.
    • Rule: 1.1.6 - All IFRAME elements are required to contain element content.
      • No IFRAME elements found in document body.
    • Rule: 1.1.7 - All Anchor elements found within MAP elements are required to contain the alt attribute.
      • No Anchor Elements found within MAP element found at Line: 240, Column: 1.
    • Rule: 1.1.8 - All AREA elements are required to contain the alt attribute.
      • Failure - AREA Element at Line: 241, Column: 1
      • Failure - AREA Element at Line: 242, Column: 1
    • Rule: 1.1.9 - All EMBED elements are required to contain the NOEMBED element.
      • No EMBED elements found in document body.
    		   No  
    B. 508 Standards, Section 1194.22, (b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
    • Rule: 1.4.1 - Identify all OBJECT Elements that have a multimedia MIME type as the type attribute value.
      • No OBJECT elements found in document body.
    • Rule: 1.4.2 - Identify all OBJECT Elements that have a 'data' attribute value with a multimedia file extension.
      • No OBJECT elements found in document body.
    • Rule: 1.4.3 - Identify all EMBED Elements that have a 'src' attribute value with a multimedia file extension.
      • No EMBED elements found in document body.
    		     N/A
    C. 508 Standards, Section 1194.22, (c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.      
    D. 508 Standards, Section 1194.22, (d) Documents shall be organized so they are readable without requiring an associated style sheet.
    • Note: Document uses external stylesheets, inline style information, or header style information.
    		      
    E. 508 Standards, Section 1194.22, (e) Redundant text links shall be provided for each active region of a server-side image map.
    • Rule: 1.2.1 - Locate any IMG element that contains the 'ismap' attribute.
      • No IMG elements found in document body that contain the 'ismap' attribute.
    • Rule: 1.2.2 - Locate any INPUT element that contains the 'ismap' attribute.
      • No INPUT elements found in document body that contain the 'ismap' attribute.
    		     N/A
    F. 508 Standards, Section 1194.22, (f) 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.
    • Rule: 9.1.1 - No IMG element should contain the 'ismap' attribute.
      • No server-side image map IMG elements found in document body.
    • Rule: 9.1.2 - No INPUT element should contain the 'ismap' attribute.
      • No server-side image map INPUT elements found in document body.
    		     N/A
    G. 508 Standards, Section 1194.22, (g) Row and column headers shall be identified for data tables.
    • Rule: 5.1.1 - Identify all Data TABLE elements.
      • Note: Data TABLE Element found at Line: 47, Column: 1.
    		      
    H. 508 Standards, Section 1194.22, (h) 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.
    • Rule: 5.2.1 - Identify all Data TABLE elements.
      • Note: Data TABLE Element found at Line: 47, Column: 1.
    		      
    I. 508 Standards, Section 1194.22, (i) Frames shall be titled with text that facilitates frame identification and navigation.
    • Document is not a FRAMESET Page.
    		     N/A
    J. 508 Standards, Section 1194.22, (j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
    • Rule: 7.1.1 - Documents are required not to contain the BLINK element.
      • No BLINK elements found in document body.
    • Rule: 7.1.2 - Documents are required not to contain the MARQUEE element.
      • No MARQUEE elements found in document body.
    		      
    K. 508 Standards, Section 1194.22, (k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.      
    (k) Option A - Check for the string 'Text Version' within the document.     N/V
    (k) Option B - Check for a Global Text Version Link within the document.     N/V
    (k) Option C - Check for an Accessibility Policy Link within the document.     N/V
    L. 508 Standards, Section 1194.22, (l) 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.
    • Rule: 6.3.1 - Anchor elements are required not to use javascript for the link target when the NOSCRIPT element is not present in the document. These elements will not cause a failure of the checkpoint if the NOSCRIPT element is found, however, they will be identified.
      • Warning: Anchor Element found at Line: 17, Column: 5 contains 'javascript:' in the 'href' attribute and the NOSCRIPT element is not present within the document body.
    • Rule: 6.3.2 - AREA elements are required not to use javascript for the link target when the NOSCRIPT element is not present in the document. These elements will not cause a failure of the checkpoint if the NOSCRIPT element is found, however, they will be identified.
      • No AREA elements that use javascript for the link target were found in document body.
    • Rule: 6.3.3 - Locate elements that use HTML event handlers.
      • No elements that use HTML event handlers were found in document body.
    • Rule: 6.3.4 - When SCRIPT Elements are used, the NOSCRIPT element is required in the document.
      • No SCRIPT elements found in document.
    		      
    M. 508 Standards, Section 1194.22, (m) 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).
    • Rule: 6.3.5 - All OBJECT elements are required to contain element content.
      • No OBJECT elements found in document body.
    • Rule: 6.3.6 - All APPLET elements are required to contain both element content and the alt attribute.
      • No APPLET elements found in document body.
    • Rule: 6.3.7 - All EMBED elements are required to contain the NOEMBED element.
      • No EMBED elements found in document body.
    • Rule: 6.3.8 - All pages that have links to files that require a special reader or plug-in are required to contain the specified text indicating a link to the reader or plug-in.
      • Note: This rule has not been selected to be verified for this checkpoint.
    		 Yes    
    N. 508 Standards, Section 1194.22, (n) 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.      
    O. 508 Standards, Section 1194.22, (o) A method shall be provided that permits users to skip repetitive navigation links.
    • Rule: (o).1 - All pages are required to contain a bookmark link to skip navigation that has the specified text in either the link text or the 'title' attribute value.
      Skip Navigation Text:
      • Note: This rule has not been selected to be verified for this checkpoint.
    		      
    P. 508 Standards, Section 1194.22, (p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.      

    Checkpoint Result Legend: Yes = Passed Automated Verification, No = Failed Automated Verification, Warning = Failed Automated Verification, however, configured not to cause page to fail (Priority 2 or 3 only), N/V = Not selected for verification, N/A = No related elements were found in document (Visual only), No Value = Visual Checkpoint

    HiSoftware Alt Text Quality Report

    Verified File Name: http://www.personal.psu.edu/staff/e/j/ejp10/tempaccess/badpage.html
    Date and Time: 10/23/2003 1:45:00 PM
    Failed Automated Verification
    Emulated Browser: Cynthia 1.0

    Verification Checklist
    Checkpoints Passed
      Yes No Other
    1.1 Validate that the alt text does not use the word image When users add alternative text to an image they tend to add the word "Image" when it really says nothing about the image, but describes the object versus the meaning of the object. This check will fail a page for the use of the word image in the alternative text.

    Image Alternative Text should not contain the word "Image"

    • Failure - img Element at Line: 21, Column: 13 - The element does not use the attribute: alt.
    		   No  
    1.2 Validate that the alt text does not contain the text: .jpg, .gif, .bmp, .jpeg Many content creation tools will automatically add alternative text when you add an image to your content. The text is generally the image name. Validate that: .jpg, .gif, .bmp, .jpeg, are not found in the alt text.

    Image alternative text should not contain : .jpg, .gif, .bmp, .jpeg

    • Failure - img Element at Line: 21, Column: 13 - The element does not use the attribute: alt.
    		   No  
    1.6 Validate that the alt text does not contain the text "image" Many content creation tools will automatically add alternative text when you add an image to your content. The text is generally the image name or the word image with a number associated, like image001. This checkpoint will fail a page if the string image is found in the alternative text.

    Image alternative text should not contain the text "image"

    • Failure - img Element at Line: 21, Column: 13 - The element does not use the attribute: alt.
    		   No  
    2.1 Validate that Alternative Text is greater than 7 and less than 81 characters in length Short alternative text may not be valid, warn the report user if alternative text was found that is less than seven characters in length. Additionally alternative text should not be larger than 80 characters, if the alt text is greater the long description attribute should be used. This check validates that the alt attribute does not exceed 80 characters in length.

    The alternative text failed the minimum/maximum allowed characters check

    • Note - img Element at Line: 21, Column: 13 - The element does not use the attribute: alt.
    		     Warning
    2.2 Validate that Alternative Text is not used to repeat words Alternative text should not be used to simply hide words with the hope of increasing your ranking on search engines. If you repeat a word more than 5 times your page may not be indexed.

    The alternative text failed the maximum allowed repeated words check

    • Failure - img Element at Line: 21, Column: 13 - The element does not use the attribute: alt.
    		   No  

    Checkpoint Result Legend: Yes = Passed Automated Verification, No = Failed Automated Verification, Warning = Automated Verification Warning, N/V = Not Verified, N/A = No related elements were found in document, No Value = Visual Checkpoint

    Report generated by the Cynthia Agent.
    Powered by AccMonitor! AccMonitor is a trademark of Hiawatha Island Software Inc. (www.hisoftware.com)

    Posted with Permission from Cynthia Says

    Top of Page

    LIFT Accessibility Report Sample

    What is LIFT?

    LIFT is a Web editor plug-in which checks a Web page or site and provides a comprehensive report of potential accessibility and usability issues.

    LIFT for Dreamweaver is available to Penn State Departments at a reduced rate via the Penn State Computer Store (search for "LIFT").

    A sample report from 2002 is listed below, but the format may have changed since then.

    LIFT Executive Summary (Run 2002)

    LIFT Accessibility Report
    Executive Summary
    Date: Thursday October 23 13:16:38 2003
    Site: Accessibility

    Section 1: Report Information Summary

    Number of tests used: 66
    Automatic
    		 35
    Manual
    		 31

    Section 2: Overall Status

    Number of pages tested: 1

    Number of pages that: Passed Are pending (Manual) Failed
      0 0 1

    Section 3: Detail Summary

    Page file name Automatic tests Manual tests
    a-presentation/badpage.html 5 failed 6 pending

    LIFT Page Detail Report (Run in 2002)

    Skip to the page content
    go to home UsableNet
    UsableNet Inc. logo: the world
    usablenet.com 
    Report Index Page > a-presentation/badpage.html

    LIFT Accessibility Report
    Page Detail

    Date:
    		 Thursday October 23 13:17:25 2003
    Site:
    		 Accessibility
    Page: a-presentation/badpage.html

    Section 1: Page Detail

    index

    Automatic test Checkpoint passedare not applicablefailed
    APPLET with valid ALT [508 a] 508 a  yes 
    APPLET with valid CONTENT [508 a] 508 a  yes 
    Audio/video OBJECT with valid CONTENT [508 a] 508 a  yes 
    Banner image with valid ALT [508 a] 508 a  yes 
    Bullet image with valid ALT [508 a] 508 a  yes 
    Button image with valid ALT [508 a] 508 a  yes 
    Composition image with valid ALT [508 a] 508 a  yes 
    Decorative image with valid ALT [508 a] 508 a  yes 
    Form Button with valid ALT [508 a] 508 a  yes 
    Hidden link with valid ALT [508 a] 508 a  yes 
    Hotspot with valid ALT [508 a] 508 a   yes (2)
    INPUT with valid ALT [508 a] 508 a  yes 
    Image OBJECT with valid CONTENT [508 a] 508 a  yes 
    Image with valid ALT [508 a] 508 a  yes 
    Image with valid LONGDESC/D-LINK [508 a] 508 a  yes 
    Link image with valid ALT [508 a] 508 a yes  
    Map image with valid ALT [508 a] 508 a   yes (1)
    No LONGDESC for spacer image [508 a] 508 a  yes 
    OBJECT with valid CONTENT [508 a] 508 a  yes 
    Repeated image with consistent ALT [508 a] 508 a  yes 
    Repeated image with valid ALT [508 a] 508 a  yes 
    SCRIPT with valid NOSCRIPT [508 a] 508 a  yes 
    Spacer image with valid ALT [508 a] 508 a  yes 
    Thumbnail image with valid ALT [508 a] 508 a  yes 
    Thumbnail with valid LONGDESC/D-LINK [508 a] 508 a  yes 
    Cell of data table should refer to headers [508 g] 508 g  yes 
    Data table should have headers [508 g] 508 g   yes (1)
    Data table with valid THs [508 g] 508 g  yes 
    FRAME with valid TITLE [508 i] 508 i  yes 
    IFRAME with valid TITLE [508 i] 508 i  yes 
    Form Control with Label [508 n] 508 n   yes (4)
    Jump Menu is Device Independent [508 n] 508 n yes  
    Skip repetitive links [508 o] 508 o   yes (1)
    No auto redirect is used [508 p] 508 p  yes 
    No auto refresh is used [508 p] 508 p  yes 

    Manual test Checkpoint are not applicablepending
    APPLET with equivalent ALT [508 a] 508 a yes 
    Audio/video OBJECT with equivalent CONTENT [508 a] 508 a yes 
    Banner image with equivalent ALT [508 a] 508 a yes 
    Button image with equivalent ALT [508 a] 508 a yes 
    Composition image with equivalent ALT [508 a] 508 a yes 
    Form Button with equivalent ALT [508 a] 508 a yes 
    Hidden link image with equivalent ALT [508 a] 508 a yes 
    Hotspot with equivalent ALT [508 a] 508 a yes 
    INPUT with equivalent ALT [508 a] 508 a yes 
    Image OBJECT with equivalent CONTENT [508 a] 508 a yes 
    Image with equivalent ALT [508 a] 508 a yes 
    Link image with equivalent ALT [508 a] 508 a  yes (1)
    Linked AUDIO with equivalent CONTENT [508 a] 508 a yes 
    OBJECT with equivalent CONTENT [508 a] 508 a yes 
    SCRIPT with equivalent NOSCRIPT [508 a] 508 a yes 
    Thumbnail image with equivalent ALT [508 a] 508 a yes 
    Multimedia with equivalent audio description [508 b] 508 b yes 
    Multimedia with synchronized alternative [508 b] 508 b yes 
    Color is not essential [508 c] 508 c  yes (1)
    Style sheets should not be necessary [508 d] 508 d  yes (8)
    Links are needed for server-side image map [508 e] 508 e yes 
    No server-side image maps should be used [508 f] 508 f yes 
    Data tables should be defined by TABLE tag [508 g] 508 g yes 
    Multiple headers should be marked in data tables [508 h] 508 h  yes (1)
    Avoid causing the screen to flicker [508 j] 508 j yes 
    GIFs do not cause the screen to flicker [508 j] 508 j  yes (1)
    Text only equivalent page may be needed [508 k] 508 k yes 
    Scripts are accessible [508 l] 508 l yes 
    Link to plug-in is present [508 m] 508 m yes 
    Form is accessible [508 n] 508 n  yes (1)
    Proprietary tags are used [sugg] sugg yes 

     

    1




    Web site Testing Systems
    © 2002 UsableNet Inc. All rights reserved.

    Top of Page

    Accessibility Standards Site Map

    Main Pages and Accessibility Tutorial
    A. Main Pages B. Accessibility Tutorial

    Top of Page

    Test Pages and Alpbetized List of Technology and HTML Tags
    A-C D-K L-Z Test Pages

     

    Top of Page

    Details by Tag - Alphabetized

    Details by Tag - Alphabetized

    Accessibility options for different HTML tags and Web-based technologies.

    This Page: A-C | D-K | L-R | S-Z | Testing & Standards

    Note: Some content on this Web site has been made deliberately inaccessible or redundant to provide examples of what not to do.

    A-C Tags

     

    D-K Tags

     

    L-R Tags

     

    S-Z Tags

    Top of Page

     

    Guidelines & Checklists

    Top of Page

    External Links to Accessibility Sites

    External Links to Accessibility Sites

    This Page

    Types of External Links

    1. Penn State Accessibility
    2. External Tutorials
    3. Accessibility Guidelines
    4. Verification Services
    5. Screen Reader Issues
    6. Low Vision Users
    7. Color Blindness Issues
    8. Captioning Options
    9. Mobility Impairments
    10. Cognitive Disabilities
    11. Plug-ins and Other Documents
    12. C.S.S. Tutorials
    13. Advanced Javascript Issues

    Implementing Accessibility

    Penn State Accessibility

    This Section: Policy | Assistive Technology Labs

    Penn State Accessibility

    Assistive Technology Labs

    Top of Page

     

    Accessibility Tutorials

    This Section: In-DepthAccessibility | Section 508 | Tool Demos | University Tutorials | Software Vendor Tutorials

    In-Depth Tutorials

    In-depth accessibility tutorials aimed for Web masters

     

    Section 508

    Tool Demos

    Sites which provide demos of screen readers, text zoomers and other accessibility hardware and software.

    University Tutorials

    Aimed for instructors and Web masters.

    Tutorials from Software Vendors

    Top of Page

     

    Accessibility Guidelines

    This Section: Section 508 Guidelines | W.C.A.G Guidelines | Outside the U.S.

    External Section 508 Checklists

    Note also that the first section of the guidelines applies mainly to the development of custom software applications for the federal government, not necessarily to Web sites.

    Web Content Accessibility Guidelines (W.C.A.G.)

    Comprehensive recommendations developed by the W3C (World Wide Web Consortium). They are divided into three priority levels ranked from most crucial (Level 1) to least crucial (Level 3).

    Outside the U.S.

    Top of Page

    Verification Services

    This Section: Browser Plug Ins | Online Verification Services | Accessibility Reporting Software

    Verifications should be used as only one of several accessibility tests. See the Suggested Testing Protocol for suggested guidelines on screen reader tests, color tests and zooming tests.

    See Also: Lynx Browsers | Color Blindness Simulators

    Browser Plug Ins

    These plug ins and tools allow you to easily view sites without images or stylesheets.

    Online Verification Services

    Note: The Web service Bobby has been changed to WebXact.

    Verifcation Software applications

    These are downloads available to evaluate Websites for accessibility.

    Non-English Verification Services

    Top of Page

     

    Different Audiences

    Screen Reader Issues

    This Section: Lists of JAWS Commands | Screen Reader Vendors | Lynx Downloads | Advocacy Groups

    Lists of Jaws Commands

    JAWS is one of the most commonly used screen reader programs. It not only reads Web sites, but reads all text within the Windows system (application menus, document text, help screens, and so forth).

    Screen Reader Vendors

    See Also: Tools Demos

    Lynx Text Browser

    Lynx is an open source application much as in the Linux model. There are lots of sources for downloading Lynx, but some "installs" require more effor to set up than others.

    Advocacy Groups

    Top of Page

     

    Low Vision Users

    This Section: Zooming Simulations | Design Tips   

    Low Vision Design Tips

    Zooming Simulations

    Top of Page

     

    Color Blindness Issues

    This Section: Color Blindness Simulators | About Color Blindness

    Color Blindness Simulators

    About Color Blindness

    Top of Page

    Captioning Options

    This Section: Captioning Software | Captioning How-tos

    Captioning Software

    Captioning How-tos

    Top of Page

    Mobility Impairments

    Mobility Impairment Links

    Top of Page

     

    Cognitive Disabilities

    Cognitive Disability Links

    Top of Page

     

    Other Issues

    Plug-ins and Other Documents

    This Section: P.D.F Files | Microsoft Office | Flash Files

    P.D.F. File Accessibility Links

    Microsoft Office Accesibility Links

    Flash Accessibility Links

    Top of Page

     

    External C.S.S. Tutorials

    Top of Page

     

    Advanced Javascript Issues

    This Section: Pop-Up Windows

    Pop-Up Windows

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

    Top of Page