building web pages for all students

1Developed by the Southeast DBTAC Project at Georgia Tech CATEA

With funding from NIDRR, U.S Dept of Education Grant© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.

Building Web Pages for All

Students

Marsha Allen, Web Manager Center for Assistive Technology & Environmental Access

(CATEA)

Southeast Disability & Business Technical Assistance Center

Georgia Institute of Technology



But, first a word from our sponsors …

(CATEA) Georgia Tech Center for Assistive Technology and Environmental Access

Training, research, information, and technical assistance on disability-related issues and design. National public AT website: assistivetech.net

Mobility Rehabilitation Engineering Research Center

Workplace Rehabilitation Engineering Research Center

www.catea.org



(GRADE) Georgia Tech Research on Accessible Distance Education

• Fact sheets & technical assistance • Accessible course models• Guidelines for accessible online

materials• Accesselearning.net: 10 module online

tutorial on making distance ed accessible

www.catea.org/grade/



Southeast Disability and Business Technical Assistance Center1 of 10 regional ADA & IT Centers funded to:

• Facilitate voluntary compliance with Americans with Disabilities Act (ADA).

• Promote accessible education-based electronic & information technology (IT).

800-949-4232 (v/tty/Spanish)www.sedbtac.org

[email protected]



States Served by Southeast DBTAC

Alabama Florida Georgia Kentucky Mississippi North Carolina South Carolina Tennessee



What will this workshop cover?

Applying elements to structure a web page.

Building a basic web page template.

Creating and using style sheet for web page.

Ideas for incorporating accessibility in other classroom subjects to promote diversity and computer literacy.



How Is the Web Accessed?



“… is in its universality. Access by everyone, regardless of disability, technology, or

environment is an essential, integral aspect of life.”

Source: Tim Berners-Lee, W3C Director, Inventor of Web

“ … is in its universality. Access by everyone, regardless of disability, technology, or

environment is an essential, integral aspect of life.”

Power of the Web



What is the User Experience?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?

… In the mark-up.

Same applies to UNIVERSAL

DESIGNof web sites



Behind the Scenes of a Web Page

Foundation on which design is built.• HyperText Markup Language (HTML)

Develop in text editor (i.e. NotePad), Word, web authoring tool, “cut-n-paste”.

• HTML Kit www.chami.com/html-kit/

• Many tools create “bad” or “junky” code.– i.e. Frontpage, “Save As Webpage”.

Elements create framework and structure content.

• All elements have a start tag <keyword> • Most, but not all elements have end tag

</keyword>



HTML Elements for Framework of Web Page<html>

<head><title>Page Title</title>

</head>

<body>Content goes here

</body></html>

Source: CommonHTML.doc



HTML Kit Interface

Source: html_kit_interface.doc



Start Your Web Page

1. Open your preferred web authoring software (i.e. HTML Kit).

2. Open or create an HTML file. (i.e. File > Open File, browse to TemplateCode2Practice.htm)

3. Web pages should always have a <title>.a. Find the <title> start tag. b. Change “Page Title” to “Federal Court

Concepts”.



Writing for WebDifferent than paper; each page independent.

Concise, “quick-to-read” chunks.

Hierarchical content organization.

Use standard fonts and sans-serif vs. serifs.• i.e. Arial, Verdana, Tahoma

Provide alternate formats.

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



K.I.S.S. Principle

Use the clearest and simplest language appropriate for a site's content.

Keep it simple and standard.



Common HTML Elements to Structure Web Content

<p>paragraph</p><br> = break<ul>unordered list</ul><ol>ordered list</ol><li>list item</li><img src=“” alt=“”> = image

<strong>bold</strong> <em>italics</em>

<a href=“”>web link</a><a href=“mailto:”>email link</a>



Common HTML Elements to Structure Web Content

Headings (big small)

<h1>heading 1</h1> <h2>heading 2</h2><h3>heading 3</h3><h4>heading 4</h4> <h5>heading 5</h5><h6>heading 6</h6>



Define acronyms and abbreviations Helps text-to-speech technology, cognitive

disabilities plus different language and learning styles.

Consider providing a “glossary”.• i.e. www.catea.org/grade/legal/glossary.html

Spell out first instance in text.• Way Too Much Information (WTMI)

Use <acronym> and <abbr> tags.

<acronym title=“Also Known As”>AKA</acronym>

<abbr title=“Street”>St.</abbr>



Identify LanguageEnables proper reading by text-to-speech

and screenreader technology.

Use “lang” attribute:• Use with <html> tag to apply to whole document

