Presentation Notes
Closing the Circuit: Building Accessible Modules from the Ground Up

Marsha Allen, CTRS, Web Developer
Center for Assistive Technology & Environmental Access (CATEA)
Georgia Institute of Technology
Phone: 404-894-4960 (v/tty)
Fax: 404-894-9320
Email: marsha.allen@coa.gatech.edu

Objectives

1. Identify 3 barriers for users with disabilities.
2. Describe the 5-step process for creating an accessible online training program.
3. Discuss tools and solutions to improve usability and integrate accessibility in design.

Presentation Handouts:
Closing the Circuit:  Building Accessible Modules from the Ground Up
www.catea.org/grade/training/

But first a word from our sponsors …

(CATEA) Georgia Tech Center for Assistive Technology and Environmental Access www. catea.org/

1. Training, research, information, and technical assistance on disability-related issues and design.
2. National public AT website: assistivetech.net
3. Mobility Rehabilitation Engineering Research Center: mobilityrerc.catea.org
4. Workplace Rehabilitation Engineering Research Center: workrerc.org

(GRADE) Georgia Tech Research on Accessible Distance Education     catea.org/grade

1. Fact sheets & technical assistance 
2. Accessible course models
3. Guidelines for accessible online materials
4. Accesselearning.net: 10 module online tutorial on making distance ed accessible

(ITTATC)  Information Technology Technical Assistance and Training Center      www.ittatc.org
Section 508 and 255 Information, Training, Technical Assistance
Toll free: 866-9ITTATC or 866-948-8282 (voice/tty)

ADA & Accessible Information Technology Centers

1. 10 Regional U.S. Centers  with current "key" initiatives:
2. Reasonable accommodation
3. K-12 Breaking Down Barriers
4. Post-secondary web accessibility evaluation & training

Contact Your Regional ADA & IT Center            : 800-949-4232 (v/tty)                        www.adata.org

Module: Federal Court Concepts

1. Public website in HTML at www.catea.org/grade/legal/.
2. 12 webpages of basic information on:
3. Structure of the federal courts.
4. Kind of cases that federal courts hear.
5. How to use federal court decisions in research.

Module Design: Federal Court Concepts

1. Designed from start with accessibility in mind.
2. Created to showcase best practices of accessible design from GRADE research.
3. Uses common components such as images, PowerPoint slides, Excel charts, web links, PDF file.

Module Listed In …

1. National Council for Social Studies website.
2. Federal Resources for Educational Excellence.
3. Georgia Department of Education for Georgia civics and government educators.
4. Education World with A+ rating of Federal Courts module
5. MERLOT: Multimedia Educational Resource for Learning and Online Teaching (www.merlot.org)

Accessibility Guidelines for Distance Learning

Developed by:GRADE Project and MERLOT

1. Format: Must, Should, May

Answer: Choice #3 or #1 are best answers because these more inform the user about the context of the image in relation to its adjacent text.
   

No alt-text =  no  understanding

1. Without alt-text, the filename of image or embedded type of file is displayed
2.  i.e. kwajex.gif or [inline][inline][inline][link][inline]

Code for alt-text of an Image

<img src="filename, i.e. logo.gif"
border="0"
height="whole number of image height, i.e. 150"
width="whole number of image width, i.e. 200"  
alt="short, equal description, i.e. Federal Court Concepts">

1. Code example for the logo of the Federal Court Concepts module (www.catea.org/grade/legal)

Null/Empty/Blank alt-text for Images

1. Describing decorative, spacer, or bullet images, and repeating adjacent text annoys and confuses users.

Bad:    no alt-text                    alt="right green corner"
alt="Arrow On"          alt="Bullet"
            alt="Information"  Information

1. Leave "empty" for voice-enabled technology to ignore and not display in text browsers.              

Good:  alt=""                          alt = ""  Information

Length of alt-text for Images

1. Holds 255 characters but maximum of 150 characters allowed by some browsers.
2. But, what if highly detailed like a logo or collage?

Long Description for Images

1. Use "longdesc" attribute of image tag <img> for detailed images or graphs.
2. Goes to another webpage describing details of the image.

<img src="structure.gif" border="0"    height="150" width="200" alt="Federal Court Concepts" longdesc="logodescription.htm">

1. Code example for the logo of the Federal Court Concepts module (www.catea.org/grade/legal)

Additonal Ways For Long Description

