SMCCD Portal

Accessibility Main
Access Examples

Images
-- Moving Images
-- Image Maps
Tables
-- Layout Tables
-- Data Tables
Text
-- Style Sheets
-- Contrast
Navigation
-- Frames
-- Links
Forms
Media
-- Applets
-- Plug-ins
Text Only Page

 
page tips

Accessibility Issues and Examples

Images used for diagrams, illustrations, pictures or just for fun need to be labeled for content (Alt or Longdesc tags)

Problem: - animated gifs and banners can distract the eye and even cause seizures!

Solution: Move animated gifs to areas separate from text.  Avoid using "blink" tags or any images that cycle at a rate greater than 2Hz and lower than 55Hz.

Moving text away from animated images allows the readers' eyes to focus on the text.

Section 508 Guide:  http://www.access-board.gov/sec508/guide/1194.22.htm#(j)

Image Maps

Images may have "hot spots" behinds parts of the image. When you click on a "hot spot", you are actually clicking on a link. When ever possible you should use a "client-side" image map rather than a "server-side" image map

Problem:  Visually impaired users will require alternative text. Text links are written (redundantly) below the "mapped image".Therefore, image maps need to be labeled differently from simple images.

Label with an Alt tag (Picture of planets in solar system)

Links need to be included in text form below the image to insure accessibility

Example:

Tables

1. Use the table "summary" tags or the CAPTION attribute.

Problem:  Text Reader users can't glance at a page to see if the content is relevant.  They have to read through the content from top to bottom to determine relevancy. People using text readers can understand the content of the table faster if the table has a "Caption".

Example of Fix:   Label the content of tables whether they are used for layout or data.

TIP: If you do not wish the caption to show, turn it white to match your background. Changing its color will not affect its ability to be read by a text reader in the HTML code.

2.  Use % Width (whenever possible)

Problem:  Computer screens and monitors come in all sizes.  Setting absolute table sizes does not allow users to adjust the contents of a browser window to their screens. 

Solution:  When setting table width, set the width to % instead of absolute (pixels) dimensions whenever possible.

Example:

Section 508 Guide:  http://www.access-board.gov/sec508/guide/1194.22.htm#(e)

Tables - Layout (Design)

If using tables to hold page elements in place avoid unnecessary nesting of tables inside one another, which create barriers for JAWS users.

Problem: JAWS, the software that reads web pages for visually impaired users, advances through a page with key commands. Using your "tab" key, you can see how this might cause a user to not find the information in the nested table.

Visually impaired users may have difficulty navigating through the table above; and understanding the relationship / logic of the cell contents.

Solution: 

Use cell spanning (except for data tables) The same design effect can be achieved using a table with spanned columns and rows so the user can tab through the cells in a "linear manner".

Checkpoint 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version)

Tables - Data

If using tables to hold data Use the "ID" and "Headers" Attributes in Tables

Header Cells

Problem 2:   People using text readers will not be able to benefit from the organization of data that you see visually below:

Text Reader users hear a blur of data:

Weekly Lab, Handout and Post Test Assignments 8/16 Chapter 1 families Quiz 1 8/23 Chapter 2 gangs Quiz 2 8/30 Chapter 3 community Quiz 3 9/6 Chapter 4 support services Quiz 4

Solution:  Row and column headers need to be identified for data tables.  Header cell contents will be repeated by “Jaws” (the software that visually impaired users employ) when reading all successive cell contents in its column.

Example of Fix:  Designate the first row as the “header row”. (Check the “header cells” box in the table editor ) to indicate the contents of the data in the column below.

Section 508 Guide: http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

Make table reading sensible

