Cascade Tutorials
Make Pages Accessible
Make sure all of your pages have a unique Title similar to the following:
SIUE Web Publishing - Building Accessible Web Pages
In Cascade this field can be edited by selecting a page, clicking the Edit tab, and then editing the content within the 'Title' field in the Inline Metadata area.
The 'Title' should include all of the content from the first h1 element (aka the section header for your page) and preferably the first h2 tag on your page. The h1 element in cascade will always be the text in the gray bar just underneath your header. The more descriptive your title, the more likely you are to show up high on the list within search engines.
In the previous example, the h1 element would be "SIUE Web Publishing" and the h2 element would be "Building Accessible Web Pages".
Precede your ordered or unordered lists with a header element
Ordered or unordered lists need some type of a navigation bar for users to find the list more easily if they aren't using a mouse or are viewing the site in text-only. In the following example, you would select the text "Main Site Navigation" and choose the proper header element (almost always h2) from the text style drop down box. This is already done in your components and only applies if you have made changes to them.
Main Site Navigation
- Apply Now!
- About SIUE
- Contact SIUE
- Maps &Directions
- Search SIUE
If you would prefer not to show the header on the page, you can hide it using styles. This allows you to leave the appearance on your site you already have, while increasing your site's accessibility. This is usually only needed for components as you would most likely want the text to show up in the body of your page. The example below would need to be done in html view within the editor.
<h2 style="position: absolute; left: -200em; top:-20em;">Main Site Navigation</h2>
Properly use header elements to define your content
Make sure that when you use header elements, that they are properly structured or nested. Such as:
h1…h2…h3
or:
h1…h2, h3, h3… h2, h3, h3
not:
h2…h1…h3
or:
h2…h1, h3, h3…h3, h1, h2
Always include alternate text for your images
Make sure you have included alternate text for all of your images in Cascade that accurately describes them. To add alternate text to an image, when inserting it into a page, simply enter text in the 'Alternative Text' field after you have selected the image. To add alternate text to an existing image, simply right click on the image, choose 'Insert/edit image', and enter the appropriate text into the 'Alternate Text' field.
Properly Label all of your form controls
If you insert a form into any of your pages, such as a contact form, make sure that any select controls (drop down box), radio buttons, check boxes, or a field that accepts text is properly labeled. The label "for" attribute should have the same value as the "id" attribute. The following examples should cover anything you will run into.
Text Box: These fields need to have a value attribute as well as an id attribute that matches the label. They also need a place holder value. This value can be set to disappear once clicked by using: onfocus="this.value='' "
<input type="text" id="realname" value="Enter your name here" onfocus="this.value=''"><label for="realname"> Name</label>
Select Controls: Select controls need one id attribute that matches the label as well as one of the options selected by default with selected="selected".
<label for="color">What is Your Favorite color?
<select name="color" id ="color" >
<option value="blue" selected="selected">Blue</option>
<option value="red">Red</option>
</select>
</label>
Radio Buttons/Check Boxes: Radio buttons and checkboxes need one id attribute that matches the label as well as one of the options selected by default with selected="selected".
<legend>What is your favorite color?</legend>
<ul>
<li><label for="blue"><input type="radio" name="color" id="blue" checked="checked" /> Blue</label></li>
<li><label for="red"><input type="radio" name="color" id="red" /> Red</label></li>
</ul>
Text Area: Text areas need a label corresponding to an id attribute as well as a place holder for the text which is within the textarea tags. In this example, the place holder is
"Please Enter Your Comments."
<label for="comments">Comments</label>
<textarea name="comments" id="comments" rows="10" cols="40" onfocus="this.value=''">
Please Enter Your Comments.
</textarea>
Here's an example of a properly constructed form.
Linking to Documents
Anytime you want to put a document on your website it will need to be converted to a .pdf format so it can be accessible to everyone. If you only put Microsoft Word documents on your webpage, then anyone who does not have Microsoft Word can not view the files. Adobe Reader is a free download that most people already have installed on their computers and Adobe Reader is what people use to view .pdf files.
If you absolutely must put Microsoft Word documents on your site, you must also provide a .pdf version of that document.
