CMS has been configured to make accessible Web pages. Accessible Web pages are accessible by all persons, regardless of any disabilities.

In order to assist in making quality content, all CMS content is passed through HTML Tidy before it is rendered to a visitor. HTML Tidy automatically fixes some mistakes that we might make in web page design. It does not, however, fix everything.

Please consider the following when creating Web content using CMS.

By federal law, federal agencies and departments must provide accessible content--this includes Web sites.

Reference: Rehabilitation Act Amendments (Section 508) and Web-based Intranet and Internet Information and Applications

Note that it is not acceptable to have inaccessable internal Web sites even though no one in the organization currently suffers from disabilities that make the content difficult to use.

To top

Take advantage of headings! Use them to create an outline of the page without skipping levels.

"The appropriate use of heading levels will improve the accessibility of your document.use. For example, use H2 to indicate a subsection of H1; do not use headers for font effects.You should nest the headings on a page in order

"Headings should be applied logically just as you would apply heading levels in an outline. Theoretically, if you extracted the headings from a web page that uses headings, you would have an outline of the page. You should nest the headings on a page in order. The heading structure may be used by some user agents to improve or add useful navigation features, or to abstract the document. The appropriate use of heading levels will improve the accessibility of your document.use. For example, use H2 to indicate a subsection of H1; do not use headers for font effects," [Use header elements to convey document structure, 3 Dec. 2008].

It is tempting to use a "higher level" of heading (or one that shows smaller text) in order to achieve a particular "look." However, this practice should be avoided (actually, if you do it, the content might someday be modified to follow this guideline anyway ... ).

Headings are just one tool used by some web technologies in order to make the page more accessible. They can be used to create an outline of the page, helping visitors gain an understanding of the page as a whole, and skipping heading levels results in a broken outline. Headings may also be used for navigational purposes.

So, keep in mind, no matter how much you want to skip from h1 to h4, just don't do it.

For the same reasons, you should NOT use headings to style text. Headings should be used like an outline for the page, NOT font effects.

Reference:

• Nest headings properly
• W3C guideline 3.5 - header use
• Use header elements to convey document structure

To top

A general guideline for using images on the web is as follows:

If a page is not usable without the image, it might not accessible.

What this means is that you have any information contained in the image, extra steps may be required. The image needs an "alt" attribute that describes the meaning/function of the image in detail OR the information conveyed in the image needs to be presented in text another place on the page. Learn how to add alt text in CMS.

Alt examples

Images to decorate, fill or space text
If the page would not lose any meaning if the images were missing, leave alt text blank or insert a space, such as alt=" ". Alt text will be read to visitors using screen readers and alt text like "spacer" or "decoration" may be confusing.

Images to convey a feeling or emotion
The most difficult alt text to author is for images used to convey subtle meaning. For example, inserting a photo of the NDSU Campus Gates may have blank alt text if it is used purely for decoration or filler, or alt text of "Welcome to NDSU" if it is inserted to give visitors the subconscious message of "welcome."

Images to provide information
If the image carries significant meaning, the meaning must be presented in text somewhere in the page or as alt text.

For example, if the image contains a map of NDSU campus with wireless access points highlighted in yellow, a solution may be to insert a bulleted list of wireless access point locations after the image. In this case, the alt text may be blank because there is no need to duplicate the content. The text-based list of access points might prove useful for all visitors, not just those using assistive techologies.

For another example, if the image contains the name of your department in text size over approximately 14pt, along with the department logo, providing alt text of your department name may be the best solution. If the image shows the full name of your department, such as "Information Technology Services," you should not abbreviate the alt text to "ITS" or visitors using assistive technology will miss the information provided by the image, which is your full department name.

To top

Consider the following example, relevant to sighted visitors only.

Here is a screen capture showing a site found recently at NDSU (dramatically reduced in size to be visible on your screen all at one time) next to a simulated screen reader output. Lines have been added to assist with connecting the screen reader version with the graphical browser version.

Understandably, the above text is not legible, but it should give you a general idea of how much TEXT information is visible in the images that a visitor may be interested in reading. Below, zooming in on the simulated output, the shear volume of information not available to visitors using assistive technology should become apparent.

