1 / 19

Accessible Course Materials Made Easy

Accessible Course Materials Made Easy. The ACCESS Project Jesse Hausler, UDL/Accessibility Coordinator Craig Spooner, Coordinator. The ACCESS Project. Universal Design for Learning (UDL) Funded by U.S. Dept. of Education, Office of Postsecondary Ed.

roland
Download Presentation

Accessible Course Materials Made Easy

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related