Closing the Circuit:

Accessibility from the

Ground UpMERLOT International

ConferenceAugust 2004

Introduction• This presentation deals with the

creation of a new module, step-by-step, taking accessibility into account along the way.

Introduction• This module, “Federal Court

Concepts”, was designed as a model for accessible modules.

• The subject matter introduces students to the federal court system.

Introduction• The process of creating the module

was extensively (and sometimes painfully) documented over several weeks.

Introduction• The goals for creating this module

were as follows:– Pedagogical Value– Accessible Design– Attractiveness and Usability– Putting Research into Practice

Phase One – 5 W’s and an H

• The first phase of module creation was determining the most basic issues:– Who?– What?– Why?– Where?– When?– How?

Phase One – 5 W’s and an H

• Who?– Curtis Edmonds, J.D.

• Background in content development• Experience in designing accessible web

content• Familiarity with MERLOT and modular

educational design

Phase One – 5 W’s and an H

• Who?– Marsha Allen, CATEA Web Designer

• Vast expertise in accessibility and usability

• Second set of eyes looking at content• Innovative design technique

Phase One – 5 W’s and an H

• What?– The module, as originally designed,

would discuss the federal court system.– Currently, MERLOT contains few

modules about this branch of government.

– Example: http://www.oyez.org

Phase One – 5 W’s and an H

• Why?– Prior modules created by the GRADE

project concentrated on disability issues.

– A new module needed to be accessible, but still appeal to a wider audience which may or may not have an interest in accessibility.

Phase One – 5 W’s and an H

• Why?– Creating a module on federal courts

leverages the knowledge of project participants.

– Additionally, the module can serve as a valuable training tool for CATEA staff and affiliates, especially when explaining new ADA caselaw.

Phase One – 5 W’s and an H

• Where?– Hosted on the CATEA website, under

the GRADE directory.

Phase One – 5 W’s and an H

• When?– Deadline for MERLOT conference

helps concentrate the process– Commitments to other projects cause

project to be developed on an ad hoc, piecemeal basis

Phase One – 5 W’s and an H

• How?– Delivery using old-fashioned, hand-

coded HTML– Initial concerns regarding code

languages used by CATEA

Phase One – 5 W’s and an H

• How?– Most CATEA websites utilize database-

driven “Cold Fusion” or “PHP” languages– However, main content developer only

familiar with HTML coding– No time for developer to become

familiar with either language

Phase Two – Literature Review

• The next step was to determine if the module would be necessary – that is to say, if there were no sites that already had all the relevant information.

Phase Two – Literature Review

• Five sites were found with similar content about the federal court system.

Phase Two – Literature Review

• Administrative Office of the Federal Courts:– http://www.uscourts.gov/index.html – http://www.uscourts.gov/understand02/index.html

• American Bar Association:– http://www.abanet.org/publiced/courts/home.html

• Federal Judicial Council:– http://www.fjc.gov/history/home.nsf– http://www.fjc.gov/federal/courts.nsf

Phase Two – Literature Review

• The Federal Judiciary– http://www.uscourts.gov/index.html

• Pluses:– Extensive list of court links– Good, detailed FAQ

Phase Two – Literature Review

• The Federal Judiciary– http://www.uscourts.gov/index.html

• Minuses:– Sketchy, overly basic information– Inconsistent layout– Not designed with students in mind

Phase Two – Literature Review

• Understanding the Federal Courts– http://www.uscourts.gov/understand02/

index.html

• Pluses:– Online textbook with very detailed

information– Extensive glossary

Phase Two – Literature Review

• Understanding the Federal Courts– http://www.uscourts.gov/understand02/

index.html

• Minuses:– Little or no outside resources– Layout confusing and inaccessible– Content not optimized for web

Phase Two – Literature Review

• How Courts Work– http://www.abanet.org/publiced/courts/

home.html

• Pluses:– Detailed information about the steps

of a criminal trial– Focus on role of jury in court system

Phase Two – Literature Review

• How Courts Work– http://www.abanet.org/publiced/courts/

home.html

• Minuses:– Difficult to navigate– Little focus on federal courts– No focus on civil cases

Phase Two – Literature Review

• History of the Federal Judiciary– http://www.fjc.gov/history/home.nsf

• Pluses:– Database of information on federal

court history– Brief biographies of federal judges– Detailed module on the Amistad case

Phase Two – Literature Review

• History of the Federal Judiciary– http://www.fjc.gov/history/home.nsf

• Minuses:– Difficult to navigate– Severe accessibility problem– Not focused on students

Phase Two – Literature Review

• Inside the Federal Courts– http://www.fjc.gov/federal/courts.nsf

• Pluses:– Good analysis of how cases move

through courts– Explication of the roles of court

personnel– Quizzes!

Phase Two – Literature Review

• Inside the Federal Courts– http://www.fjc.gov/federal/courts.nsf

• Minuses:– Severe accessibility problem– Designed for employees, not students– Some areas overly simplistic– Used my original title (#$&%&#!!!)

Phase Three – Template

• Benefits of template design– Ensures that all pages have a

consistent look and feel– Resolves most coding, accessibility

and usability issues ahead of time– Designing the template first saves

time spent hand-coding

Phase Three – Template

• Template 1– Step One: Find images for graphic

using Google Images (on copyright-free .gov websites)

Phase Three – Template

• Template 1– Step Two: Use Photoshop to create

new collage of photos found in Step One

Phase Three – Template

• Template 1– Step Three: Match color scheme

(dark blue text with gray nav-bar and white background) with image.

Phase Three – Template

• Template 1– Step Four: Create links to planned

pages in left-hand nav-bar.– Step Five: Insert footer information.– Step Six: Create cascading style

sheet.

Phase Three – Template

• Template 1– Step Seven: Accessibility

• Insert skip-navigation link at top• Insert alt-tag with image

Phase Three – Template

• Template 2– Step One: Adjust size of header:

• Put “Federal Court Concepts” in image• Change alt-tag• Add in d-link to describe image

Phase Three – Template

• Template 2– Step Two: Adjust style sheet to make

left-hand nav-bar smaller

Phase Three – Template

• Template 3– Step One: Add in images of

sponsoring organizations.

Phase Three – Template

• Template 4– Step One: Integrate images of

sponsoring organizations in footer

Phase Three – Template

• Template 4– Step Two: Use HTML-Tidy to check

for coding errors– Step Three: Use WAVE to check for

accessibility errors

Phase Four – Content Development

• Home Page– Sets forth target audience, learning

objectives

Phase Four – Content Development

• Introduction– Constitutional basis of federal courts– Interaction with executive branch,

with historical examples– Interaction with legislative branch,

with historical examples

Phase Four – Content Development

• Structure of the Federal Courts– Diagrams developed using Microsoft

PowerPoint– Long descriptions for accessibility

Phase Four – Content Development

• Jurisdiction of the Federal Courts– Table describing jurisdictional types;

use of accessible table headings

Phase Four – Content Development

• Federal District Courts– Added in chart from Microsoft Excel– Long description for accessibility

Phase Four – Content Development

• About Legal Research– Utilized color to highlight table

explaining legal citation system– Color helpful but not required to

access page

Phase Four – Content Development

• Accessibility– Developed alternative CSS for

readability

Phase Five – Evaluation

• Lots of small errors regarding HTML validation

• Added in hyphens to set off links in navbar; created new style for current page

• Added in glossary