1. Increasing support for "longdesc" by assistive technology.
2. Benefits users with cognitive disabilities, different learning styles or language.
3. Use a "d-link", i.e. Federal Court Concepts             catea.org/grade/legal/index.html

Note: The d-link is now deprecated; share so familiar if encounter.

1. Link around image to another web page with description, i.e. assistivetech.net  
2. Caption below image, i.e. Design Lifespan Course   catea.org/grade/lifespan/
3. Describe math and science equations by case and position. i.e. Fluid Mechanics Course

    catea.org/grade/mecheng/mehome.htm

Images in Dreamweaver

1. Prompt to enter alternate text and long description (link to another page).

Decorative Images in Dreamweaver

1. Select "empty" if image decorative, bullet, or spacer.

Testing Images for alt-text

1. Listen with a screenreader.
2. Use validation tool: WAVE validation tool http://wave.webaim.org/

• no alt-text 
• alt-text
• null alt-text

1. View in text-only browser:
2. Lynx Text View tool  www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

1. Code example for the logo of the Federal Court Concepts module (www.catea.org/grade/legal)
2. Use AIS web accessibility toolbar for testing images:
3. Images > Toggle Alt, Image List, Show Images
4. Tools > Simulations > Lynx Viewer

Phase 3: Template and Style Sheet

1. Develop consistent, logical, color contrasted template design of module.
2. Create a cascading style sheet (css).
3. Insert skip-navigation link.
4. Test and correct as needed for accessibility.

Benefits of Template and CSS

1. Ensures all pages consistent look and feel.
2. Saves time in coding and editing.
3. Resolves most accessibility and usability issues ahead of time.
4. Results in faster download.

Phase 3 Template and CSS
A. Template Design of Module (www.sedbtac.org/ed/training/webaccess/TemplateCode2.htm)

1. Includes header, footer, navigation areas.
2. Use copyright-free images from government websites, create new, or get permission/credit source.
3. Provide alt-text for any images.
4. Template Code of Module  (www.sedbtac.org/ed/training/webaccess/TemplateCode2.doc)

Interface Design

1. Consistent, logical from page to page.
2. Use "expected" conventions.
3. Larger buttons and icons.
4. Avoid excessive use of graphics.
5. Last resort make a text-only page.

Navigation Design

1. Avoid JavaScript or Flash for menus.
2. Give reasonable time and alert if timed.
3. Consistent, logical, ready-placement.
4. Site map, search and contact / help information.
5. Provide accessibility and site features information.

More Than Color

1. Use to highlight focus, increase aesthetic appeal.
2. Ensure color alone is not required.

Bad:    Information in red is required.
Push the green button to start.

Good: *Required information in red with asterisk.
            Table using color to show legal citation parts (www.catea.org/grade/legal/research.html)
                   

Use high contrast between text and background.

Avoid distracting and watermark backgrounds

Test Color and Contrast

1. Print black and white.
2. View in gray-scale.
3. Use Hermish validation tool to check contrast. (www.hermish.com/check_access.php)
4. Use AIS Web Accessibility Toolbar
5. Tools > Simulations > choose various visual disabilities
6. Color > Greyscale, Contrast Analyzer, Vischeck
7. Use Vischeck Color Blindness tool. (www.vischeck.com)

1. Separate document associated with a webpage that provides users with flexibility in viewing.
2. Holds the look and feel of the webpage separate from the content.

Why use a cascading style sheet (css)?

1. Standards require.
2. Flexible to smaller screen; minimizes or eliminates scrolling and cut-off.
3. Allows flexibility in user viewing (color,size,font).
4. Easier, cheaper to make changes to design and formatting for all webpages .

Examples of cascading style sheet in action

1. CSS Zen Garden     www.csszengarden.com
2. Federal Court Concept (alt viewing)  www.catea.org/grade/legal/accessibility2.html

Example of CSS styles

1. All paragraphs large-print, red in Futura font on a white background:

p {font-size: 200%; color: #cc0033; font-family:Futura Extra Bold; background-color: #ffffff; }

1. Create own style for "noted" text centered and black in bold print on a gray background.

.notetext { text-align:center; color: #000000; font-weight: bold; background-color: #efefef;}

Handout: www.sedbtac.org/ed/training/webaccess/default2.css

Applying css to web page

1. Link to external css file between "head" tags:

   <head><link href="my_style_sheet.css" rel="stylesheet" type="text/css"></head> .

1. For HTML tags, no additional coding to apply style.

1. To apply own styles, use class with tag, span, or div:       

<p class="notetext">
<span class="notetext">
            <div class="notetext">

            Handout: www.sedbtac.org/ed/training/webaccess/SampleContent_CSS.doc

Testing Cascading Style Sheet

1. View without style sheets  by:
2. "Turning-off" style sheet in browser.
3. Use text-only browser.

1. Use W3C CSS Validator to check code.    http://jigsaw.w3.org/css-validator/

Phase 3: Template and CSS
C. Create a Skip-Navigation Link

1. Permits users to skip repetitive navigation links.
2. Supports keyboard-only access and logical tab order to navigate information.
3. Specifically required by Section 508.

Code for Skip-Navigation Link

1. Create link as first element after starting <body> tag in HTML file.

<a href="#top">Skip to Page Content</a>

1. Put "anchor" just before content to be accessed.

            <a name="#top"></a><h1>Page Title</h1>

1. Examples:

• How skip-nav works:  www.catea.org/grade/legal/
• Skip-nav display using css:    www.adagame.org/

Testing Code of Template

1. Validate code (or markup) using tool:
2. W3C Markup Validator       http://validator.w3.org/
3. "Shift + F7" in Dreamweaver
4. Common error… deprecated code:
5. Remove bgcolor attribute and <font> tag; handle in style sheet.

Test to Accessibility Standards

1. Catch the WAVE Validation Tool: 

http://wave.webaim.org/index.jsp

1. Don't Be Hermish validation tool

    www.hermish.com/check_access.php

1. AIS Web Accessibility Toolbar

   www.nils.org.au/ais/

1. List of Testing and Repair Tools

http://www.w3c.org/WAI/ER/existingtools.html

Phase 4: Supplemental Files in Accessible Formats

1. Barriers exist beyond the web:

• Avoid built-in "Save as Webpage" = JUNKY!
• Multiple columns.
• Lack of structure which AT relies upon.
• Lack of textual equivalent for images, media.
• Lack of software to view the document.

Tables 

1. Can be difficult for AT to navigate unless properly structured or text alternative provided.
2. Table Example: Jurisdiction of the Federal Courts  www.catea.org/grade/legal/juris.html

Reading Order of Tables

Tables in Dreamweaver: Caption, Summary

1. Prompts to provide caption, summary, and location of headers.

Tables in Dreamweaver: Table Headers

1. Automatically creates table headers for selected cells when "header"  checked in its Properties panel.

Testing Tables

1. Use a validation tool: WAVE    wave.webaim.org/
2. View in text browser: Lynx Viewer  www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php
3. Use screenreader or voice-enabled tool, i.e. IBM Home Page Reader.
4. Run a piece of paper down the page and read table line by line.

Example of Table Testing using WAVE Validation Tool

Word Documents 

1. Format with Styles drop-down box and tools.
2. Build outline of document, which voice-enabled technologies rely upon.
3. Promotes better readability for users and browsers.
4. Improves conversion to accessible PDF file.
5. Text descriptions for images and charts.

Excel Documents

1. Linearize or alternate format of tables.
2. Text descriptions for images and charts.
3. Excel Chart Example: Federal District Courts  www.catea.org/grade/legal/district.html
4. Requires long description of information presented in chart .

PowerPoint Files

1. PowerPoint Slide Example: Structure of the Federal Courts  www.catea.org/grade/legal/structure.html
• Two diagrams with complex info (PowerPoint slides) need long descriptions.
2. Illinois Accessible Web Publishing Wizard for Microsoft Office
• Converts Word, PowerPoint and Excel files to accessible, valid webpages with style sheet.
• Guided interface that automates most of the conversion.
• Adds "Save As Accessible Web Page" option under File menu of all Office applications.

http://cita.rehab.uiuc.edu/software/office/index.html
 

PDF Files

1. Start with accessible Word document.
2. Identify as PDF with file size in the link. i.e. MyFile (PDF, 13 KB)
3. Give link to download Adobe Reader which need to view PDF files.
4. Avoid scanning as creates one image; text cannot be accessed.
5. Provide more accessible format.

Testing PDF Accessibility

1. User-testing.
2. Adobe Online Conversion Tools for PDF (online, text, or html).

www.adobe.com/products/acrobat/access_onlinetools.html

Phase 5: Usability Testing

1. Ensure that users with and without disabilities can easilyuse the web site, or will be failure.
2. Establish a clear, web usability and accessibility policy.
3. More than just following and validating to a set of accessibility guidelines.

Accessibility is Good Usability

1. What usable may be required for accessibility.
2. Most accessibility increases usability for all.
3. Font adjustable: Convenient and helps user with low vision.
4. Keyboard shortcuts: Productivity and helps users unable to use mouse.
5. "Hands-free" support: Helps mobile and web-enabled devices.
6. Inclusion.
7. Searchable for key words and phrases.
8. Captioning helps language and learning.
9. Compatibility across technology versions.
10. More effective from start vs. scramble-fix.

Test Browsers and Operating Systems

1. View in text-only browser, i.e. Lynx Viewer yellowpipe.com/yis/tools/lynx/lynx_viewer.php
2. Use screenreader or speech output, i.e. IBM HPR www-306.ibm.com/able/dwnlds/index.html
3. Navigate without a mouse (keyboard only).
4. Check the load time.

Quick Usability Review

1. What site is this?
2. What page am I on?
3. What are the major sections of this site?
4. What are my options at this level?
5. Where am I in the scheme of things?
6. How can I search?

Results of Module Usability Testing

1. Reinforce "Where am I?" by bolding text.   www.catea.org/grade/legal/
2. Develop alternative view for more flexibility.   www.catea.org/grade/legal/accessibility2.html
3. Add a glossary and link to instances in text.   www.catea.org/grade/legal/glossary.html

Examples of Accessible Course Models

1. Designing for the Life Span
2. Introduction to Fluid Mechanics
3. Scientific Perspectives on World Hunger             Source: www.catea.org/grade/coursedesign.html

Accessible Course Model 1:

Background

1. Undergraduate course in human factors design and engineering.
2. Developed and taught on-site in Georgia Tech College of Architecture, Industrial Design program.
3. Four segments of original classroom course.

Issues/Access Barriers

1. Extensive PowerPoint slides, graphics, charts, tables and sound files that lacked text descriptions.
2. Could not be accessed by students who were unable to see the visual content, or hear the audio.

Solutions for Accessibility

1. Web-based version with:
2. Logical, consistent navigation.
3. Text descriptions for all PowerPoint slides, graphics, charts, and tables.
4. Transcript for each sound file.

Accessible Course Model 2: Introduction to Fluid Mechanics

Background

1. Graduate-level engineering course (ME6601) that covers:
2. Fundamentals of fluid mechanics.
3. Derivation of equations of motion.
4. Introduction to viscous, inviscid, turbulent, and boundary-layer flows.
5. Pre-requisite courses for broad range of engineering disciplines, such as mechanical, bio-engineering, aerospace, and civil engineering.
6. Taught by Professor Paul Neitzel from Georgia Institute of Technology in Atlanta, Georgia.

Issues/Access Barriers

1. Original distance-education course relied heavily on video that lacked captioning.
2. Lacked text descriptions for images = unusable by users with low vision or blindness.
3. Web pages difficult or impossible to navigate for users who could not see.
4. Frequent use of mathematical equations, charts, images, visual representations and other files.

Solutions for Accessibility

1. Web-based version for six modules of the course with:
2. Logical, consistent navigation.
3. Text descriptions for all PowerPoint slides, graphics, charts, and tables.
4. Captioned videos with transcripts.
5. Accessible Word file with descriptions and references for mathematical equations.

Accessible Design: On the Horizon

1. Accessible Flash: Almost ready for prime time; works in some configurations now.
2. Authoring Tools producing more accessible code.
3. Assistive Technology (AT) compatibility improving.
4. Course Management Systems(CMS) building in accessibility and AT compatibility.

Advocate Accessible Design

1. Model accessible design.
2. Cite legal, business, and effectiveness rationale.
3. Share findings of usability review and tools that  validate accessibility to encourage adjustments.
4. Draft outline of why inaccessible websites and educational materials difficult to use.
5. Collaborate and share resources.

Challenge To You …

1. Redefine true accessibility to be a state of … UNIVERSAL DESIGN.
2. Think outside of the box.
3. There are no "cookie-cutter" approaches.

Questions and Comments?

Marsha Allen, Web Manager, CTRS              marsha.allen@coa.gatech.edu
Center for AT & Environmental Access (CATEA)
Georgia Tech, College of Architecture,
490 Tenth Street, Atlanta, Georgia 30318
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
Web: www.catea.org