Not only is the content inaccessible to unsighted visitors, but sighted visitors may struggle because the text suffers from image compression (meaning the letters aren't crisp and easy-to-read), and the text is not resizeable for visitors who are unable to read the tiny text.

When using images on a web page, keep in mind that colorblind persons may visit the website and poorly designed images may become unusable.

Consider the following example:

---

This is very important: Change the "Normal" to "Three" for the GREEN ARROW ONLY. This will delete your work if you change the RED arrow.

---

What a visitor with Deuteranope vision will see:

This is very important: Change the "Normal" to "Three" for the GREEN ARROW ONLY. This will delete your work if you change the RED arrow.

---

This is certainly bad. This poor visitor either has to find a friend to see the colors or hope they don't accidentally choose red and delete their work.

Keep this in mind when using images. Do not rely on color to be the only indicator of important information. Use shape/word references in conjunction with color indicators.

To top

Images are only one type of multimedia. The guidelines for other types, such as videos or podcasts, are similar to those for images discussed above. Whenever multimedia content is inserted, the information contained in the multimedia must be presented in additional way(s).

For example, a transcript is a functional alternative for a podcast. For videos, a transcript (synchronized, if appropriate) is a functional alternative.

These alternative formats may be of assistance to "normal ability" site visitors in addition to persons using assistive devices. For example, including a transcript before/after a video tutorial allows a visitor to print the page and follow the tutorial at her own pace later on, without an Internet connection to view the video.

Dos and Don'ts for links

1. Do NOT use common phrases such as "click here" or "here" for link text!!
   • Link text should make sense *out of context*
2. Do NOT use the same link text to point to two different pages
   
   • Link text should be unique if the target page is unique
3. DO separate links using something other than white space (white space includes carriage-returns and table cells). Examples of good separators are
   
   • Text in a paragraph
   • Explanatory text before/after each link
   • Bullet/ordered lists
4. DO use a link title that explains what purpose the link serves

Bad	Good
Click here to download the latest version of anti-virus	Download the latest version of anti-virus
Download anti-virus -or- Download anti-spyware	Download anti-virus -or- Download anti-spyware
Download anti-virus Download anti-spyware	Download anti-virus Download anti-spyware

To top

Generally, you should avoid using tables for layout. Though they can be made to be accessible, a fair amount of knowledge and planning is required to do so.

In the case of tabular data, CMS enables you to enhance accessibility by adding header cells and declaring their scope. Learn how to create header cells in CMS.

For more information on accessible tables, please reference WebAIM: Creating Accessible Tables.

As explained at www.access-board.gov, careful HTML coding must be in place in order to assure that people using assistive technology are able to access information. These special concerns center around associating a form label with the form input beyond visual cues.

For this reason, the CMS mail form content element has been carefully configured so the form displayed to Web visitors is as accessible as possible. This does come at a cost of flexibility for layout. In most cases, there will be work-arounds for this loss of flexibility. Please understand that this inflexibility is not necessarily desired and if a more flexible--but still accessible--option comes available, it will be considered for implementation of CMS at NDSU.

Work-around examples coming soon.

Resources to author accessible documents, such as PDFs and DOCs.

• Consideration of alternative formats in general - http://www.webaim.org/articles/#richmedia
• North Dakota ITD resources - http://www.nd.gov/itd/software/ada-issues.html
• Adobe booklet on PDF accessibility - http://www.adobe.com/products/acrobat/access_booklet.html
• Consideration of PDF documents - http://www.usability.gov/pdfs/chapter3.pdf from http://www.usability.gov/pdfs/guidelines.html

To top

Evaluate adherence to Section 508 standards at www.section508.info .

Evaluate table accessibility by previewing how your table looks in a screen reader using the Tablin test or find out more about Tablin.

Evaluate adherence to Web Content Accessibility Guidelines (WCAG) using

• the TAW tool
• the WebAIM WAVE tool
  • To evaluate any page on-the-fly, bookmark
    javascript:void(window.open('http://wave.webaim.org/report?url='+escape(window.location)))
    in your browser and select the bookmark when you are viewing the page you want to test
• the Internet Explorer accessibility toolbar or the Mozilla/Firefox/Seamonkey/Netscape web developer extension

Evaluate usage of color on a page and how it may hinder people with colorblindness with the Vischeck test or use the Cambridge Vision and Hearing Impairment Simulator to understand the effects of other vision (and hearing) disabilities.

Learn about testing methods from the University of Texas usability testing methods presentation or check out the MIT usability guidelines checklist.

Use a screen reader emulator, like Fangs, available for Mozilla/Firefox/Seamonkey.

Note that these, and all, tools are not able to guarantee that your site is accessible even if they report no errors. Several "accessibility checks" cannot be computer automated, such as verifying that alt text include relevant information. However, several tools will list the "manual checks" that you should perform after automated checks are complete.

Other resources

• About Section 508 - http://www.jimthatcher.com/webcourse1.htm
• Consideration of screen readers - http://www.webaim.org/techniques/screenreader/
  • Note, the "HOW" section provides very good insight as to why web guidelines are important to screen readers!