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

  1. PDF Files
  2. Excel Documents
  3. Flash Applications
  4. PowerPoint Files
  5. Video and Media
  6. Word Documents

www.catea.org/grade/guides/introduction.php

Five Phases to Create Accessible Module

  1. Framework
  2. Content Development
  3. Design: Template and CSS
  4. Supplemental Files in Accessible Formats
  5. Usability Testing
  6. Paper: Closing the Circuit: Accessibility from Ground Up www.sedbtac.org/ed/edpublications/index.php?id=114

Phase 1: Framework – 6 Questions

Answer 6 Questions?  (Who?, What?, Why?, Where?,When?, and How?) around Goals &  Objectives       

Phase 1: Framework – Module Goals

  1. Training tool for Southeast DBTAC affiliates, especially new ADA caselaw.
  2. Use in high school or post-secondary courses on civics or introductory political science.
  3. Example of accessible, attractive, usable module design process.
  4. Putting research into practice.

Phase 1: Framework – Why?

  1. Do "lit review" to determine if need or reinvention of wheel.
  2. Found 5 modules with similar content, but:
  3. All had access issues for individuals with disabilities.
  4. None presented all relevant information in an easily understood manner.

Phase 1: Framework - Who?

  1. Content: Subject Matter Expert - Curtis Edmonds, J.D.
  2. Some experience designing web content helpful.
  3. Support: Web or Instructional Designer - Marsha Allen, Web Developer
  4. Support for design and 2nd eyes to evaluate content; have some familiarity with accessibility.

Phase 1: Framework - When?

  1. Timeline for development and launching, including testing and editing.
  2. Module developed over a month.
  3. Commitments to other projects caused development on "ad hoc" piecemeal basis.

Phase 1: Framework - How?

  1. Compliance to web access laws, standards, principles.
  2. Federal Law
  3. Section 504 of the Rehabilitation Act
  4. Americans with Disabilities Act
  5. Section 508 of the Rehabilitation Act
  1. State Laws Database from ITTATC Project    (www.ittatc.org/laws/state_prototype.php)
  1. Standards and Guidelines
  2. W3C Web Content Accessibility Guidelines
  3. IMS Guidelines for Accessible Learning Applications         (www.imsglobal.org/accessibility/accessiblevers/)

Section 504 of the Rehabilitation Act of 1973

  1. All public or private institutions receiving federal funding, must make programs and services accessible for individuals with disabilities.
  2. Enforcing agency: Office for Civil Rights (OCR)
  3. OCR has ruled …
  4. Not whether student with disability is provided access, but extent that communication is actually as effective as that provided to others.
  5. In favor of making information technology (IT) accessible for students with disabilities.

Americans with Disabilities Act of 1990

  1. Passed 1990 before Internet.
  2. Disability if meet one of three-part definition.
  3. Title II "Effective communication" applies to Internet per Department of Justice.
  4. ADA Basic Building Blocks webcourse www.adabasics.org

    Section 508 of the Rehabilitation Act

  1. Federal departments must:
  2. Accommodate employees with disabilities.
  3. Design accessible websites.
  4. Procure accessible information technology.

www.section508.gov

Web Content Accessibility Guidelines (WCAG)

  1. World Wide Web Consortium (W3C)   
  2. 1.0 current; 2.0 due this year - www.w3c.org/WAI
  3. 3 voluntary compliance levels  

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0            A- Level 1         AA – Level 2        AAA – Level 3 WIA A and AA conformance icons

Section 508 to ADA and WCAG

  1. If 508 adopted as policy:
  2. For ADA: likely demonstrate compliance with "communication" requirements.
  3. For W3C WCAG: likely meet minimum Level A, Priority 1 of which 508 was based.

Universal Design (UD)

  1. Design of products, environments, and communications to be usable by all people,  to the greatest extent possible, without need for adaptation or specialized design.

 Design for All, Inclusive Design, Lifespan Design

