Elizabeth Pyatt, D. Tusler ITS/TLT, [email protected] Accessibility and ANGEL.

Elizabeth Pyatt, D. TuslerITS/TLT,[email protected]

Accessibility and ANGEL

OutlinePolicy & Audiences

Communication Tools

Display Options

HTML Editor

Quizzing

Other Accessibility Resources

Audiences & Policy

Accessibility AudiencesBlind (Severe Visual Impairment)

Must use screen reader or Braille

Low Vision (Some Vision)Must zoom in and rely on good contrast

Color Blind (Color Deficient)Can’t rely on color coding alone

Deaf/Hard of HearingCaptions & Transcripts

Captions also benefit other studentshttp://accessibility.psu.edu/captionworkflow

More AudiencesCognitive/Learning

May require extended time on quizzes/assignments

Usability & legibility critical

Neurological (e.g. Epilepsy)Please don’t flicker quickly

Motion ImpairedCan’t use hands (easily)

Keyboard access easiestAvoid Mouse Only

Syllabus StatementSyllabus statement pointing students to Office of Disability Services is required in all syllabihttp://accessibility.psu.edu/syllabus

Accommodations PolicyRequired

When instructor receives accommodation letter from Office of Disability Services

RecommendedEasy fixes recommended for all courses

Saves time if accommodation requiredImproves experience for other students

Online/HybridCan you talk to a local instructional

designer?

Critical IssuesUsable ANGEL components

Images/Image Maps/AnimationsAdd ALT Text

Add Headings/Subheadings H1/H2/H3 or Heading 1/Heading 2 style

Clear Link Text

Data Tables

Legibility

Video Captions & Audio Transcripts

Alternate Viewing OptionsSection 508

Frame free viewScreen reader

friendly

Section 508 View

Custom 508 View

Display OptionsFor Students

508/PDARemoves frameshttp://kb.its.psu.edu/cms/article/470

Accessibility ProfileCustomizes fonts, colors, screen reader

settingshttp://kb.its.psu.edu/cms/article/10http://accessibility.psu.edu/angel#display

ANGEL Communication Toolse-Mail

Forward ANGEL mail to “Internet” account

Discussion BoardConsider Blogs

(w/commenting)

ChatConsider alternate chat

client (e.g. IM tools or Skype)

ANGEL HTML Editor

ANGEL HTML EditorAvailable in multiple tools

E-mail, page, quiz (“assessment”), dropbox, syllabus editor

BenefitsGood editing toolsHTML easiest for screen readers, other tool

to process

ALT Tag/Text/Attribute

Text which replaces image if it can’t be processedALT=“Washington at Valley Forge in

winter snow”Appears when image fails to load

Image fromWikipedia

Adding ALT Text Add “Short Description”

or “Alternative Text” when inserting image.

Usefulness of ALT Text

Page with images not loaded and missing ALT text

Images from BBC

Pick the Best Two ALT Tags

Context: 6 Nationalities of Texas1. Wow, Six flags over Texas!2. Image taken from Wikipedia. Photo by

Ann W.3. 220px_Six_flags_over_Texas.jpg4. Photo shows flags of Spain, US, Mexico,

France, Republic of Texas and Confederate flag

5. Photo of six flags read information below6. Photo shows 6 flags of different colors

waving in the breeze on a sunny day. Three are red, white and blue….

Full Image of Six Flags

Complex ImagesToo complex for an ALT tag

Describe in main text and use short ALT text

Colonial New Netherland stretched from New York City (New Amsterdam) up Hudson River Valley to north of Ft. Orange (modern Albany)

Colonial New Sweden was centered on the Delaware river and stretched from the head of the bay to a little south of Trenton.

(Text includes details not in image)

Image from Wikipedia

ALT Tag ExercisesTwinned Pyrite Crystal

(Wikipedia)Athens Greece

(Wikipedia)

Unclear Link TextAvoid

For more information about accessibility, click here Or learn more here, here and here

“Learn about additional international resources that might be useful in class or in research”

Blocker becauseScreen readers search for/scroll through links“Here” is small (hard to find) and ambiguous

Try ThisYou can get more information from

Accessibility at Penn StateLearn more from “International Music Links”

This strategy works across all tools!

Scanning Links on a Screen Reader

Headings on a Page Wikipedia article using subheadings to mark topic changes

Headings on ScreenreadersScreenreader

users can call up lists of headers and links in their screenreader and jump to that point in the screen

Headings in HTML EditorAccess in Format

menu

Marking Large Text as Headings

HTML EditorsLook for Heading 1…Heading 6

menu option=H1,H2…H6 tags

WordHeading 1…Heading 6 styles

PowerPointSlide titlesBullet levels

Tables: Simple vs ComplexSimple Tables

Have no merged cells or empty cellsRows represent one type of dataColumns represent another type of dataAre easier to accessifyAre easier for screen readers to process

