UW Oshkosh webpages must conform to Priority 1 of the W3C web accessibility guidelines, and are encouraged to conform to Priority 2 as well as Section 13.5 of priority 3. This tutorial will provide examples and techniques for achieving these goals. The quick start guide is a scaled down version of this page, for designers that want less detail and fewer options.
Provide an Alternative representation for every
non-text element -
Ensure all information conveyed with color is also available
without color -
Clearly identify changes in the natural language -
Organize documents so they may be read without stylesheets
-
Ensure that equivalent pages are updated when the main page
is -
Avoid causing the screen to flicker -
Use the clearest language appropriate for a sites content
-
Provide text links for active regions of image maps, and use
only client side image maps -
Avoid the use of Tables for layout -
Avoid the use of frames -
Applets and scripts -
Validation -
Images are a luxury of the sighted, and people browsing the web with a text-only browser or a text to speech reader cannot decode what is in an image without an alternative representation. Elements that need alternative representation include images, frames, scripts, audio, and video.
Many misinterpret the standard requiring alternative representations as discouraging to the use of multimedia on a web page. This is exactly the opposite of the truth. Other standards at Prioritys Two and Three require the use of visual aids and other media types when they may help someone understand the content. You don't need to redesign your pages to remove images and other media, you only need to make sure the page makes sense without it.
Images
can be represented with the addition of an alt tag.
Dreamweaver provides a field in the image properties window that allows you
to automatically insert alternative text.
The syntax for inserting an alt tag is:
<img src="banner.jpg" alt="This is my alt tag.">
Sometimes images are too complex to explain with only the few words allowed in an alt tag. Maps and graphs are good examples of images that require a long description. The tag <longdesc> allows designers to provide as large a description as necessary. Another method of providing detailed information is with a "D" link. For more information check out building a good alt tag.
Digital video needs to include a captioned version and a transcript of the video. It is fairly easy to place a caption within a video while you are editing it. The most popular video editing software includes simple to use tools for this purpose. There currently are no technologies that can create a transcript for you. You can place a "transcript" link next to any video you may have on your pages.
Sound needs a textual version included on the page. Include a transcribed version of any sound included a page.
Adobe's Portable Document Format (PDF) is one of the most popular methods instructors use to place course readings and documents that must retain thier formatting. Unfortunately, PDFs, depending on how you create them, may not be accessible.
When you scan an article and convert it to PDF, you are taking an image of that page. The letters on the page are merely pictures of letters, not actual ascii based text. This makes it extremely hard for readers to see the text; most think a pdf is just another image.
There are many advantages to PDF, the biggest being that the document still looks like a photocopy. People tend to see them as more legitimate than a text only copy of the article. It is perfectly acceptable to include a PDF in your site as long as you also include a text only version. Adobe has a great resource for making PDFs more accessible as well.
The conversion from Word is the easiest. You will need to do two conversions from Word; one to PDF, and one as text. Place links to both versions on your page.
PDF - On IDEA lab computers, and in many other labs on campus you can create a PDF by choosing Print from the File menu. One of the printer choices will be "Adobe PDF Writer". When you print to this "printer," a save file dialog box will open. Name the pdf, and choose a location to save it.
Text - Create your text only document by choosing "Save As..." from the file menu. Choose "Text only with line breaks." Name the file, and choose a location to save it.
The IDEA lab has an application called PageManager that allows users to manage different versions of a scanned document simultaneously. When a document is scanned it holds the document and renders it as alternate versions on the fly. The easiest way to get text only and PDF versions of your scan is through this Program.
Create your PDF by choosing Print from the File menu. One of the printer choices will be "Adobe PDF Writer". When you print to this "printer," a save file dialog box will open, name the pdf, and choose a location to save it.
Creating a text only version requires one click. from you. There is a buton on the task bar that looks like a notepad and pen. Clicking on this button will open a text only version of the document. Save this, run it through the spellcheck in Word, and post it.
There isn't an easy way to convert existing PDFs to text versions. The process of doing this conversions requires you open your pdf one page at a time, save it as a .TIF, export it to PageManager, use the text tool to export to text. Experience shows that it is faster to rescan and recreate the pdf and text versions from scratch.
Color blindness affects 5% of the US population. Make sure instructions and content can be understood when the page is viewed in black and white. Avoid using elements that require users to make choices based on the color of your content.
The most prevalent color blindness is red/green. A person with red/green color blindness will see these two colors as shades of gray. The line:
Red items are assignments that are due on Friday. Green assignments are due in two weeks.
may appear to a person with red/green color blindness as
Red items are assignments that are due on Friday. Green assignments are due in two weeks.
Let your audience know when you change from English to another language. Screen readers sound awfully funny when they are reading German text with English phonics rules. The code for this is
and then he said <span lang="de"> Wir muss allen keggeln gehn.</span>
Some common codes are:
en - English
fr - French
sp - Spanish
de - German
ace - Chinese
A full list of country codes includes the 2 letter and 3 letter abbreviations for all languages that have been registered.
Style sheets are documents that allow designers to apply a set of designs to every page on their site. When the stylesheet is changed, every document in the page changes as well. Style sheets allow easy modification of pages and make it easier for users to change how they see your page.
If you are using stylesheets preview your pages in a browser with stylesheets turned off to ensure the page can still be read.
See the UW Oshkosh Plan with style sheets turned off.
Some designers work around accessibility issues by providing a "text-only version" of their pages. A major complaint and concern of persons using alternate technologies is that this version of the page is not updated as often.
If you have content that automatically updates, be sure your alternate version updates as well.
Some programmers utilize scripts to include a strobe effect in their pages. This may trigger epileptic seizures in some users. Do not use a script or attempt to achieve a flicker effect.
Make sure the content of your page is appropriate for your intended audience. For example, don't use complex technical jargon on a page designed for an undergrad Intro to Literature course.
Many designers incorporate navigation elements into a banner at the top of the page or on a sidebar. It is important to include text links on the page as well.
It is important to only use client side image maps (maps that are included in the page.) Some text browsers may not be able to access a map that resides on the server.
Some screen readers cannot cope with image maps and will skip over them. This means the user does not have access to these links unless a redundant link is provided.
Example: The page you are reading uses an image map in the top banner to define the navigation buttons. The bottom of the page lists every link in the banner again to ensure users can access the entire site.
Tables are included in html to allow designers to convey tabular data, such as a chart or class schedule. Designers have begun using tables to place elements on the page.
Problems arise when screen readers and text browsers try to display the table. Both technologies linearize the table cells and display them in order from left to right top to bottom. This can cause readability problems in certain instances. The example below shows one such instance.
|
Return to the main page
|
A day by day list of what will be covered in lectures
|
Syllabus, readings, assignments
|
This is a very common navigation design, with a link to a page and a description of the page displayed below. When linearized, this table will display as :
Home Class Schedule Class Documents Return to the main page A day by day list of what will be covered in lectures Syllabus, readings, assignments
The meaning of the structure is lost when the table is displayed in this manner.
Please see the Getting away with using tables for layout page for examples of how to ensure your document doesn't lose readability when displayed with out a table structure.
Frames pages have become a popular method of providing navigation. Unfortunately, because of how they are constructed, they are rendered useless in text based browsers and screen readers. It is best to avoid the use of frames entirely. If you must use frames, however, there are a few things that you can do to make the page more accessible.
Many designers use the noframes tag to tell users that they need to download a browser that supports frames. This is not an acceptable use of the noframes tag, and does not bring your page into compliance. The noframes tag provides alternate content for browsers that do not support frames. To properly use this tag, you must include an exact duplicate of the pages displayed in the frames.
Frames based sites can be converted easily with Dreamweaver's template feature. Please access the tutorial page on converting a frames page.
If you use applets and scripts, ensure your page works with applets and scripts disabled. The most common scripts used are hit counters and rollover buttons. If you cannot make your applets or scripts accessible, you must provide an accessible version of the page.
- Main Page - UW Oshkosh Plan - Quickstart Page - Priority One Tutorial - Building Good Alt Tags - Converting a Page from Frames - Training - UW Oshkosh - Sitemap and Accessibility Features of this Site -
. 
. 