Guiding Principal: Usability

  1. Designing a user interface that is: Effective, Efficient, and Satisfying.

                                                Source: Understanding Web Accessibility, S. Henry

Integrating Accessibility, Usability, and UD

"Built-in design that makes the learning goals achievable by individuals with wide differences in their abilities to see, hear, speak, move, read, write, understand English, attend, organize, engage, and remember."                                    Source: Council for Exceptional Children (CEC)

"A strict focus on accessibility as a scorecard item doesn't help users with disabilities. To help these users accomplish critical tasks, you must adopt a usability perspective. "
Source: Jakob Nielsen, Alertbox, Nov. 21, 2005, www.useit.com/alertbox/accessibility.html

Phase 2: Content Development

  1. Foundation on which design is built using common HTML tags to id structure. i.e. headings, list, link, etc.
  2. Develop in Word, PowerPoint, or WYSIWYG authoring tool
  3. HTML Kit  www.chami.com/html-kit/
  4. Macromedia Dreamweaver MX
  5. Make links distinct and identify language.
  6. Provide alt-text for any images.

Readability, Context, and Alternate Format

  1. Aoccdrnig to a rscheearchr at Cmabrigde Uinervtisy, it deosn't mttaer in waht oredr the ltteers in a wrod are, the olny iprmoetnt tihng is taht the frist and lsat ltteer be at the rghit pclae. The rset can be a tatol mses and you can sitll raed it wouthit porbeslm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.  Amzanig huh!

How are these seats different?

  1. … In the mark-up. Same applies to UNIVERSAL DESIGN of web sites.

Behind the Scenes of a Web Page

  1. Foundation on which design is built. HyperText Markup Language (HTML)
  2. <Tags> create "behind the scenes" framework and identify elements i.e. headings, lists, links, paragraphs
  3. Develop in text editor (i.e. NotePad), Word program, web authoring tool, or "cut-n-paste" between both.

Framework <Tags> of HTML Webpage Word document

<html>
            <head>
                        <title>Name for Document</title>
            </head>

            <body>
                        Content goes here
            </body>
</html>
Handout: www.sedbtac.org/ed/training/webaccess/CommonHTML.doc

Common <Tags> in HTML

<p> = paragraph
<ul> = unordered list (bulleted)
<ol> = ordered list
<li>= list item
<a> = link

<h1>,<h2>,<h3>, <h4>,<h5>, <h6> = headings big à small
Handout: www.sedbtac.org/ed/training/webaccess/CommonHTML.htm

WYSIWYG Authoring Tools

  1. Many tools create "bad" or "junky" code. i.e. Frontpage, "Save As Webpage".
  2. Other tools build-in or prompt "good" code. i.e. Dreamweaver MX (Edit > Preferences > Accessibility)

Use Valid Markup (Code)

  1. Common error… deprecated code. Change <b> to <strong> and <i> to <em>.
  2. Check using tools:
  3. W3C Markup Validator   http://validator.w3.org/
  4. WAVE validation tool         http://wave.webaim.org         
  5. "Shift + F7" in Dreamweaver

Writing for Web

  1. Different than paper; each page independent.
  2. Concise, "quick-to-read" chunks.
  3. Hierarchical content organization.
  4. Use standard fonts and sans-serif vs. serifs. i.e. Arial, Verdana, Tahoma
  5. Provide alternate formats.

            - Large print: minimum 18 pt.; preferred 22 pt.

K.I.S.S. Principle

  1. Use the clearest and simplest language appropriate for a site's content.
  2. Keep it simple and standard.

Identify Language

  1. Enables proper reading by text-to-speech and screenreader technology.
  2. Solution - use "lang" attribute:
  3. Use with <html> tag to apply to whole document             <html lang="en">
  4. Use with any tag to identify language changes

            <p lang="es">Hola! Mi amigos!</p>

  1. Use with <span> tag to apply to an instance