<html lang=“en”>• Use with any tag to identify language changes

<p lang=“es”>Hola! Mi amigos!</p>

• Use with <span> tag to apply to an instance<p>Spanish for hello: <span

lang=“es”>Hola!</span></p>



Use Valid Markup (Code) Common error… deprecated code:

• Change <b> to <strong> for BOLD• Change <i> to <em> for italics.• Remove <font> and bgcolor

– Handle in style sheet (css).

Check using tools:• W3C Markup Validator

http://validator.w3.org/• WAVE tool• Online > W3C icon in HTML Kit



Structure the Content1. Open your preferred web authoring software (HTML Kit). 2. Open the file: TemplateCode2Practice.htm.3. Identify the languague of the file.

a. Find the <html> starting tag.b. Within <html> tag, add lang=“en”.

4. Make the First Level Heading <h1> of the Page.1. Find “Name of Page” and highlight.2. Go to Tools > 2nd icon (HTML Wizard), select “h1”.3. Dialog box opens, change text to “Objectives” and select OK.

5. Structure the content in the file to be a paragraph followed by a list with three items.

Code: <p>After completing this module, students should be able to:</p><ul><li>Understand the differences and similarities between the various types of

federal courts.</li><li>Identify the levels of the federal court system.</li><li>Grasp the basic principles of legal research.</li></ul>



Structure the Content5. Find the text starting “After completing …” and

ending with “legal research” and structure it to be a paragraph followed by a list with three items.

Code: <p>After completing this module, students should be

able to:</p><ul><li>Understand the differences and similarities

between the various types of federal courts.</li><li>Identify the levels of the federal court system.</li><li>Grasp the basic principles of legal research.</li></ul>



Links are Web's #1 interaction ... “Violating common expectations for

how links work is a sure way to confuse and delay users, and prevent them from being able to use your site.”

Life is too short to click on an unknown. Tell people where they're going and what they'll find at the other end of the link.

Source: Jakob Nielsen (2005).



Screenreaders

GetInformationOneWordAtATime

Listening vs. Seeing the Web



-- And By Viewing Links Or Headings In A Page.

Click hereClick hereClick hereDocumentHereDownloadMore



Links Inform user if opening new window.

Identify file type and size for non-web links and provide link to download software.

• i.e. My File ( , 35 KB)

Separate adjacent links with printable characters surrounded by space to improve readability, target area.

Provide distinct link text that makes sense if read out of context (list of links).



Testing Links: WAVE tooli.e. click here *Link uninformative*



Testing Links: AIS Web Accessibility toolbar:

Doc Info > Meta Info > List Links



Testing Links: AIS Web Accessibility toolbar

“ List Links”



Link What You Mean

1. Open your preferred web authoring software (i.e. HTML Kit).

2. Open or create an HTML file. (i.e. TemplateCode2Practice.htm)

3. Find and make these links informative.

a. Click here for Previous Section.b. Link to sponsor/funding source.



Images

Federal Court ConceptsImages

Alternative-text (alt-text) for images #1 solution

Provide same information by context

Select the best “alt-text” for sample image:

1. Mailbox

2. Letter entering mailbox

3. Mail

Letter entering mailbox

Mailing Address

MailboxP.O. Box 123

Anywhere, State 98765



No alt-text = no

understanding Without alt-text, the

filename of image or embedded type is displayed (i.e. kwajex.gif and inline, inline, inline, link, inline)

kwajex.gif (45k)



Code for alt-text of Images

<img src=“logo.gif” border=“0” height=“150” width=“200” alt=“Federal Court Concepts”>

Federal Court Concepts



Null/Empty/Blank alt-text

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

Bad: no alt-text alt=“right green corner” alt=“Arrow On” alt=“Bullet”

alt=“Information” Information

Set alt so voice-enabled technology ignores and does not display in text browsers.

Good: alt=“” alt = “” Information



Length of alt-text

Holds 255 characters but maximum of 150 characters allowed by some browsers.

But, what if highly detailed like logo?



Long Description

Use “longdesc” attribute of IMAGE (img) tag for detailed images or graphs; goes to webpage describing the image.

<img src=“structure.gif” border=“0” height=“150”

width=“200” alt=“Federal Court Concepts” longdesc=“logodescription.htm”>



Additonal Ways For Long Description

Inconsistent (but better) support for “longdesc”.

Benefits users with cognitive disabilities, different learning styles or language.

• Use a “d-link”.– Federal Court Concepts

catea.org/grade/legal/index.html