Problem 3:  The JAWS text reader often stops reading the rest of the row when it encounters an empty cell. (In line 1 below, the JAWs reader would miss the rest of the week's schedule.)

Problem 4:  Also, a blind user cannot guess why the cell is empty or has a hyphen. Adding "not available" is clearer than leaving the cell empty.

Alternative text fix:

    Or give a text equivalent.

Office Hours: Tuesday and Thursday 11 a.m. to 12 p.m.
Class Hours:  Tuesday and Thursday 9 a.m. to 11 a.m.

Text

Problem 1:  Style sheets can enable users to define specific viewing preferences to accommodate their disability. For instance, users with low vision may create their own style sheet so that, regardless of what web pages they visit, all text is displayed in an extra large font with white characters on a black background. If designers set up their pages to override user-defined style sheets, people with disabilities may not be able to use those pages.

Solution: It is critical that designers ensure that their web pages do not interfere with user-defined style sheets. In general, the "safest" and most useful form of style sheets are "external" style sheets, in which the style rules are set up in a separate file. An example of an external style sheet is:

Example of source code: <link rel=stylesheet type="text / css" href="section508.css>

508 Standard: http://www.access-board.gov/sec508/guide/1194.22.htm#(d)

Problem 2: Insufficient contrast of text to background can keep users with varying degrees of color-blindness from reading text on your page.

Solutions:

1. Choose a text color that contrasts to your background. (Often a dark gray is less tiresome to the eye than black.)
2. Choose a white background or a background with no distracting lines which might compete with the font lines.
3. Avoid colored backgrounds, example
   Even light colors may appear "neon" on other computers.
4. Avoid black backgrounds,example.
   While popular, a lot of ink is used when printing it out and the contrast may be tiring on the eyes.
5. Avoid “patterned” background, example,
   unless you have tested its appearance on different platforms and monitors.
6. Avoid "somewhat subtle" backgrounds, example.
   if there will be a lot of text on a page. Cute backgrounds are OK for splash pages designed to catch people's interest.

Tips: (for all users)

Fonts - Choose a San Serif font such as Arial or Helvetica which is easier to read on a screen or monitor. (The opposite choice is good for printed materials)

Text Blocks - Reading off a screen is unlike reading print. User's attention span is greatly diminished. Reduce wordiness.

1. Use high content words at the beginning of sentences
2. Limit consecutive lines of text to 3-5 lines (this varies depending on monitor and user set screen prefs.)
3. Use bulleted text to summarize key points.

"How Users Read on the Web" http://www.useit.com/alertbox/9710a.html

Navigation

Navigation from one page to another must always be clear and logical

Frames

Problem: Frames provide a means of visually dividing the computer screen into distinct areas that can be separately rewritten. Unfortunately, frames can also present difficulties for users with disabilities when those frames are not easily identifiable to assistive technology.

For instance, a popular use of frames is to create "navigational bars" in a fixed position on the screen and have the content of the web site retrievable by activating one of those navigational buttons. The new content is displayed another area of the screen. Because the navigational bar doesn't change, it provides a stable "frame-of-reference" for users and makes navigation much easier. However, users with disabilities may become lost if the differences between the two frames are not clearly established.

Title= "Navigation Links" Name= "navlinks"	Title="College Header" Name="header"
	Title="Contents" Name="contents

Solution:  

1. Include text within the body of each frame that clearly identifies the frame. For instance, in the case of the navigation bar, you should consider putting words such as "Navigational Links" at the beginning of the contents of the frame to let all users know that the frame contains navigational links.
2. Use "title" attribute.
3. Limit the number of frames to 2-3. Label the frame so that its function is obvious   content or navigation -- links to main pages in the site (static frame)

Hyper Text Links

Use text that makes sense when read out of context.

Avoid links labeled click here . Label links with the destination name instead.

Tip:  Links that Open a New Window

Opening a new window will allow your user access to two windows (side-by-side viewing) or to view an outside link (a tangent) and then, return to your page. Use _blank in your link editor.

Navigation Bars

Navigation bars (or tables with links to each main page) can be copied to each course page (left margin or top) . For JAWS users, always provide a text equivalent for the button images.

Course Info	Announcements	Lessons	Student Info	Instructor Email

Section 508 Guide:  http://www.access-board.gov/sec508/guide/1194.22.htm#(a)

End of Page

Once a user reaches the end of a page, there should always be a return link. Avoid a “dead end" at the end of a page.

Site Map
Users may need to see the contents of your web site. Use a text outline, (for JAWS users)

Forms

Problem: Currently, the interaction between form controls and screen readers can be unpredictable, depending upon the design of the page containing these controls. HTML forms pose accessibility problems when web developers separate a form element from its associated label or title.

For instance, if an input box is intended for receiving a user's last name, the web developer must be careful that the words "last name" (or some similar text) appear near that input box or are somehow associated with it. Although this may seem like an obvious requirement, it is extremely easy to violate because the visual proximity of a form element and its title offers no guarantee that a screen reader will associate the two or that this association will be obvious to a user of assistive technology.

Solution:  Use Label tags. Use attributes: id=" "  and tabindex=""

Code View

<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="4">
<caption align="left"> Accessible Electronic Form Example </caption>
<tr><td><label for="first">First Name</label></td>
<td><input type="text" name="firstname" tabindex="1" id="first"></td>
</tr>
<tr>
<td><label for="last">Last Name</label></td>
<td><input type="text" name="textfield" tabindex="2" id="last"></td>
</tr>
<tr>
<td><label for="submit">Submit</label></td>
<td><input type="submit" name="Submit" value="Submit" tabindex="3" id="submit"></td>
</tr>
</table>
</form>

Using Dreamweaver

In Preferences, make sure to check "Show attributes when inserting:   Forms"

Insert, Form Area;  Insert a 2-column table; 

1.  Insert a Text Field   (Insert: Form: Text Field)

Insert a text field in the first row, second column of your table. The Input Tag Accessibility Attributes window will open.
Give your text field a nice-name (no abbreviations) label

2. Edit the Form Tag

Select the text field.  File Menu: Modify:Edit Tag or  use the context menu: right-click or Control Click the form :  "Edit Tag Input"

Name: first  (You can shorten the nice-name from "First name" to just "first".)

Enter a form ID and a Tab index number. (You can shorten the nice-name from "First name" to just "first".)
Give each input a sequential tab index number.  Since this is the first field it gets "1".

3. Edit the Label Tag

Select the label of the text field. (e.g. First Name) and modify its tag:

File Menu: Modify:Edit Tag  or   Context Menu: right-click or Control Click the form :  "Edit Tag Input"

OK.

Check the code view to see that Dreamweaver has placed your label in between the <label> tags.

Section 508 Guide:  http://www.access-board.gov/sec508/guide/1194.22.htm#(n)

Media

Applets - Include an ALT tag or alternative text.

Problem: Visually impaired users will not be able to see an applet.

Fix: The <APPLET> tag for Java applets also accepts an "alt" attribute, but it only works for browsers that provide support for Java. Often, users with slower internet connections will turn support for Java applets off. A better alternative for providing textual descriptions is to simply include the alternative text between opening and closing <APPLET> or <OBJECT> tags.

Example: if a web designer wanted to include an applet called MyCoolApplet in a web page, and also include a description that the applet shows a stock ticker displaying the current price of various stocks, the designer would use the following HTML coding for example:

<APPLET CODE="MyCoolApplet.class" WIDTH="200", HEIGHT="100">

This applet displays current stock prices for many popular stocks.

</APPLET>

Section 508 Guide:  http://www.access-board.gov/sec508/guide/1194.22.htm#(a)

Captioning - provide a text alternative.

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

Captioning for the audio portion and audio description of visual information of multimedia presentations are considered equivalent alternatives. This provision requires that when an audio portion of a multimedia production is captioned, as required in provision (a), the captioning must be synchronized with the audio. Synchronized captioning would be required so someone reading the captions could also watch the speaker and associate relevant body language with the speech.

See Carolyn Fiori or Judith Lariviere for captioning assistance.

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

Problem:
While most web browsers can easily read HTML and display it to the user, several private companies have developed proprietary file formats for transmitting and displaying special content, such as multimedia or very precisely defined documents. Because these file formats are proprietary, web browsers cannot ordinarily display them.

To make it possible for these files to be viewed by web browsers, add-on programs or "plug-ins" can be downloaded and installed on the user's computer that will make it possible for their web browsers to display or play the content of the files.

Fix:  This provision requires that web pages that provide content such as Real Audio or PDF (Adobe Acrobat's Portable Document Format) files also provide a link to a plug-in that will meet the software provisions. It is very common for a web page to provide links to needed plug-ins. For example, web pages containing Real Audio almost always have a link to a source for the necessary player. This provision places a responsibility on the web page author to know that a compliant application exists, before requiring a plug-in.

How can plug-ins and applets be detected?
Plug-ins can usually be detected by examining a page's HTML for the presence of an <OBJECT> tag. Some plug-in manufacturers, however, may require the use of proprietary tags. Like plug-ins, applets can also be identified by the presence of an <OBJECT> tag in the HTML source for a web page. Also, an <APPLET> tag may also signal the inclusion of an applet in a web page.

Section 508 Guide : http://www.access-board.gov/sec508/guide/1194.22.htm#(m)

Text Only Equivalent

Follow these simple instructions to provide a link that converts your web page to a text only page.