<p>Spanish for hello: <span lang="es">Hola!</span></p>

Hearing is Seeing …


  1. Screenreaders
  2. Get
  3. Information
  4. One
  5. Word
  6. At
  7. A
  8. Time
  9. And By Viewing Links Or Headings In A Page.
  10. Click here
  11. Click here
  12. Document
  13. Here
  14. Download

Links: Distinct, Inform, Stand-Alone

  1. Provide distinct link that cues reader and makes sense if read alone (list of links).
  2. Identify file type and size if link to non-web item. i.e. My File (Excel, 30 KB).
  3. Inform user if opening a new window.
  4. Offer link to software needed for non-web items.
  5. Separate adjacent links with printable, spaced characters to improve readability and target area.

Testing Links

  1. Use validation tool:
  2. WAVE validation tool   http://wave.webaim.org/

            i.e. click here    Icon from WAVE validation tool that alerts if link text uninformative; displays as square yellow box with Link to? black text.  *Link uninformative* 

  1. Links list using AIS web accessibility toolbar:
  2. Doc Info > Meta Info > List Links i.e. www.google.com

Using AIS web accessibility toolbar to show links (google.com)           Results of "links list" from AIS web accessibility toolbar (google.com)

Images

  1. Alternative-text (alt-text) #1 solution
  2. If alt-text provided, typically displays when a user places a pointing device, such as the mouse cursor, over an image. 
  3. Provide short, equivalent information by context
  4. For example, the alt-text for the logo of the Federal Court Concepts module (www.catea.org/grade/legal) should be: "Federal Court Concepts."

Practice Exercise for Images

Select the best "alt-text" for sample image:


  1. Mailbox
  2. Letter entering mailbox      
  3. Mailing address


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).

Dreamweaver Image Tag Accessibility Attributes of Alternate Text and Long description (link to another page with detailed description of complex image)

Decorative Images in Dreamweaver

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

Dreamweaver Image Tag Accessibility Attributes of Setting Alternate Text  value to Null by selecting 'empty'  and leaving  long description field blank.

Testing Images for alt-text

  1. Listen with a screenreader.
  2. Use validation tool: WAVE validation tool http://wave.webaim.org/
  1. View in text-only browser:
  2. Lynx Text View tool  www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

Graphic view of Federal Court Concepts module at catea.org/grade/legal/  WAVE tool analysis (wave.webaim.org) of Federal Court Concepts module at catea.org/grade/legal/.   Text view of Federal Court Concepts module at catea.org/grade/legal/.  

  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 - Word file (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.

                         examples of high contrast and low contrast between text and background

Avoid distracting and watermark backgrounds

Read this text against a highly-colored psychedelic background

 Psychedelic background as an example of a busy background which should be avoided for use in materials.

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)

 
Using Vischeck Color blindness tool to show a map of the U.S. showing 10 regions of the  U.S. District Courts of Appeals identified by number and color from the Federal Courts Concepts module as seen by a user with red/green color blindness

Red/Green Color Blind

       Using Vischeck Color blindness tool to show a map of the U.S. showing 10 regions of the  U.S. District Courts of Appeals identified by number and color from the Federal Courts Concepts module as seen by a user with blue/yellow color blindness
Phase 3 Template and CSS
B. Create a cascading style sheet (css)

  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 - Word file

  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:

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. Word file,P D F filePowerPoint file,Excel file,Barriers exist beyond the web:

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

Screen

readers

read

information

across

tables

in a

linear

way

thereby

making

it

difficult

to

understand

information

contained

in 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

screen shot of WAVE vaidation tool report

Word Documents  Icon for Word file

  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 Icon for Excel file

  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 .

Icon for PowerPoint filePowerPoint 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 FilesIcon for P D F file

  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

Screenshot of Glossary of Module: Federal Court ConceptsScreenshot of alternate view (high contrast) for Module: Federal Court Conceptsexample of link to glossary graphic

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:

Designing for the Life Span

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