• Link around image to another web page with description– assistivetech.net assistivetech.net



Caption below image for “long description”

Source: catea.org/grade/lifespan/Segment2/slide3.ht

m



Describe mathematical equations by case and position.

Source: catea.org/grade/mecheng/mod2/mod2.htm

l#slide2



Testing Images:Use validation tool:

•WAVE http://wave.webaim.org/ no alt-text alt-text null alt-text



Testing Images: AIS web accessibility toolbar

Images > Toggle Alt, Image List, Show Images



Testing Images: AIS web accessibility toolbar

Text-version: Tools > Other Tools > Lynx Viewer



Adding Images1. Open web authoring software (HTML Kit). 2. Open web page file

(i.e.TemplateCode2Practice.htm)3. Add an image to the file (i.e. header2.gif )

a. Find “ header2.gif” and highlight.b. Object > 2nd icon (Images) to open dialog box.c. Select “Add”, browse to images folder. d. Select header2.gif.e. Set "alt" attribute in <img> = “Federal Court

Concepts."

4. Find “arrowleft.gif” and add alt=“”.5. Find “arrowup.gif” and change alt=“”.



Interface Design

Consistent, logical from page to page.

Use “expected” conventions.

Larger buttons and icons.

Avoid excessive use of graphics.

Last resort make a text-only page.



Use high contrast between text and background

High Contrast

Very Low Contrast

High ContrastLow Contrast



Navigation Design

Avoid JavaScript or Flash for menus.

Give reasonable time and alert if timed.

Offer consistent, logical, ready-placement.

Offer site map and contact / help information.

Provide search feature.

Describe accessibility features and site design.



Skip-Navigation Link

Permits users to skip repetitive navigation links and directly access the content.

Benefits keyboard-only access, small screen devices.

Specifically required by Section 508.

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



Code for Skip-Navigation Link

Create link as first element in web page <body>.

<a href=“#main”>Skip to Page Content</a>

Put “anchor” just before content to be accessed.

<a name=“#main”></a><h1>Page Title</h1>

Making a Skip-Navigation Link

1. Open web authoring software (HTML Kit). 2. Open web page file

(i.e.TemplateCode2Practice.htm)3. Find “uncomment to reveal skip-nav”.

Remove this text and the <!-- -- > surrounding some <a> code.

4. Find your <h1> tag. Just before that remove the <!-- surrounding some <a> code.



Cascading Style Sheet (CSS)

Document associated with a web page that holds its “look and feel.”

Separates content from presentation.

Required by 508 and WCAG to test if web page is readable with style sheets “turned off”



Benefits of CSS

Ensures all pages consistent look and feel.

Saves time and money in coding and editing design and formatting for all web pages .

Standards require; resolves most accessibility and usability issues ahead of time.

Results in faster download.

Allows flexibility to user view (color, size, font, screen).



CSS In Action CSS Zen Garden

www.csszengarden.com

ADA & IT Technical Assistance Centershttp://adata.org/

Federal Court Concept (alt viewing) www.catea.org/grade/legal/accessibility2.html

How to create a css and styles Applying css in HTML file



Testing CSS View without style sheets by:

• “Turning-off” style sheet in browser.– Tools > Internet Options

• Use text-only browser– Lynx Viewer

• AIS Web Accessibility Toolbar– Tools > Simulations > Lynx Viewer

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



Testing CSS: Graphical View of web site



Testing CSS: Using AIS web accessibility toolbar

CSS > Disable CSS



How to create css and styles in css file1. Open text editor or web authoring tool.2. Save file in images folder as styles.css.3. Enter an element used in web page

i.e. p (for paragraph)4. Start style with left curly bracket { .5. Provide each desired attribute by

name, colon(:), value, and end with a semicolon (;).

6. End style with right curly bracket } .



Example of style in css Paragraphs large-print, red in Futura font on

a white background:

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

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

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



Applying css

Link to external css in <head> of HTML file: <head><link href=“styles.css"

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

For HTML elements, no additional coding for styles.

To apply created styles to web page content, use: class in start tag, span, or div :

<p class="notetext"><span class=“notetext”>

<div class=“notetext”>



Creating the Style

1. Open web authoring software (HTML Kit). 2. Open web page file (i.e.stylesTemplate.css)



Setting the Table: Data vs. Layout

Section 508 checkpoint applies to data tables, and not layout tables commonly used in HTML design.

WCAG 5.3 discourages the use of layout tables.



Reading Order of Tables

Screen readers read

information across tables

