WEB ACCESSIBILITY TRAINING

Luminis Web Page Editing – Best Practices

Properly title all of your pages

Make sure all of your pages have a unique title similar to the following: SIUE Web Publishing ¬Building Accessible Web Pages In Luminis this field can be edited by clicking the “i” icon next to the name of the document, and then editing the content within the title field. This title should also include all of the content from the (one and only one) h1 element and preferably the first h2 tag on your page. The h1 element in luminis will always be the text in the gray bar just underneath your header. It’s important to make sure that the title is descriptive and unique so the users can easily see what the page is about. In addition, 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 of navigation 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, this can be difficult without a way to easily skip through the page to the navigation. In the following example, you would select the text “Main Site Navigation” and choose the proper header element (usually 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 or have added a navigation list in the body of your page.

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 luminis that

accurately describes them. To add alternate text to an image, when you insert it into a document, simply enter text in the alt text field after you have selected the image. To add alternate text to an existing image, simply right click on the image, choose image properties, and enter the appropriate text into the alt 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 checked=”checked” if it is a radio button.

<input type="radio" name="color" id="blue" selected=”selected “/>

<label for=”blue”>Blue</label>

<input type="checkbox" name="color" id="red">

<label for=”red”>Red</label>

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"></label>

<textarea name="comments" id="comments" rows="10" cols="40" onfocus="this.value=''"> Please Enter Your Comments.</textarea>

FAE – How To Use it effectively

What is FAE?

FAE stands for Functional Accessibility Evaluator. It was developed at the University of Illinois to assist higher education institutions with designing web pages that are more accessible to everyone, including those with disabilities. It looks for particular best practice techniques that should have been used when your web page was designed.

How does this apply to Luminis?

Even though a large part of your site was designed by Marketing and Communications       

and the FTC,westillneed to check the bodyand componentsifthere have beenany changes since your site was built. There is always a good possibility that you will find something wrong with your page that we need to fix (such as problem in the header or the way the template was designed). If you DO find a problem with your page that is out of your control, please let Curt or Mark know and we will fix it as soon as possible.

How to run FAE

Open your favorite web browser and type in the following URL in your address bar:  http://fae.cita.uiuc.edu

Go ahead and register for an account so you can have all of the options available to you. Once you have done so, login.

There are four main parts to the page before you can receive a report. The URL you are scanning, the title, the depth, and the links to follow.

URL

Make sure to enter the exact URL of the page or directory you would like to scan. You can enter as many URL’s as you like in the box. Personally, I recommend no more than one at a time for speed. If you do enter more than one URL, you can separate them by spaces or by line.

Report Title

This can be whatever you would like the title of the report to be. It is mostly useful for viewing archived reports.

Depth of Evaluation

The “Top¬level page only” option scans a particular page and is the quickest. The second and third level options are effective but will also scan any pages on another site that you have linked to. You will be given the option to view a list of pages so that you can check the accessibility of each page individually and view only those reports that apply to your site.

Follow Links in

This option allows you to follow links outside of the top level SIUE domain. This only applies if you are scanning more than 1 page deep into a site. Just leave the default on this checked.

After you have everything set the way you would like, click the “Evaluate” button.

When your report comes up you will have a set of scores in the following categories broken down below. You’re aiming for a score that is 100% pass with 0% warn and 0% fail. Warnings aren’t always bad. If you receive a warning, look to see why, it may be something wrong with the evaluator and not really an issue with your page.

If you chose to scan an entire directory, the scores you receive apply to all of the pages within that directory and any pages on another site that are linked from pages in that directory. To check individual pages, click on the “List of Pages: “ link on the left side of the page. This will allow you to view reports on only the pages that you are responsible for. It also helps to see the different scores for different pages, as some pages may have different errors than others.

Below we’ll break down the different categories and what each means.

Navigation & Orientation

This category looks at the way your page is setup and checks that it is easily navigable on different screens and devices, including text only views. Below is a list of things to look for.

• Follow the title rules listed earlier in this tutorial
• Do not add more that 1 h1 element (there is already one in the template)
• Make sure your components that use ordered or unordered lists for navigation are preceded with a header
• Properly nest your header elements
• Follow the rules for form controls listed earlier
• Always use the table wizard or insert table option to make your tables and define its properties

Text Equivalents

This category primarily checks that there is alt text on all of the images. If you add any of the following tags in the html view of the editor, make sure to include alt text on those as well.

<embed> should not be used at all

<applet code=”applet.class” width=100 height=100 alt=”my applet”>

<param name=”text value=”Hello”>

<p>hello</p>

</applet>

<object data=”trees.png” type=”image/png” alt=”trees”>

Scripting

This only applies if you are doing any scripting inside your page. These functions are not recommended because they could hide important data from the user. The following are examples of calls to predefined functions you should not use.

onmouseout:  <img src=”sunbear_vig.jpg” alt=”Sun Bear” onmouseout=”alert(‘It’s a sun bear!’)” />

onmouseover:  <img src=”sunbear_vig.jpg” alt=”Sun Bear” onmouseover=”alert(‘It’s a sun bear!’)” />

Styling

Here FAE is primarily looking for any improper inline styling in your page. The following is a list of tags to stay away from and their correct reciprocals if you use the html view to edit pages in luminis. If you are using the WYSIWYG view, luminis takes care of this for you.

FAE is also looking for nested tables. As long as you don’t put a table inside another table, you should be in good shape. If you do come across that scenario, come up with a better way to organize your data with separate tables or perhaps an altogether different format.

HTML Standards

You shouldn’t have to worry about this category. These standards are already built into the templates. If you get anything other than a 100% in this category, please let Curt or Mark know.

Questions

If you can’t figure out what a certain area addresses, you can click on the appropriate category and then the “Best Practices” link next to the subcategory. If you’re having no luck at all you can always contact Curt or Mark.