<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

Accessibility & Universal Design

#left-nav-subpage-wrap .grid_3 #left-navigation .TAL strong {<br/>color: #623100;<br/>}<br/>#left-nav-subpage-wrap .grid_3 #left-navigation .TAL {<br/>color: #3C1E00;<br/>}

#left-nav-subpage-wrap .grid_3 #left-navigation h3 strong {<br/>color: #D5580D;<br/>}

#left-nav-subpage-wrap .grid_3 #left-navigation h5 {<br/>color: #000040;<br/>}<br/>.grid_3 #left-navigation #facultyfocus h3 .TAL {<br/>color: #E67300;<br/>}<br/>#left-nav-subpage-wrap .grid_3 #left-navigation h3 strong {<br/>font-family: Verdana, Geneva, sans-serif;<br/>color: #000040;<br/>}<br/>ol.d {list-style-type:circle;}

div.answer {display:none}<br/>p.close {text-align:right}<br/>ol.d {list-style-type:circle;}

/***********************************************<br/>* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)<br/>* This notice MUST stay intact for legal use<br/>* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more<br/>***********************************************/

animatedcollapse.addDiv('GuidelineA', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineB', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineC', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineD', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineE', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineF', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineG', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineH', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineI', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineJ', 'fade=1')<br/>animatedcollapse.addDiv('GuidelineK', 'fade=1')<br/>animatedcollapse.addDiv('Check', 'fade=1')<br/>animatedcollapse.addDiv('Desc', 'fade=1')<br/>animatedcollapse.addDiv('DSO', 'fade=1')<br/>animatedcollapse.addDiv('FacCenter', 'fade=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted<br/>//$: Access to jQuery<br/>//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID<br/>//state: "block" or "none", depending on state<br/>}

animatedcollapse.init()

$(document).ready(function($){<br/> $('#accordion-1').dcAccordion({<br/> eventType: 'click',<br/> autoClose: true,<br/> saveState: true,<br/> disableLink: true,<br/> speed: 'slow',<br/> showCount: false,<br/> autoExpand: false,<br/> cookie: 'dcjq-accordion-1',<br/> classExpand : 'dcjq-current-parent'<br/> });<br/> <br/>});

Accessibility:<br/> All written materials on this page were sourced from the District Accessibility Webpage <br/> This page has been created to assist those at Eastfield looking for information specific to Accessibility and how to "translate" these requirements. The Faculty Center supports the efforts <br/> of the District by giving faculty the "tools to their accessibility toolbox" to achieve multimodal learning at Eastfield. The below information applies to all instructors (F2F, Hybrid, & Online) and is meant to only serve as a resource, not a comprehensive source of training. <br/> Each guideline link below will contain the following information:<br/> <br/> <br/> <br/> Guideline:<br/> Guideline Statement<br/> <br/> <br/> <br/> Applies to:<br/> Who this can apply to <br/> <br/> <br/> Explanation:<br/> Translated message with helpful tips to understand how it relates to you<br/> <br/> <br/> Resources:<br/> <br/> - Link to an embedded video created by the Faculty Center <br/> - Lynda Tutorial Link(s) - How to Login to Your Free Lynda Account<br/> - Written tutorial(s) explaining how to perform the required task<br/> <br/> <br/> <br/> <br/> <br/> Click here if you would like to download the master document rather than using this site: ADA Toolbox Master Guide (In Progress) <br/> <br/> Guidelines A, B, C, D, E, F, & G Are Complete <br/> <br/> Guideline A: Alt Tags<br/> <br/> <br/> <br/> <br/> <br/> Guideline:<br/> A text equivalent for every non-text element shall be provided.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> Persons with disabilities using assistive technology such as screen readers must have content in a text format in order to access the information. Objects in a website or All Instructors such as graphics, pictures, videos, audio, should have a text description.<br/> <br/> Adding an "Alt Tag" to a picture in an online course allows a student who is blind to read the description with a screen reader. Providing closed captioning and transcripts for video and audio provides a student who is deaf with information that can be read so she/he can listen to the information being spoken.<br/> Example: The "Alt Tag" is an option when inserting a picture into an online course or in the properties of a picture in a Microsoft Office Document that allows for a description to be inserted. <br/> "Describe the image as if you had your eyes closed and what information you want the student to retain for a test."<br/> <br/> <br/> Resources:<br/> Guideline A Tutorial Youtube Video: Guideline A <br/> Link to Lynda.com Tutorial: Adding Alternative Text in Word

Guideline B: Closed Captioning<br/> <br/> <br/> <br/> <br/> Guideline:<br/> Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> Closed captioning for videos and audio or descriptive notes for PowerPoint presentations should always be readily available to student with disabilities (blind and/or deaf). The closed captioning should be synchronized so that the information being presented in the video is the same information being conveyed by the text in the closed captioning. <br/> <br/> If your publisher offers video or audio content that is not closed captioned, contact the publisher directly to request that these sources be transcribed/captioned for your students. <br/> If the content is copyrighted, try contacting the host provider to caption. <br/> If your content was created by you, then contact Jason Busbin for training and options for captioning your video/audio. <br/> <br/> <br/> Resources:<br/> Guideline B Tutorial Youtube Video: Guideline B <br/> Link to Lynda.com Tutorial: Captioning in Camtasia<br/> Link to YouTube Tutorial: Adding Captions

Guideline C: Importance Conveyed Using Text Color<br/> <br/> <br/> <br/> <br/> Guideline:<br/> Web pages shall be designed so that all information is also available without color, for example from context or markup.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> This is most relevant for persons who are blind or color blind. Whenever the importance of information is conveyed by using color alone, then that importance is not communicated to those who cannot see the color of the text. An example would be using the color red to indicate significance of text. Instead use a phrase such as, "This is important informationâŚ" Color can still be used but now a student who is blind or color blind will understand the importance assigned to the text. <br/> Note: This applies to all course content, files, and presentations - not just web pages <br/> <br/> <br/> Resources:<br/> Guideline C Tutorial Youtube Video: Guideline C Link to Lynda.com Tutorial: Formatting Font

Guideline D: Style Sheets

Guideline:<br/> Documents shall be organized so they are readable without requiring an associated style sheet.<br/> <br/> <br/> <br/> Applies to:<br/> Web Designers<br/> <br/> <br/> Explanation:<br/> An advantage to using style sheets is the ability to turn off the style sheet and view the page in settings set by the user in the browser. The user can turn off color, change the default colors, increase contrast, or even change the font and size to a more accommodating setting. For those who do not utilize style sheets, focus on using headings and consistent formatting across all content.<br/> <br/> Since this guideline primarily applies to Web Designers, instructors who don't create web pages or work with style sheets can disregard this guideline.<br/> <br/>Below is a link to a Lynda tutorial for those who wish to learn how to create and use style sheets - these are extremely useful when creating websites and modifying your page styles.<br/> <br/> <br/> Resources:<br/> Guideline D Tutorial <br/> Youtube Video: Guideline D Link to Lynda.com Tutorial: Using CSS Style Sheetshttp://www.lynda.com/Web-Interactive-CSS-tutorials/CSS-Core-Concepts/80435-2.html?org=dcccd.edu

Guideline E: Image Maps (Interactive Images)

Guideline:<br/> Redundant text links shall be provided for each active region of a server-side image map.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> Image maps or interactive images where a student must choose a selection from an assigned area, such as on a state map or pictures, can be inaccessible to a student who is blind and using a screen reader. Drag and drop tests are also a problem and should be avoided when possible since a student who is blind is unable to use the mouse to perform such actions. If an alternative format does not exist and such tests must be used, the image map should be set up by a web designer and tested with assistive technology such as the JAWS screen reader for accessibility compliance. Otherwise, an alternative format must be offered, considering in its design that it maintains equal access for the student and their disability.

Whenever using Matching & Hotspot question types in eCampus, be aware that these questions may cause issues for this using a screen reader <br/><br/> If you currently use these question types or evaluate using this medium, consider modifying/replacing with more accessible format types such as multiple choice & true/false.<br/> <br/> <br/> <br/> Resources:<br/> Guideline E Tutorial <br/> Youtube Video: Guideline E <br/> Lynda.com Tutorial: Adding Alt Tags to your Image Maps (web designers)http://www.lynda.com/Dreamweaver-tutorials/web-accessibility-principles/448-2.html?org=dcccd.edu

Guideline F: Table Headings

Guideline:<br/> Row and column headers shall be identified for data tables.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> This is most relevant for those using a screen reader. The official guideline states: "Row and column headers shall be identified for data tables. Markup shall be used for data tables that have two or more logical levels of row or column headers."<br/> Essentially, this is stating that you need to label your rows as well as your columns using titles or headers. This is something that can be identified using the Accessibility Checker in MS Office Programs (see "Using Accessibility Checkers" below for more info) and can be resolved quickly and easily. <br/> When building your table, just be sure to create a column and a row header/title to identify the data easily for those using screen readers.<br/> <br/>If you have a complex table, be sure to detail the layout of the table in text below or above to assist with navigating your data. <br/> <br/> <br/> <br/> Resources:<br/> Guideline F Tutorial <br/> Youtube Video: Guideline F <br/> Link to Penn State University's Accessibility Page on Tableshttp://accessibility.psu.edu/tables

Guideline G: Frame Titles and Headings

Guideline:<br/> Frames shall be titled with text that facilitates frame identification and navigation.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> When designing an online course or website, having continuity between content is ideal so that a student (who may possibly be blind or have a learning disability) can become familiar with the format of your page quickly and easily. Since frames are most commonly utilized by web designers, we'll focus on good document design which is beneficial to all course instructors. <br/> Setup your headings, fonts, and styles in MS Office on your home computer or laptop. That way, whenever you create a new item for your course, your content will have good continuity across all areas (See links below for tutorials on how to setup your settings) <br/> <br/>(Web Designers) See the below link for setting up your frames to meet accessibility guidelines<br/> <br/> <br/> <br/> <br/> <br/> <br/> Resources:<br/> Guideline G Tutorial <br/> Youtube Video: Guideline G <br/> Link to WebAIM: Creating Accessible Frames and Iframes http://webaim.org/techniques/frames/

Guidelines H through J are in progress <br/><br/> Guideline H: Animated Images

Guideline:<br/> Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2Hz and lower than 55Hz.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> Flickering and flashing page elements can cause epileptic seizures in some viewers. They are also disruptive to many readers with cognitive disabilities or low vision.

If you are using animated images (graphics or text), you must ensure that your content's flickering (or color change) is out of the 2Hz - 55Hz (Hz is a cycle per second) range. If it looks like it could be too much to handle, it probably will be a problem. <br/>(For those who work with HTML: You also should not use the blink or marquee tag to make text blink or move.)<br/><br/> <br/> <br/> If you do utilize automatically moving, blinking, or scrolling content that lasts longer than 5 seconds, you must ensure that the object can be paused, stopped, or hidden by the user.<br/> <br/> <br/>(Web Designers) See the below link to learn more about seizures, definitions of good and bad animations, as well as a few examples of what NOT to do. <br/><br/> <br/> <br/> Resources:<br/> Guideline Tutorial <br/> Youtube Video: Guideline ** <br/> WebAIM: Seizure Disordershttp://webaim.org/articles/seizure/

Guideline I: Forms

Guideline:<br/> When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> While this guideline mostly applies to web designers, this information can be useful to instructors in that it can help ensure your assignments, discussions, and assessments are easy to follow for those using screen readers.

Ensuring that you follow the below best practices will improve your student's participation rates on forms, assignments, discussions, and assessments:<br/> <br/> <br/> Clear instructions provided at the beginning <br/> Fields are labeled properly and organized in a logical order<br/> Audio information is not the only method used to indicate completion<br/> Ensure form constraints are clearly indicated <br/> (i.e. field requirements, required fields, and security information)<br/><br/> <br/>Below is a link to a WebAIM article describing the elements of an accessible form. The article focuses on web forms, BUT the logic and best practices certainly apply to any course content provided to students.<br/><br/> <br/> <br/> Resources:<br/> Guideline Tutorial <br/> Youtube Video: Guideline ** <br/> Link to WebAIM Article: Creating Accessible Formshttp://webaim.org/techniques/forms/

Guideline J: Timed Responses

Guideline:<br/> When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.<br/> <br/> <br/> <br/> Applies to:<br/> All Instructors and Web Designers <br/> <br/> <br/> Explanation:<br/> *Statement* <br/> <br/> <br/> Resources:<br/> Guideline Tutorial <br/> Youtube Video: Guideline ** <br/> Link to Lynda.com Tutorial: Captioning in CamtasiaLYNDA LINK

Other Tips & Helpful Resources: (In Progress)<br/><br/> Using Accessibility Checkers

Tip:<br/> Always remember to check documents for accessibility issues and observe tips or warnings for corrections after making ANY changes to the document.<br/> <br/> <br/> <br/> Resources:<br/> EFC Guide to Accessibility Checking Tools <br/> <br/> <br/> Lynda.com Video: Accessible PDFs <br/> http://www.lynda.com/Acrobat-tutorials/Creating-Accessible-PDFs/147579-2.html?org=dcccd.edu<br/> <br/> Microsoft's Accessibility Checker http://office.microsoft.com/en-us/starter-help/check-for-accessibility-issues-HA010369192.aspx

Using Descriptive Links

Tip:<br/> In the past web page content designers have used "click here" or a repetitive description that does not work well for people using screen readers so instead of writing your page to say "For a list of atomic elements, click here" just make "list of atomic elements" the link.<br/> <br/> <br/> <br/> Resources:<br/> Guideline Tutorial <br/> <br/> Oregon State University: Descriptive Links<br/> http://oregonstate.edu/accessibility/descriptivelinks<br/> <br/> Perdue University: Don't "Click Here"<br/> https://www.purdue.edu/learning/blog/?p=5160<br/> <br/> <br/> <br/> (Web Designers)W3C Page: Provide Purpose of a Link <br/> http://www.w3.org/TR/WCAG20-TECHS/G91.html<br/> <br/> <br/> Link to Lynda.com Tutorial: Captioning in CamtasiaLYNDA LINK

Your EFC Disability Services Office (DSO)

Hours:<br/> <br/> Mon - Thurs<br/> 8:00 am - 6:00 pm<br/> Fri<br/> 8:00 am - 5:00 pm<br/> Disabilities Services Office (DSO)<br/><br/>Phone: 972-860-8348<br/> Fax: 972-860-7622<br/> Email: efcdso@dcccd.edu<br/>Eastfield DSO Website http://www.eastfieldcollege.edu/ssi/DSO/<br/> <br/> The Disability Services Office provides a variety of support services for students with disabilities. Services are coordinated to fit the individual needs of the student and may include sign language interpreters, computer aided real-time translation (CART) services, notetaking services, tutoring referral, alternative format texts, testing accommodations, and use of assistive technology. Academic advising, registration, and referral information are also available.

Faculty Center "Universal Design Resources"

What Universal Design Resources are available to instructors?<br/> <br/> <br/> <br/> <br/> <br/> Hardware:<br/> All of the following are available inside the Faculty Center Accessibility "Nook":<br/> <br/> 2 Production PCs with Dual Monitors<br/> 2 High Definition (HD) Microphones<br/> 1 HD Webcam<br/> Scanner<br/> <br/> <br/> <br/> <br/> Software:<br/> *Statement* <br/> Camtasia Studio 8 (Video recording and Editing)<br/> SnagIT (screen capture) <br/> Dragon Naturally Speaking (Version 12)<br/> Adobe Elearning Suite (Version 2) <br/> Adobe Acrobat (editing PDFs) <br/> Any Video Converter (free video/audio conversion) <br/> <br/> <br/> <br/> <br/> Recommended Websites:<br/> <br/> <br/> DCCCD Accessibility Webpage<br/>http://online.dcccd.edu/accessibility/<br/> Lynda.com Homepage<br/> http://lynda.com<br/><br/> Penn State's Accessibility Site<br/>http://accessibility.psu.edu/<br/> WebAIM's Web Accessibility Checker Tool<br/> http://wave.webaim.org/<br/> Dr Jim Thatcher's Accessibility Website<br/> http://www.jimthatcher.com/<br/> University of Washington's Universal Design Website<br/> http://www.washington.edu/doit/Brochures/Programs/ud.html<br/> Oklahoma State University's Fast Facts: Universal Design http://ada.osu.edu/resources/fastfacts/Universal-Design-FF.pdf<br/> University of Minnesota: "PASS-IT"<br/> http://www.cehd.umn.edu/passit/docs/PASS-IT-Book.pdf<br/> <br/> Ohio State's Web Accessibility Standards<br/> http://www.osu.edu/resources/web/accessibility/

/**/

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");<br/>document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));<br/><br/><br/>try {<br/>var pageTracker = _gat._getTracker("UA-8609944-1");<br/>pageTracker._trackPageview();<br/>} catch(err) {}