in a linear way

thereby making it

difficult to understand

information contained in tables.



Example: Screenreader Table View

There is a 30% chance of rain showers this morning, but they should stop before the weekend.

Classes at the University of Wisconsin will resume on September 3rd.

“There is a 30% chance of Classes at the University of rain showers this morning, Wisconsin will resume on but they should stop before September 3rd. the weekend.”



Data Table

Example:

Make accessible as shown on next slide …

Type of Meat

First Name

Second Name

Bologna Oscar Meyer



Identify Headings and Summary for Data Tables

Use <th> tags around heading cells.

Use “summary” attribute of table tag.

If layout table, set summary to null: <table summary=“”>



Code: Data Table ; Headings & Summary<table summary=“Full Name

of My Favorite Meat”><tr><th>Type of Meat</th><th>First Name</th><th>Second Name</th></tr><tr><td>Bologna</td><td>Oscar</td><td>Meyer</td></tr></table>

Type of Meat

First Name

Second Name

Bologna

Oscar Meyer



Identify Scope of Data Table Cells

For each <th> tag <th scope = “col”>

In the first cell of row <td scope = “row”>



Code: Simple Data Table - Scope<table summary=“Full name of

my favorite meat”><tr><th scope=“col”>Type of

Meat</th><th scope=“col”>First

Name</th><th scope=“col”>Second

Name</th></tr><tr><td scope=“row”>Bologna</td><td>Oscar</td><td>Meyer</td></tr></table>

Type of Meat

First Name

Second Name

Bologna

Oscar Meyer



Testing Tables Use a validation tool: WAVE View in text browser: Lynx Viewer

Listen with screenreader.

Run paper down page and read table line by line.

Use AIS Web Accessibility Toolbar• Table > Simple, Complex, Cell Order,

Linearize, Borders



Example of Table Testing using WAVE

Type of Meat First Name

Second Name

Bologna Oscar Meyer



15 Minute Break

?Questions or Comments!

Come back recharged and rarin’ for more!



Passing the TestEvaluate and repair errors:

• Style sheet.• Coding.• Color and contrast.• Accessibility standards (W3C, 508).

Perform manually and with tools.

User Testing.



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?



Test to Accessibility StandardsCatch the WAVE:

wave.webaim.org/index.jsp

Be Hermish www.hermish.com/check_access.cfm

Use the AIS Web Accessibility Toolbar www.nils.org.au/ais/

Check out Evaluation and Repair Tools Listwww.w3c.org/WAI/ER/existingtools.html



Laws, Standards, & Policies on Accessibility Individuals with Disabilities Education Act

www.usdoj.gov/crt/ada/cguide.htm#anchor65310

Section 504 of the Rehabilitation Act of 1973www.hhs.gov/ocr/504.html

Section 508 www.section508.gov

Americans with Disabilities Act (ADA)www.adabasics.org

W3C WAI Web Content Accessibility Guidelineswww.w3c.org/WAI/



More Resources: Laws, Standards, & Policies

Overview of ADA, IDEA, Section 504www.kidsource.com/kidsource/content3/ada.idea.html

State Law www.ittatc.org/laws/state_prototype.php

IMS Guidelines: Accessible Learning Apps www.imsglobal.org/accessibility/accessiblevers/

Frequently Asked Questions on Policy Issueswww.washington.edu/accessit/faqs.php#Policy%20Issues

Web Access Policy & Standards Construction Tool www.ittatc.org/state/policy/



Accessibility Guidelines for Distance Learning Developed by: GRADE Project and MERLOTFormat: Must, Should, May• PDF Files • Excel Documents • Flash Applications • PowerPoint Files • Video and Media • Word Documents

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



More Tools and Resources …

Creating Accessible Flash citt.ufl.edu/Marcela/accessibility/index.html

Illinois Accessible Web Publishing Wizard for Microsoft Office cita.disability.uiuc.edu/software/office/index.php



Publicizing Accessibility

Use appropriate symbols on all promotion, registration, and information materials, plus facility signage.

Disability Access Symbols• Graphic Artists Guild

www.gag.org/resources/das.php



Reach for Holy Grail of Web Site AccessDistinct, informative links.

Consistent navigation mechanisms.

Logically structured page layouts.

Clear color contrast.

Flexible style and alternate formats.

Straight-forward language – K.I.S.S. Principle



Accessibility, usability, and aesthetics

go hand in hand. Think outside of the

box.Remember no pat

“cookie-cutting” recipe or tools for ensuring success.