Complex TablesAre popular, but not always user friendlyTricky to maintain Often based on layout from print sources

We have different options on the Web!

Well Marked Data TableCAPTION

“Windows ALT Code for Currency Symbols”

TH = Table Header1st row1st columnHeaders allow

screen readers to match cell with row, column

ANGEL Table Tools Allows you to add caption, headers,

summary (invisible, but read on screen reader)

TABLE Troubleshooting 1

Add Styled Captions, Headers

Very Very Complex Table

Maybe it’s a ListProto Germanic (750 BC - 1 AD)

I. East Germanic (1 AD - 300 AD)a. Gothic† (mostly extinct by 9th century AD)

b. Vandalic† (extinct by 6th century AD)

c. Burgundian (extinct by 6th century AD)

d. Crimean Gothic†

II. West Germanic (1 AD - 300 AD)a. Irminonic (High German) to Old High German to German

b. Istaevonic/Franconian to Old Frankish to Middle Dutchi. Dutch

ii. Afrikaans

c. Ingvaeonici. Old Saxon to Low German/Saxon

ii. Anglo-Frisian

A. Old Frisian to Modern Frisan

B. Old English1 Scots2 English

Accessifying Tableshttp://accessibility.psu.edu/

http://accessibility.psu.edu/tablesChoose technology option

Website includesEvent CalendarWhat To FixFixes for

Common Tools (covers many teaching tools)Multimedia (Video/Animation)Web Developer Reference

Color Contrast (Luminosity)Affects low vision, color deficient

Not too vivid or too bright

But not too subtle or too light eitherLike medium red, dark gray, dark teal on

whiteAvoid orange/yellow and white

Use with black instead

Read Morehttp://accessibility.psu.edu/contrast

Supplement Color CodingUse color coding, but

make sure it’s OK in black and whiteGreen check & red XLabels in or near colored areasRed-blue safer than red-green

Read Morehttp://accessibility.psu.edu/color

Assessments:Quizzes and Questions

Override Settings by TeamIf a user requires a personal accommodationExtra time on quiz or dropboxSpecial quiz setting

One page at a time for screen readers

Deadline extension (for anyone)

Create “team” of 1, and override settingsTeams tool in Manage tab

http://kb.its.psu.edu/cms/article/106http://kb.its.psu.edu/cms/article/27

Access Settings and Team List

Override Settings, Advanced

ANGEL Select Question page

Radio Button: Accessible and Usable Found in Multiple Choice, True/False

Highly accessibleThe radio button is easy to selectgives the user the option to select before and after the

question.http://accessibility.psu.edu/angel#quiz

Multiple Select Questions: Accessible and Usable

Check boxes are provided that have the same beneficial functions the Radio Button; before and after selection!

Specify “Check all that apply”

Combo box Popup: Accessible BUT NOT Usable

Combo box popup

The selection boxes do NOT repeat after the question.

Multiple selecting required. One to select the pop up. Second to select a choice.

The alphabetical bulleting is automatically formatted even though the combo box popup is numerical selections for ordering questions.

Choices can be selected more than once.

Matching: Accessible, NOT Usable

Requires a tabular list of information above.

Long list of choices maybe cognitively challenging on short-term memory.

Ordering; Accessible, NOT Usable

Ordering Issues Combo box popups in ordering

questions use numerical selection and is associated with an alphabetical order in ANGEL.

The task is NOT explained in context of the selection tool.

The same number can be selected twice.

Difficult to navigate back to change an answer.

Re-worded Ordering Questions

Explain the task

Limit the number of items to be ordered.

Combo popup boxes still NOT user friendly.Use Multiple Choice version of question. Still difficult to navigate to change answersMultiple selecting process

Multiple Choice Alternate for OrderingWorst version

More usable multiple choice

Fill-in-the-Blank: Accessible and can be Usable

Potential GotchasThe task maybe unclear.The blank space requires filling-in before the context of the

sentence is understood.Navigating back to the blank space is difficult.

The Usable and AccessibleFill-in-the-Blank

Provides the user to hear the entire sentence first before inputting the answer.

Allows the user to hear the entire paragraph before entering the answer.

Using a word bank? Identify them and place them before the paragraph.

How to write a Fill-in-the-Blank/Cloze

Use _1_ to control position first blankThen _2_, _3_...

NOT AccessibleGames/Flash

Games = Crossword Puzzle,Quiz Show

Wrapup

Files/LinksAll should be accessible as possible

Decent optionsMany HTML EditorsMicrosoft Word & PowerPointhttp://accessibility.psu.edu/tools

Very Difficult to AccessifyPDF, Flash

Microsoft Office AccessibilitySee other ITS Training Sessions

Microsoft Office AccessibilityAdd ALT TagsUse Headings (and Slide titles)Use legible fontsColor contrast in slidesHeaders, titles for tableshttp://accessibility.psu.edu/microsoftoffice