1. Accessibility in Online Teaching Tri-County Community College August 13, 2012

2. For more information about the Professional Development Center contact: Jennifer Jones (919) 866-5636 jjones4@waketech.edu Session Resources: vlcprofessionaldevelopment.pbworks.com VLC Professional Development Center

3.  Degree at which a product, device, service or environment is available to everyone and for the same purpose, regardless of ability.  Universal Access is the goal What is Accessibility?

4.  Set of principles and techniques for creating inclusive classroom instruction and materials.  UDL & Accessibility work together to promote access to all students.  Accessibility = Compatibility with adaptive tools  UDL = Bigger picture; Design of course Universal Design for Learning (UDL)

5.  Accessible courses, designed with accessibility and Universal Design for Learning (UDL) in mind, are beneficial to all students, not just those with a disability.  Designing and building the course right the first time, saves time in having to rebuild it later on.  It’s the law! Why Make Content Accessible?

6.  Amended in 1998, Section 508 is a part of the Rehabilitation Act of 1973 requiring Federal agencies to make electronic and information technology accessible to individuals with disabilities.  2001 were labeled as standards and carry the full weight of the law. Section 508

7.  States that no state entity, including educational institutions, may: "…refuse to provide reasonable aids and adaptations necessary for a known qualified person with a disability to use or benefit from existing public services operated by such entity; provided that the aids and adaptations do not impose an undue hardship on the entity involved. This subsection includes equivalent services provided via information technology" (G.S. 168A-7, Section 3) NC General Assembly, Bill 866

8.  Equivalent Access means providing Identical Content used by non-disabled users.  Alternative Access provides an alternative learning activity, but achieves same learning objectives.  Only used if Equivalent Access not feasible. Equivalent/Alternative Access

9.  Color contrast  Accessible fonts and text formatting  Structure and formatting  Hyperlinks Accessibility Guidelines

10.  Consider color contrast for those with color blindness and vision impairments Contrast

11. Light Colors Dark Colors Effective Not Effective Color Wheel

12.  Select basic, simple, easy to read fonts  Sans Serif Examples  This is Arial This is Verdana  This is Tahoma Font Accessibility Rules (Web)

13.  Use a limited number of fonts  Use no more than 3 different fonts or text colors  If varying fonts styles, limit the use to headings  Headings style dropdown menu should be used for screen readers  Avoid small font sizes  Use the default style sizes and font  Limit the use of font variations such as bold, italics, and all capital letters. Font Accessibility Rules (Web)

14.  Never use Color Alone to Convey Information  Colorblind users may not be able to discern color- based variation  Vischeck sample works of art as seen with color blindness (opens in new window) Vischeck sample works of art as seen with color blindness (opens in new window)  Color blindness simulators help identify possible challenges  Coblis colorblind simulator (opens in new window) Coblis colorblind simulator (opens in new window) Font Accessibility Rules (Web)

15. Bad Example  Lines that must be memorized for the next quiz are in red. Font Accessibility Rules (Web)

16. Good Example  Lines that must be memorized for the next quiz are in red and bold.  A variation could be seen. Font Accessibility Rules (Web)

17.  Avoid blinking and animated text  Avoid excessive text effects Font Accessibility Rules (Web)

18. Text longer than a few paragraphs needs structure to make it easier to understand  True heading styles are not just bold or enlarged  They provide meaningful structure for all students, but also for Screen Readers. Establish Hierarchy: Structure your Text Content

19.  Alternative text provides a textual alternative to non- text content, like videos, images and graphs  Alternative text conveys the meaning of the context in which the image is used  Who benefits from alternative text?  Users with Screen Readers  Users with technical difficulties Alternative Text

20.  Every visual non-text element must have a text-based replacement.  Alternative text should replace a visually exclusive component with words that convey the equivalent meaning, serve the same purpose, and are in context with the objective of the content.  Alternative text should provide the same information in an alternative format to accommodate more than a single sense. Alternative Text

21. Use alternative text for:  Images  Diagrams  Charts  Graphs  Tables that may be interpreted as graphical elements When to Use Alt Text

22. Questions to consider:  What information is the visual element representing?  What is the specific purpose of the visual element?  Without the visual element, what words would provide the same information, or serve the same function?  Is the visual element merely decorative? Consider eliminating visual elements that do not serve a clearly defined purpose.  Does the visual element contain words that are important to understanding the subject matter? The alternative text should always include essential words that are part of the non-text visual element. Writing Meaningful Alt Text

23. Alternative Text Examples  An architecture course in studying the three types of Greek columns.  A global logistics class is mapping familiar, famous addresses with a variety of mapping tools.  Just for design or to break up the space

24. Long Descriptions  Complex images, diagrams, graphs, and charts that require more information than can be expressed as alternative text require long descriptions.  Long Descriptions are not read within the context of the page when using screen readers and open in new document

25.  Hyperlinks are active connections from one web location to another.  Assistive technologies, like screen readers, allow links to be pulled out of context. This means the user may not hear the text that surrounds the link. Hyperlinks

26.  Hyperlinks convey  Where is the link going?  Why is the link provided?  What else happens?  In many cases the Where and the Why are closely related. Writing Accessible Hyperlinks

27. Accessible Hyperlink Example EXAMPLE: A science instructor is sending students to WRAL TV Online to observe current local weather radar readings. Do This WRAL Online Local Weather Radar opens in a new windowWRAL Online Local Weather Radar opens in a new window http://www.wral.com/weather/radar/ Not This http://www.wral.com/weather/radar/ Click Here

28.  Documents require interpretation by a server, browser or LMS  Some text characters cause computer to assume a command and are illegal to use  Can cause files to be inaccessible to students  LMS may generate error based on file name File Naming Conventions for Web

29.  SHORT AND SWEET  No more than 32 characters  NICE AND NEAT  No spaces  ABC AND 123  Alphanumeric characters with the exceptions of hyphens ( – ) and underscores ( _ )  START OUT RIGHT  First character of file name is a letter, prefer lower case The Rules for Naming Files

30. Do This:  public1myDogLilly.doc  macbethCharSummJonesDraft1.doc Not This:  Connie Q. Public ENG.100.4203 Rough Draft.doc  #1 Draft Macbeth Character Summary Mary Jo Jones.doc File Naming Examples

31.  Tab Access and Focus  Use the tab key to navigate the web page  Structure and Hierarchy  WAVE Web Accessibility Evaluation Tool (opens in new window) WAVE Web Accessibility Evaluation Tool (opens in new window) Testing for Accessibility

32.  Color Contrast Checkers  WebAim Color Contrast Checker (opens in new window) WebAim Color Contrast Checker (opens in new window)  WCAG Contrast Checker (opens in new window) WCAG Contrast Checker (opens in new window)  Add-on for Firefox web browser  WebAIM – Web Accessibility in Mind  WebAIM Quick Reference: Testing Web Content for Accessibility (opens in new window) WebAIM Quick Reference: Testing Web Content for Accessibility (opens in new window)  Online guide to testing web content Testing for Accessibility (2)

33. Let’s test some sites!

34. Questions?