Challenge To You … Universal Design

THINK

Developed by the Southeast DBTAC Project at Georgia Tech CATEA With funding from NIDRR, U.S Dept of Education Grant

© 2006 All Rights Reserved, Georgia Tech Research Corporation, Atlanta, GA.

Ideas for Incorporating

Accessibility to Promote Diversity

and Computer Literacy



Turtle Vs. Hare

Test download speed:• Web Page Analyzer

www.websiteoptimization.com/services/analyze/

Students can chart average times, compare speeds of different types of pages and Internet connections.



Broken Trail

Test bad links:• Link Checker:

www.anybrowser.com/linkchecker.html

Students can calculate good/bad links by count, percentage on page, and rank.



On the Blink

Test the flicker rate of animation:• If do not have photosensitive epilepsy,

illustration of flicker standards: ncam.wgbh.org/richmedia/flicker_demo_start.html

• AIS Web Accessiblity Toolbar– Tools > Simulations > Flickering Images

Demo

Students can compare and chart the animation rates to the standards.



Running a Tab

Navigate with keyboard only, tab through the web page.

Students can calculate count to get to page content, percentage for pages or web sites, and rank.



Coloring with Style

Test color/contrast:• Vischeck Color Blindness Tool www.vischeck.com • AIS Web Accessibility Toolbar

– Tools > Simulations > choose various visual disabilities– Color > Greyscale, Contrast Analyzer, Vischeck

Students can compare/contrast color combinations and different views of web pages, create color wheel, and rank.



Testing Screen Size:

View in different screen sizes• Adjust size of browser window.

– Middle icon in upper left corner of window.– Place pointing cursor on side of window till

double-sided arrow appears. “Click” hold and then move side of window to smaller size.

• Adjust font size.– Internet Explorer: View > Text Size– Other browsers: Ctrl/alt and +/- keys

• Use AIS Web Accessibility Toolbar– Resize > various screen sizes



Testing Screen Size: Opera browser: Shift + F12 for small

screen



Hit the Lynx

Test text browser:•Lynx Viewer

www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php

Students can compare/contrast the text vs. graphic view to see if same information.



Hearing is Seeing

Use screenreader or voice-enabled tool.• IBM Home Page Reader

www-306.ibm.com/able/dwnlds/index.html

• Have students turn off monitors and listen to a web page then write a paragraph describing what they heard and/or have them answer a set of questions, i.e. name of the website? – compare and contrast answers.

• Create a text transcript of an audio recording.



Seeing is Hearing

Have students use free software to caption multimedia program.• Windows Media On-Demand Producer (WMODP).• Media Access Generator (MAGpie)

Consider file formats need certain software to play or edit: • MOV files (Quicktime) • RM files (Real Player) • ASF and WMV files (Windows Media Player) • MPG and AVI files playable by most



Hang Out with Acrobat

Test PDF files:• Adobe PDF Online Conversion Tools

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

Students can compare/contrast the text or web-based version to the PDF file.



Southeast DBTACGeorgia Tech CATEA

Breaking Down Barriers in K-12 Education

Georgia Tech



Southeast DBTAC Approach

Educational Leadership Team (ELT)• Find leaders in the field and work with

them.

• Approach since 1991 for ADA Network.

• 2001: Accessible Information Technology.



K-12 Project Objectives for ELT

Increase awareness.

Establish expectations for access.

Enhance existing efforts.

Document practices for replication.




Educate school principals, teachers, parents and students.

Include accessible technology in teacher licensing.

Facilitate changes in policy that increase access.

Apply Section 508 standards as guide.




Create and maintain a clearinghouse.

Create alliances, enhance collaborations.

Identify promising practices.

Establish model institutions.



Southeast DBTAC Accessible IT in Education Training

Customized training to participant needs throughout the Southeast, including resources:

• AccessIT Knowledge Basewww.washington.edu/accessit/kb.php

• Breaking Down Barriers: K-12 and Beyondwww.washington.edu/accessit/it-checklist/

• Promising Practices of Accessible IT in K-12 Settings sedbtac.org/ed/edaction/promising_practices_K12.doc



?Questions and Comments!

Marsha Allen, Web Manager, [email protected]

Kevin Price, Education and IT Technology [email protected]

Center for AT & Environmental Access (CATEA)Southeast Disability and Business Technical Assistance Center

Georgia Tech, College of Architecture,490 Tenth Street, Atlanta, Georgia 30318

Fax: 404-385-0641Phone: 800-949-4232 (v/tty)

www.sedbtac.org