Elizabeth Pyatt, D. Tusler ITS/TLT, Accessibility and ANGEL.

Slides:



Advertisements
Similar presentations
Whats New in Office 2010?. Major Changes in Office 2010 The Office Ribbon, which first made its appearance in Office 2007, now appears in all Office 2010.
Advertisements

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
Chapter 3 Creating a Business Letter with a Letterhead and Table
ADA Compliant Websites & Documents What the heck am I supposed to do?
1 ADVANCED MICROSOFT POWERPOINT Lesson 5 – Using Advanced Text Features Microsoft Office 2003: Advanced.
Microsoft ® Office Word 2007 Training Table of Contents II: Customize your TOC [Your company name] presents:
1. 2 A disability justice movement working to transform communities. Home of Michigan’s Assistive Technology Program MDRC’s Web Page:
XX/XX/XX Presenter names Position Title Accessibility “How to”
Creating Accessible Word Documents by Debbie Lyn Jones, IT Manager I, NSU Webmaster FRIDAY, JANUARY 23, 2015.
Creating Accessible Instructional Materials
POWERPOINT TRAINING Introduction to Effective Image Usage in Powerpoint. Eileen Fry Indiana University Sept
How to Create Accessible PowerPoint Presentations Elizabeth Tu and Thayer Watkins April, 2010.
Inventory Throughout this slide show there will be hyperlinks (highlighted in blue) follow the hyperlinks to navigate to the specified Topic or Figure.
Adobe Reader and Acrobat Professional Adobe LiveCycle Designer Microsoft Office Word PowerPoint.
Accessibility Tools in Microsoft Office 2010 and 2013 ADA Conference 2014 Norah Sinclair Tessa Greenleaf.
Creating and publishing accessible course materials Practical advise you can replicate.
Accessible Word Document Training Microsoft Word 2010.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
 What is web accessibility? ture=relatedhttp://
Accessibility Testing By Audience Need Elizabeth J. Pyatt, Ph.D. Christian Vinten-Johansen Information Technology Services.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Understanding WCAG Elizabeth J. Pyatt, Ph.D. Information Technology Services.
Elizabeth Pyatt, Blockers: What do I REALLY Need to Fix?
Accessibility Standards. This PowerPoint will cover: – Web accessibility standards – Word file accessibility – PDF accessibility – PowerPoint accessibility.
Web Technologies Website Development Trade & Industrial Education
XP New Perspectives on Microsoft PowerPoint 2002 Tutorial 1 1 Microsoft PowerPoint 2002 Tutorial 1 – Creating a PowerPoint Presentation.
Technology for Students with Special Needs E.Brown Forward.
Creating a PowerPoint Presentation
1.Introduction 2.How to use this module 3.Learning outcomes 4.Text 5.The Master slide 6.Hyperlinks 7.Slide Management 8.Multiple Choice Questions 9.Exploring.
Website Development with Dreamweaver
CREATING A POWERPOINT PRESENTATION. Planning a presentation Create a presentation Rearrange and delete text and slides Add animations Add transitions.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Accessible Word and PDF documents
McGraw-Hill Career Education© 2008 by the McGraw-Hill Companies, Inc. All Rights Reserved. Office Word 2007 Lab 3 Creating Reports and Tables.
WEB ACCESSIBILITY TRAINING FOR CONTENT MANAGERS.
Creating Accessible Content in Microsoft Office 2010 NC Basic Skills Instructor Training Academy 2012.
Elizabeth Pyatt See Notes panel for image ALT tags Optimizing Sites at Penn State (Word Press) for Accessibility.
Creating Accessible Presentations Richard Steinberg Texas Department of Assistive and Rehabilitative Services (DARS)
Word Create a basic TOC. Course contents Overview: table of contents basics Lesson 1: About tables of contents Lesson 2: Format your table of contents.
TABLE OF CONTENTS 2014 BasmahAlQadheeb. What is a report? A report is a clearly structured document that presents information as clearly as possible.
+ Accessible Document Basics Cindy Compeán Accessibility/Assistive Technology Specialist
Summary Slide Printing Handouts Animations Slide Transitions Animate text Hyperlinks Action Buttons Adding sound to your PowerPoint presentationAdding.
Elizabeth Pyatt, Blockers: What do I REALLY Need to Fix?
Accessible Word Document Creation Using Microsoft Word 2010.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
+ Publishing Your First Post USING WORDPRESS. + A CMS (content management system) is an application that allows you to publish, edit, modify, organize,
Laboratory Exercise # 10 – Microsoft Word Additional Topics Office Productivity Tools 1 Laboratory Exercise # 10 Microsoft Word Additional Topics Objectives:
Writing Accessible Electronic Documents with Microsoft® PowerPoint
Elements of Accessibility in Online Courses Dallas County Community College District Technology Summer Institute June 10, :45-12:45.
Accessibility and Teaching Online Beth Case Program Manager for Digital, Emerging, and Assistive Technologies University of Louisville, Delphi Center.
Creating Section 508 Compliant Documents & Presentations
Creating a Presentation
Seven Steps to Creating an Accessible Microsoft Word Document
Setting Defaults in Microsoft Word for Accessibility
Creating Accessible PDFs from Word Docs
Creating Accessible Electronic Content
Creating ADA Compliant Resources
© Paradigm Publishing, Inc.
Getting Started with Accessibility: Accessibility Checkers
Tutorial Tutorial Read all the directions before proceeding
Creating Section 508 Compliant Documents & Presentations
Creating Accessible PowerPoint Slides
Benchmark Series Microsoft Word 2016 Level 2
Creating Section 508 Compliant Documents & Presentations
ADA Compliant Website & Documents
Web content management
Accessibility Guide.
Creating Accessible Microsoft Word Documents
Add some WordArt to your cover slide
Making Documents Accessible
Presentation transcript:

Elizabeth Pyatt, D. Tusler ITS/TLT, Accessibility and ANGEL

Outline  Policy & Audiences  Communication Tools  Display Options  HTML Editor  Quizzing  Other Accessibility Resources

Audiences & Policy

Accessibility Audiences  Blind (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 Hearing  Captions & Transcripts  Captions also benefit other students 

More Audiences  Cognitive/Learning  May require extended time on quizzes/assignments  Usability & legibility critical  Neurological (e.g. Epilepsy)  Please don’t flicker quickly  Motion Impaired  Can’t use hands (easily)  Keyboard access easiest  Avoid Mouse Only

Syllabus Statement  Syllabus statement pointing students to Office of Disability Services is required in all syllabi Syllabus statement Office of Disability Services 

Accommodations Policy  Required  When instructor receives accommodation letter from Office of Disability Services  Recommended  Easy fixes recommended for all courses  Saves time if accommodation required  Improves experience for other students  Online/Hybrid  Can you talk to a local instructional designer?

Critical Issues  Usable ANGEL components  Images/Image Maps/Animations  Add 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 Options  Section 508  Frame free view  Screen reader friendly

Section 508 View

Custom 508 View

Display Options  For Students  508/PDA  Removes frames   Accessibility Profile  Customizes fonts, colors, screen reader settings  

ANGEL Communication Tools   Forward ANGEL mail to “Internet” account  Discussion Board  Consider Blogs (w/commenting)  Chat  Consider alternate chat client (e.g. IM tools or Skype)

ANGEL HTML Editor

 Available in multiple tools  , page, quiz (“assessment”), dropbox, syllabus editor  Benefits  Good editing tools  HTML easiest for screen readers, other tool to process

ALT Tag/Text/Attribute  Text which replaces image if it can’t be processed  ALT=“Washington at Valley Forge in winter snow”  Appears when image fails to load Image from Wikipedia

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 Texas 1.Wow, Six flags over Texas! 2.Image taken from Wikipedia. Photo by Ann W px_Six_flags_over_Texas.jpg 4.Photo shows flags of Spain, US, Mexico, France, Republic of Texas and Confederate flag 5.Photo of six flags read information below 6.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 Images  Too 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 Exercises Twinned Pyrite Crystal (Wikipedia) Athens Greece (Wikipedia)

Unclear Link Text  Avoid  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 because  Screen readers search for/scroll through links  “ Here ” is small (hard to find) and ambiguous  Try This  You can get more information from Accessibility at Penn StateAccessibility at Penn State  Learn more from “International Music Links”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 Screenreaders  Screenreader users can call up lists of headers and links in their screenreader and jump to that point in the screen

Headings in HTML Editor  Access in Format menu

Marking Large Text as Headings  HTML Editors  Look for Heading 1 … Heading 6 menu option  =H1,H2…H6 tags  Word  Heading 1…Heading 6 styles  PowerPoint  Slide titles  Bullet levels

Tables: Simple vs Complex  Simple Tables  Have no merged cells or empty cells  Rows represent one type of data  Columns represent another type of data  Are easier to accessify  Are easier for screen readers to process  Complex Tables  Are popular, but not always user friendly  Tricky to maintain  Often based on layout from print sources  We have different options on the Web!

Well Marked Data Table  CAPTION  “Windows ALT Code for Currency Symbols”  TH = Table Header  1 st row  1 st column  Headers 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 List  Proto Germanic (750 BC - 1 AD) I.East Germanic (1 AD 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 AD) a.Irminonic (High German) to Old High German to German b.Istaevonic/Franconian to Old Frankish to Middle Dutch i.Dutch ii.Afrikaans c.Ingvaeonic i.Old Saxon to Low German/Saxon ii.Anglo-Frisian A.Old Frisian to Modern Frisan B.Old English 1Scots 2English

Accessifying Tables    Choose technology option  Website includes  Event Calendar  What To Fix  Fixes 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 either  Like medium red, dark gray, dark teal on white  Avoid orange/yellow and white  Use with black instead  Read More 

Supplement Color Coding  Use color coding, but make sure it’s OK in black and white  Green check & red X  Labels in or near colored areas  Red-blue safer than red-green  Read More 

Assessments: Quizzes and Questions

Override Settings by Team  If a user requires a personal accommodation  Extra time on quiz or dropbox  Special quiz setting  One page at a time for screen readers  Deadline extension (for anyone)  Create “team” of 1, and override settings  Teams tool in Manage tab  

Access Settings and Team List

Override Settings, Advanced

ANGEL Select Question page

Radio Button: Accessible and Usable  Found in Multiple Choice, True/False  Highly accessible  The radio button is easy to select  gives the user the option to select before and after the question. 

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 OrderingIssues  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 answers  Multiple selecting process

Multiple Choice Alternate for Ordering Worst version More usable multiple choice

Fill-in-the-Blank: Accessible and can be Usable  Potential Gotchas  The 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 Accessible Fill-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 blank  Then _2_, _3_...

NOT Accessible Games/Flash  Games =  Crossword Puzzle,  Quiz Show

Wrapup

Files/Links  All should be accessible as possible  Decent options  Many HTML Editors  Microsoft Word & PowerPoint   Very Difficult to Accessify  PDF, Flash

Microsoft Office Accessibility  See other ITS Training Sessions  Microsoft Office Accessibility  Add ALT Tags  Use Headings (and Slide titles)  Use legible fonts  Color contrast in slides  Headers, titles for tables 