Accessible Course Materials Made Easy

1. AccessibleCourse MaterialsMade Easy The ACCESS Project Jesse Hausler, UDL/Accessibility Coordinator Craig Spooner, Coordinator

2. The ACCESS Project • Universal Design for Learning (UDL) • Funded by U.S. Dept. of Education, Office of Postsecondary Ed. • Winner of 2008 N. Preston Davis Group Award for Instructional Innovation • Partnering with The Institute for Learning and Teaching (TILT), College of Natural Sciences, CVMBS

3. Defining UDL “ Universal Design for Learning is a set of principles and techniques for creating inclusive classroom instruction and accessible course materials. teaching technology ”

4. Creating Accessible Documents • Accessibility starts with the “native editor”: • Word processor • Spreadsheet • Desktop Publishing software • Accessibility features transfer to other formats: • Adobe PDF • HTML • Daisy Talking Books

5. Content, Structure, and Presentation • Content • The actual information you are providing in a document. This can include Text, Images, Videos, or Multimedia. • Structure • The organization of content is structure. This includes headings, lists, tables, emphasis, etc. • Presentation • One can add style rules to structural elements to give documents a particular appearance. Appearance

6. HTML: Content, Structure, and Appearance • Create more flexible web pages with multiple presentations views: • Standard • Print • Small device • RSS

7. HTML: Structure • HTML tags define structure • Headings: <h1> to <h6> • Paragraphs: <p> • Divisions: <div> • Lists: <ul>, <ol>, <dl>, and <li> • Images: <img> • table cells and headers: <td> and <th> • Example in Dreamweaver…

8. HTML: Appearance • Cascading Style Sheets (CSS) control the appearance, position and behavior of elements: • h1 { color: red; } • #logo { position: absolute; left: 0px; top: 0px; } • #menu li a:hover { background-color: red; }

9. HTML: Images and Alt Text • The “alt” attribute of the <img> tag shouldcapture the meaning of an image: <imgsrc=“icecream.jpg" alt=“The girls celebrated Julie’s birthday over large bowls of ice cream."> • Purely decorative images receive the “null” or “empty” alt attribute. Text-to-speech software will skip such images. Example: <imgsrc=“bullet.gif" alt="">

10. HTML: Tables • Use tables for tabular data, not as a framework for page layout. • Keep tables as simple as possible. Avoid nesting one table inside another. • In header row, replace <td> (table data) with <th> (table header) tags.

11. HTML: Simple Tables • <table> • <caption>Lemonade Sales in 2005</caption> • <tr> • <td>&nbsp;</td> • <th scope="col">May</th> • <th scope="col">June</th> • <th scope="col">July</th> • </tr> • <tr> • <th scope="row">Costs</th> • <td>$12</td> • <td>$20</td> • <td>$25</td> • </tr> • <tr> • <th scope="row">Sales</th> • <td>$15</td> • <td>$22</td> • <td>$25</td> • </tr> • <tr> • <th scope="row">Profit</th> • <td>$3</td> • <td>$2</td> • <td>$0</td> • </tr> • </table> • Scope attribute of <th> tag • Indicates one logical row and/or column of headers • Caption • The <caption> tag serves as a label and is bound to the table data.

12. HTML: Complex Tables • Complex Tables: two or more logical rows and/or columns of headers • Must use ‘id’ and ‘headers’ attribute • Complex tables may require the “summary” attribute

13. <table> <tr> <td>&nbsp;</td> <thcolspan="2" id="may">May</th> <thcolspan="2" id="june">June</th> <thcolspan="2" id="july" >July</th> </tr> <tr> <td>&nbsp;</td> <thid="m05" headers="may">2005</th> <thid="m06" headers="may">2006</th> <thid="j05" headers="june">2005</th> <thid="j06" headers="june">2006</th> <thid="jy05" headers="july" >2005</th> <thid="jy06" headers="july" >2006</th> </tr> <tr> <thid="cost">Costs</th> <td headers="cost may m05">$12</td> <td headers="cost may m06">$15</td> <td headers="cost junej05" >$20</td> <td headers="cost junej06" >$22</td> <td headers="cost julyjy05">$25</td> <td headers="cost julyjy06">$28</td> </tr> <tr> <thid="sale">Sales</th> <td headers="sale may m05">$15</td> <td headers="sale may m06">$17</td> <td headers="sale junej05" >$22</td> <td headers="sale junej06" >$25</td> <td headers="sale julyjy05">$25</td> <td headers="sale julyjy06">$30</td> </tr> <tr> <thid="profit">Profit</th> <td headers="profit may m05">$3</td> <td headers="profit may m06">$2</td> <td headers="profit june j05" >$2</td> <td headers="profit june j06" >$3</td> <td headers="profit july jy05">$0</td> <td headers="profit july jy06">$2</td> </tr> </table>

14. HTML: Forms • Group form elements using <fieldset> and <legend> tags. • Add labels to form elements using the ‘for’ attribute of the <label> tag. This attribute keeps labels and form elements linked, regardless of where they appear on the page.

15. Example: fieldset, legend, ‘for’ attribute <fieldset> <legend>Credit Card Selection</legend> <input type="radio" name="credit" id="visa"> <label for="visa">Visa</label> <input type="radio" name="credit" id="mc"> <label for="mc">Master Card</label> <input type="radio" name="credit" id="amex"> <label for="amex">American Express</label> </fieldset>

16. HTML: Traversing a Form • Make sure forms can be navigated from the keyboard using the Tab key. • Avoid JavaScript behaviors that move the focus (cursor position) without notifying the user.

17. HTML: Hyperlinks • Hyperlinks should describe where they will take the user. • Links should make sense when read out of context. • Include destination URL if page is likely to be printed. • Examples: Poor: Click here to visit the Colorado State University home page. Better: Visit the Colorado State University home page (http://www.colostate.edu/). • Allow users to skip over repetitive navigation links and go straight to the main content.

18. ACCESS Project Websitehttp://accessproject.colostate.edu/udl/modules/ • Colorblind testing tools for your website • Usability studies • effective layouts and fonts • eye tracking studies • effects of line length on reading ability • and more • Validate HTML and CSS code • And much more…

19. Thank you! The ACCESS Project accessproject@colostate.edu