Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
COLLEGE OF HUMANITIES
Contribute and Accessible Syllabi Workshop How To Guide
Table of Contents
Introduction to Your Website’s Structure
Page 2-3
Working From Home or Wirelessly: Installing and Setting Up VPN
Page 4-11
Working From Home or Wirelessly: Accessing Your Udrive
Page 12-13
Connecting to Your Website with Contribute
Page 14-18
Top Three Checkpoints for a New Page
Page 19
Creating a New Syllabus
Page 20
Editing a Page
Page 21-22
Publishing a Page
Page 23-25
Inserting a Global Link
Page 26-27
Creating a Web Link
Page 28-30
Inserting a File Attachment From Your Computer
Page 31-33
Creating an E-mail Link
Page 34
Creating a List
Page 35
Inserting an Image
Page 36-38
Creating Section Headings
Page 39
Creating Accessible Tables
Page 40
Using the Rollback Feature
Page 41-42
Editing META Data
Page 43-44
Validating a Page
Page 45-47
Page 1
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Introduction to Your Website’s Structure
Reference: Udrive Structure Handout
Each CSUN user has a special storage
space called the “Udrive” which is allotted to
them by Campus IT. Your Udrive sits on a server
on campus and is accessible by any computer
which is part of the CSUN network. Instructions
on accessing your Udrive are in the sections
below.
Default URL:
http://www.csun.edu/~sn5777/
Proposed URL:
http://www.csun.edu/faculty/stephanienguyen/
udrive
Your website is located in a special folder
within your Udrive called “public_html.” Any
files placed inside the public_html folder can be
publically accessed through the internet.
public_html
index.html
syllabi
Inside of your public_html folder you will
find another set of folders which are used to
organize and house all of your website’s files.
Throughout the workshop you will use your
Udrive and its public_html structure to create an
online syllabus and homepage. It is very
important that you utilize this structure
effectively, and no not place your files
haphazardly.
images
documents
templates
cssfiles
Rev. 7/29/08
Page 2
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Introduction to Your Website’s Structure
cont.
If you have already completed the
workshop and are working from your office, feel
free to skip to any of the topics in this guide. If
you are working from home or from your laptop,
it is important that you read the following two
sections before continuing on to the others.
Reference: Udrive Structure Handout cont.
1.
Contribute How To Guide: http://www.csun.edu/~hmnsys/
2.
Resources for building accessible web pages: http://www.csun.edu/accessibility/
3.
Download html templates: http://www.csun.edu/ati/
4.
Software: https://www.csun.edu/itr/downloads/
5.
Syllabus preparation : http://www.csun.edu/facdev/newFaculty_pedagogy_syllabusPrep.htm
Bio Page = index.html = Home Page
Bio Page
Courses
Course 1
SYLLABUS 1
Course 2
SYLLABUS 2
Rev. 7/29/08
Page 3
Department
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN
If you will be working offsite, you will need to
launch VPN in order to access your U Drive.
Enter your
CSUN username
and password
Download VPN software
1. Download the VPN software from campus
IT’s software download website:
https://www.csun.edu/itr/downloads/inde
x.cgi
2. Log in with your CSUN user ID and
password (Figure 1).
Figure 1
3. Select Cisco Systems Virtual Private
Network Client under Windows.
Click here to
download VPN
4. Click Download (Figure 2).
Figure 2
Page 4
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
5. A screen will pop up asking you to either
run or save this file, click on Save (Figure
3).
Click here
to save
6. Select a destination on your computer
where you would like to store the VPN
software (Figure 4).
Figure 3
Click here
to save
Figure 4
Page 5
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
Installing VPN
1. Double click the VPN icon at the location
where you saved it on your computer.
2. A message will pop up asking you to run
this software or cancel it. Select “Run”
(Figure 1).
Click here to
start installer
3. A win zip self extractor window will open,
then select the “Unzip” button (Figure 2).
Figure 1
Click here
Figure 2
Page 6
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
4. Click “Next” on the screen which says
Welcome to the Install shield Wizard for
VPN Client (Figure 3).
Click “Next”
5. You will now see a screen which lists out
the License Agreement. Read the
agreement and click “Yes” (Figure 4).
Figure 3
6. Click “Next” to start the installation of the
VPN software (Figure 5).
Click “Yes”
Figure 4
Click “Next”
Figure 5
Page 7
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
7. The next screen tells you where the VPN
software will be stored on your computer.
Click the “Next” button (Figure 6).
8. The VPN software will now be installed on
your computer.
9. After the installation is complete, you will
see a screen asking you to restart your
computer. Click the “Finish” button on this
screen (Figure 7).
Click “Next”
Figure 6
After your computer has restarted, VPN is now
ready to be used.
Click “Finish”
Figure 7
Page 8
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
Setting Up a New Account on VPN
1. Click on the “All Programs” option on the
Start menu. Select “Cisco Systems VPN
Client”. Now select “VPN Client” from the
list of available options (Figure 1).
2. Select “New” from the toolbar (Figure 2).
Select “All
Programs”
Select “Cisco
Systems VPN
Client”
Figure 1
Click “New”
Figure 2
Page 9
Select “VPN
Client”
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
3. Fill out the following information on the
next screen (Figure 3).
a. In the “Connection Entry” box,
please enter a unique name of your
choice.
Fill in boxes
per step 3
b. Enter a description of your
connection in the “Description”
box. This is optional.
c. In the box “Host” please enter
“vpn.csun.edu”.
d. Select the “Group Authentication”
button.
Click “Save”
when done
e. In the box “Name”, please enter
“csun-vpn”.
f.
Enter “csun-vpn” in the
“Password” box.
Figure 3
g. Re-enter “csun-vpn” in the
“Confirm Password” box.
4. Click “Save” when finished
Page 10
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Installing and Setting Up VPN cont.
Connecting to CSUN from VPN
1. Open the VPN client software.
2. Select “Connect” from the toolbar (Figure
1).
Click
“Connect”
3. Enter your CSUN Account and Password
(Figure 2).
Figure 1
4. Click “OK” when finished.
Enter your
CSUN username
and password
5. Click “Continue” on the next screen
(Figure 3).
Figure 2
Figure 3
Page 11
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
AccessingYour Udrive Home
In order to connect to your Udrive from home, you
must already be connected to the CSUN network
via VPN. To do so, see the guide on page 28.
Right click on
“My
Computer”
For Windows PCs
1. Right click the “My Computer” icon on
your desktop and select “Map Network
Drive” (Figure 1).
2. In the box that says “Drive”, click the
down arrow and select “U:” from the list of
available options (Figure 2).
Figure 1
3. In the box that says Folder, type in
\\udrive\your CSUN Account (Figure 2).
Example: \\udrive\sn12345
4. You will be asked for your CSUN Account
and Password, please enter this
information.
Fill in per
step 2 & 3
5. Click Finish. This will open up a window
with all your files and folders that currently
reside on your CSUN account.
Click “Finish”
when done
Figure 2
Page 12
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Working From Home or Wirelessly:
Accessing Your Udrive cont.
Go button
For Mac OSX
1. Click “Go” on the menu bar at the top of
your screen. Select the “Connect to Server”
option (Figure 1).
2. In the box “Server Address” please enter
“smb://udrive.csun.edu/Your CSUN
Account” (Figure 2).
Figure 1
Example: smb://udrive.csun.edu/sn12345
Click “Connect”
when done
3. Click Connect.
4. The box “Workgroup or Domain”, leave it
blank. In the box “Name”, enter your
CSUN username and enter your password
in the “Password” box (Figure 3).
Enter network
path
Figure 2
5. Click OK.
Enter CSUN
username and
password
Figure 3
Page 13
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Connecting to Your Website with
Contribute
You will need to perform these steps every time you
wish to use Contribute to edit your website from a
new computer.
1. Click the “Create Connection” button from
the Contribute Start Page (Figure 1).
Click “Create
Connection”
2. Click “Next” on the first window that
shows up (Figure 2).
Figure 1
Click “Next”
Figure 2
Page 14
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Connecting to Your Website with
Contribute cont.
3. Enter your website address in the URL
box. (Figure 3).
a. Alternative, type in a partial
address (such as www.csun.edu)
and click the “Browse…” button
(Figure 3) to find your website in
the browse window. Click “OK”
when you have found it.
Enter your
website URL
Click “Next”
when done
4. Click “Next” when done (Figure 3).
Figure 3
Click “OK” when
you have found
your page
Figure 4
Page 15
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Connecting to Your Website with
Contribute cont.
5. Choose “Local/Network” from the first
drop down box (Figure 5).
6. Enter the path to your public_html in the
network path box. This should be
“U:\public_html\” (Figure 5).
Click “Choose”
to browse
your computer
Fill in per
step 5 & 6
a. Alternatively, click the
“Choose…” button (Figure 5) and
then browse your computer for
your public_html folder in the
choose window. Click “Select”
when you have found it (Figure 6).
Click “Next”
when done
Figure 5
7. Click “Next” when done (Figure 5).
Click “Select” when
you have found
your public_html
Figure 6
Page 16
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Connecting to Your Website with
Contribute cont.
8. Enter your full name, using natural
language, into the first box (Figure 7).
9. Enter your CSUN e-mail address into the
second box (Figure 7).
Enter your name
and e-mail
10. Click “Next” when finished (Figure 7).
11. Select “Administrator” from the role menu.
It is critically important that you choose
“Administrator” as your assigned role and
do not leave it on the default setting of
“Publisher” (Figure 8).
Click “Next”
when done
Figure 7
12. Click “Next” when finished (Figure 8).
Choose
“Administrator”
Click “Next”
when done
Figure 8
Page 17
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Connecting to Your Website with
Contribute cont.
13. Check the summary of your information to
ensure that everything is correct (Figure 9).
14. Click “Done” (Figure 9).
You are now connected to your website and may
administer it using Contribute.
Figure 9
Page 18
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Top Three Checkpoints for a New Page
1. Heading 1 <H1>: Your Heading 1 is the
topmost (and therefore most general)
section heading of your page. There can
only be one Heading 1, since it
encompasses the entire page and all the
subheadings underneath it. H1 is used in
conjunction with page title to make the
page searchable by search engines such as
Google.
2. Page Title: Page title is displayed on the
top bar of your web browser, and is a
crucial factor in making your page
searchable. Page title should be equivalent
to your <H1> + any additional information
such as your name, class semester, etc.
Heading 1
3. Filename: Page filename should be short,
concise, all lowercase, and not contain any
special characters such as ampersands (&),
underscores (_), or spaces. This will be part
of the URL that your students will enter to
access your page.
Page 19
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating a New Syllabus
Click here to
create new
1. Browse to one of your already existing
syllabi.
2. Click on the “New …” button (Figure 1).
3. Choose “Copy of Current Page” (Figure 2).
4. Enter the name of your page in the “Page
title” box (Figure 3).
Figure 1
5. Click “OK” to create the page and proceed
to editing.
Choose “Copy
of Current
Page”
Best Practices
Page title for a syllabus page should include
your Heading 1 + any additional information
such as your name and the class semester.
Figure 2
Enter page title
Figure 3
Page 20
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Editing a Page
Click here to
edit page
If you have just created a new syllabus, you will
automatically be in Edit mode. Skip step 1.
Click on the “Edit Page”
1.
button (Figure 1).
2.
At the top of the page is
a toolbar with buttons to make text bold,
italicize, set alignment, change headings,
create lists, and other common functions
(Figure 2).
Figure 1
Change
heading style
Create lists
Make bold
and italicize
Change
alignment
Figure 2
Page 21
Indent and
outdent
Change font
color
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Editing a Page cont.
3.
4.
If you make any
unwanted changes, you can undo them by
selecting “Undo” from the Edit menu or by
pressing CTRL + Z (Figure 3).
Click here
to undo
To save changes, click
on the “Publish” button in the top-left
corner (Figure 4).
Best Practices
It is recommended that you do not copy and
paste text from an outside source into your
webpage, as this will cause formatting errors
and render the page inaccessible. If you
absolutely must do so, contact your web
developer or ATI coordinator for assistance.
Figure 3
Click here to
publish
Figure 4
Page 22
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Publishing a Page
When you are satisfied with the changes you have
made, you can “Publish” your page to save it and
have the changes be reflected on your website.
Click here to
publish
1. Click the “Publish” button (Figure 1).
2. If the window in Figure 2 appears, ignore
the warning and click “Yes” (Figure 2).
Figure 1
Figure 2
Page 23
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Publishing a Page cont.
If you have published this page in the past, you will
simply see a congratulatory message and you will
be done. If this is a new page, you will need to save
the page with a filename before publishing it.
Click “Choose
Folder…”
3. Click “Choose Folder…” (Figure 3).
4. Browse to and open the “syllabi” folder on
your website (Figure 4).
5. Click on the ‘Select “syllabi”’ button.
Figure 3
Click here to
choose this
folder
Figure 4
Page 24
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Publishing a Page cont.
6. Enter the filename in the box (Figure 5).
7. Click the “Publish” button to save your
document and publish it to your website
(Figure 5, 6).
Enter filename
here
Best Practice
Click here
when done
A properly formatted filename must be one
word, all lowercase, and devoid of any special
characters such as tildes (~), underscores (_),
and ampersands (&). It should be concise and
easy to remember. Remember, this is the URL
that your students will be typing in to access
your web pages.
Figure 5
Figure 6
Page 25
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting a Global Link
1. Highlight the Global Link you wish to turn
into a link (Figure 1).
2. Type in your global link text over the
placeholder text (Figure 2).
Highlight
Global Link
3. Highlight your link text again (Figure 2).
4. Click the Link button, then click “Browse
to Web Page…” (Figure 3).
Figure 1
Replace
link text
Figure 2
Link button
Figure 3
Page 26
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting a Global Link cont.
5. Type the URL into the box labeled “Web
Address (URL)” (Figure 4).
a. If you do not know the full
URL/Web Address, enter a part of
it in the box and click “Browse…”
to browse for the exact page
(Figure 5).
Click here to
browse for
your page
Enter URL
here
b. Click “OK” when you have found
your page (Figure 5).
Click “OK”
when done
6. Click “OK” (Figure 4).
Figure 4
Click “OK” when
you have found
your page
Figure 5
Page 27
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating a Web Link
1. Highlight the text you wish to turn into a
link (Figure 1).
2. Click the “Link” button, then click
“Browse to Web Page…” (Figure 2).
Highlight
link text
Figure 1
Link button
Figure 2
Page 28
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating a Web Link cont.
3. Insert the URL into the box (Figure 3).
a. If you do not know the full URL,
type part of it in the box and hit
“Browse…” to browse for the
exact page (Figure 4).
Click here to
browse from
the internet
Enter URL
here
b. Click “OK” when you have found
your page (Figure 4).
Click “OK”
when done
Click here to
choose from
your website
Figure 3
Click “OK” when
you have found
your page
Figure 4
Page 29
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating a Web Link cont.
c. If you are linking to a webpage or
file on your website, hit
“Choose…” and find the file on
your website (Figure 5).
4. Click “OK” to finish.
Select
your file
Figure 5
Click “OK”
when done
Page 30
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting a File Attachment from Your
Computer
1. Highlight the text you wish to turn into an
attachment (Figure 1).
2. Click the “Link” button, then select “File
on My Computer…” (Figure 2).
Highlight
link text
Figure 1
Link button
Figure 2
Page 31
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting a File Attachment from Your
Computer cont.
3. Enter the path in the box marked “File to
link to:” (Figure 3).
a. If you do not know the path off
hand, click the “Browse…” button
to look through your computer for
the file (Figure 3).
b. When you have found the file,
highlight it and click “Select”
(Figure 4).
4. Click the “OK” button when you are done
(Figure 3).
Click here to
browse your
computer
Click “OK”
when done
Figure 3
Select
your file
Click “Select”
when done
Figure 4
Page 32
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting a File Attachment from Your
Computer cont.
5. If the window in Figure 7 appears, click
“OK” to finish inserting the attachment
(Figure 5).
Figure 5
Page 33
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating an E-mail Link
1. Type your email address and highlight it.
(Your email address here is plain text, not
an email link. It could be any text, but we
recommend matching the text to your email
address).
Link button
2. At the top tool bar, click the “Link” button
and select “E-mail Address…” from the
drop down list (Figure 1).
3. Type your e-mail address. e.g.
abc12345@csun.edu – this email address
is your link (Figure 2).
Figure 1
4. Click “OK”.
5. Make sure that your text email address in
#1 matches with your link in #3.
Enter e-mail
address here
Click “OK”
when done
Figure 2
Page 34
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating a List
1. Click on the area where you want your list
to begin.
Bulleted list
Numbered list
2. Select a numbered list or a bulleted list by
clicking on one of the buttons in the tool
bar (Figure 1).
3. Type the text after selecting the type of list
desired.
Figure 1
OR
1. Highlight multiple lines of text.
2. Select a numbered list or a bulleted list by
clicking on one of the buttons (Figure 1).
Choose
list style
3. Additional formatting options can be found
by clicking on “Format”, then “Lists”, and
then “Properties” (Figure 2).
Figure 2
Page 35
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting an Image
1. Click on the area within your document in
which you want the image to be placed.
Insert button
2. In the topmost menu bar, click on “Insert”,
then select “Image” (Figure 1).
a. Inserting an Image from your
computer:
Figure 1
i. Select “From My
Computer” from the menu
(Figure 1).
ii. Find the image file on your
computer and double-click
it (Figure 2).
Click “Select”
when done
Figure 2
Page 36
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting an Image cont.
b. Inserting an image from your
website:
i. Select “From Internet” from
the menu (Figure 1).
ii. Find the image file on your
website and double-click it
(Figure 3).
Select your
image
3. Type an alternative text description detailing
the image and click “OK.” (Figure 4).
Click “OK”
when done
Figure 3
Figure 4
Page 37
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Inserting an Image cont.
4. Your image will now be inserted into the
spot chosen (Figure 5).
Accessibility Checkpoint
Image descriptions are necessary for web
accessibility validation. Without them, a
disabled user will be missing information that
would have been delivered visually to other
viewers. This text is what a screen reader will
recite to its users, and can be previewed by
placing the mouse cursor over the image while
in a web browser or in preview mode (F12). If
the image is instructionally related, its
description must convey the same message as
the illustration.
Image has been
inserted
Figure 5
Page 38
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating Section Headings
1. Place your cursor where you want the
heading to be placed.
2. Click the style box and choose any of the
styles named “Heading…” from the drop
down menu (Figure 1).
Style box
3. A new heading will be placed where your
cursor is.
Accessibility Checkpoint
Each section of your webpage should have its
own heading, and each heading should be
numbered according to level of importance.
Think of it as an outline: there is only one
Heading 1 (the page title), each major section
has a Heading 2, each section within those have
a Heading 3, and so on.
Figure 1
Page 39
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Creating Accessible Tables
1. Place the cursor where you want the table
to be inserted.
Table button
2. From the topmost toolbar, go to “Table”,
select “Insert”, then “Table” (Figure 1).
3. Configure your table by setting up the
number of rows and columns, size, and
header position (Figure 2).
4. Click “OK” when you are done (Figure 2).
Figure 1
Best Practices
Oversized tables can break parts of the
webpage by stretching the column too wide. To
avoid this, do not place tables in the far left and
right columns, and only set them to the default
width in the main column. In addition, tables
should only be used for spreadsheet style data
entries, and not for creating page layout.
Accessibility Checkpoint
Column and row headers are extremely
important for accessibility. Without them,
screen readers are unable to read tables in the
right order, and so tables become unintelligible
to people who are visually impaired. Make sure
that all your tables have proper headers.
Figure 2
Page 40
Click “OK”
when done
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Rollback Feature
File button
We recommend that you Publish (Save) frequently
while working in Contribute. In this way, you can
roll back to one of your previous Publishes if you
make a mistake.
1. To use the rollback feature, a page must
have been published (saved) more than
once.
Select
“Actions”
Select “Roll Back to
Previous Version…”
2. Use the top most menu bar and click
“File”, select “Action”, and then hit
“Rollback to previous version” (Figure 1).
Figure 1
Page 41
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Rollback Feature cont.
3. Select the desired version according to date
and time (Figure 2).
Select rollback
version
4. Once you select your version, a preview of
that version will be loaded. (Figure 2).
5. Click “OK” to accept your choice.
View preview
Figure 2
Page 42
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Format
button
Editing META Data
1. On the top most menu select “Format”,
select “Keywords and Description” from
the available options (Figure 1).
2. We have a pre-populated box with the
required information (Figure 2).
Select “Keywords
and Description…”
Figure 1
Enter keywords
Enter description
Figure 2
Page 43
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Editing META Data cont.
3. Please replace the categories (including
“<” and “>”) in the keyword box with your
real name, department and college. Fill in
the description box with the description of
your course (Figure 3).
Click “OK”
when done
Best Practices
Please ensure that the Keyword box has less
than 200 characters and the description box
contains less than 1000 characters. Keywords
and descriptions are indexed by search engines.
These are meta data that will increase the
searchability of your page.
Figure 3
Page 44
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Validating a Page
Page validation is done using the “Web
Accessibility Toolbar” by AIS. This toolbar is only
for Microsoft Internet Explorer. Contact your
system administrator if you need this installed on
your machine.
WAT Toolbar
1. Open the page using Internet Explorer.
Figure 1
2. Locate the AIS toolbar on the Internet
Explorer (Figure 1).
3. Click on Validate, select “W3C HTML
Validator”, and then select “Validate
HTML” (Figure 2).
Validate button
Select “Validate
HTML”
4. The W3C HTML Validator will open and
evaluate your page for problems with the
code.
Figure 2
Accessibility Checkpoint
HTML code runs in the background of
Contribute and is the language in which web
pages are written. Sometimes the changes you
make can cause HTML errors, which need to
be corrected manually. If the W3C HTML
Validator returns errors in your pages, contact
your local web developer or ATI coordinator
for assistance.
Page 45
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Validating a Page cont.
5. Click on Images, then select “Toggle
Image/Alt” (Figure 3).
Images button
6. Any images on your page, such as the
CSUN wordmark (Figure 4) will be
replaced by its alternate text description
(Figure 5).
Figure 3
Accessibility Checkpoint
Image descriptions are extremely important for
web accessibility. Without them, a visually
impaired user will be missing information that
would have been delivered visually to sighted
viewers. Check to make sure every image on
your page has a description, and make sure that
it contains all information about the image
itself and the context it is used in.
CSUN wordmark
before toggling
image/alt
Figure 4
After toggling,
ALT text replaces
image
Figure 5
Page 46
Contribute and Accessible Syllabi Workshop How To Gui de – College of Humanities
Validating a Page cont.
7. Click on “Colour”, then select “Juicy
Studio Contrast Analyser”, then “Contrast
Analyser – all tests” (Figure 6).
8. This will open a new window which shows
the results of the color test (Figure 7).
Colour button
Select “Contrast
Analyzer - all tests”
Accessibility Checkpoint
Figure 6
Color contrast is an important element in
accessibility because visually impaired users
may not be able to distinguish between color
combinations which lack contrast. For
example, black or white text against a gray
background may not be legible. Scroll through
the Colour Contrast Analyser and look for
color combinations which fail the test. If you
are unable to locate and fix the instances
yourself, call your local web developer or ATI
coordinator for assistance.
Figure 7
Page 47