Top Tips for Building Inclusive Electronic Content CHHS Web Content Managers May 18, 2017 Allison Kidd Assistive Technology Resource Center

Assistive Technology Resource Center (ATRC) Ensuring equal access: 1. Direct Services: AT assessment, accommodation, training, equipment loans, and resources Consultation and Education on campus regarding electronic accessibility, universal design, and ergonomics Our Mission: Ensuring equal access to technology and electronic information for CSU students and employees with disabilities as defined by the Americans with Disabilities Act and Sections 504 and 508 of the Rehabilitation Act

Website Audiences Are Diverse Nontraditional Students Learning / Cognitive Styles Non-Native English Speakers Ethnicity, Culture, Gender Disabilities

Apparent vs non-apparent disabilities When we look at students with disabilities we see about 1/3 have apparent disabilities: things like mobility, visual and hearing impairments. The other 2/3 have a non-apparent disability: So this includes things like ADHD, Learning disabilities, Autism, TBI, PTSD. People often equate electronic accessibility with readability by screen readers (used by people with visual impairments) but most of the students seeking accommodations follow under non-apparent disabilities.

Consider Diversity of Technology and Audience How do people access your websites? What kind of devices or technology do they use? What kind of content do you have? (Text, images, videos?) What file types do you post? Who is accessing your websites? How might a visitor with an apparent disability read your website? How about a visitor with a non-apparent disability? What problems could they encounter?

Flexible Documents - Electronic Accessibility Content must be designed to interact well with diverse technologies. Documents that work are Accessible Inclusive / Universal Design Create with accessibility up front instead of fixing it later. Test as you go. Shannon

Universal Design – Physical and Digital Worlds Include accessibility as part of your work flow instead of retrofitting UDL is the same concept for electronic accessibility Designing digital content to work for students with disabilities benefits all students

CSU Policy: Accessibility of Electronic Information & Technologies Campus-Wide Priorities Public-Facing Content (e.g. Websites) Must pass WCAG 2.0 AA standards Student Need – Accommodation Requests Other Considerations Timeliness is key Benefits to all students CSU Accessibility Policy: http://policylibrary.colostate.edu/policy.aspx?id=739

Top Tips for Inclusive Electronic Materials Make Scanned PDFs Searchable Use Headings in Word Use Slide Layouts in PPT Make Links Descriptive Add Alternative Text to Images Use Accessibility Checkers Add Captions to Videos Allison

Make PDFs Searchable Scanned PDFs are images, not text Use OCR (Optical Character Recognition) Software Software that converts the image to text Creates a PDF with text that is: Selectable – Copy and Paste Searchable Text-to-Speech Capable Shannon

Use Headings in Word Headings are not just for looks! Generates a Table of Contents / Outline Provides Structure Indicates Level of Importance Adds visual emphasis to a section Benefits Both Visual and Non-Visual Readers

Headings on the Web Format text using the provided styles for headings, lists, and paragraph text These choices are common in many html editors, including WordPress Start with the biggest (lowest #) heading available, and don’t skip levels

PPT Slide Titles Give Every Slide a Unique Title Check Your Outline View

Slide Layouts in PowerPoint Use Slide Layouts instead of drawing text boxes This helps with reading order

PPT Reading Order Home > Arrange > Selection Pane To check the reading order of a slide: Home > Arrange > Selection Pane Content will read from the bottom to top in the selection pane

Descriptive Links Do you see a problem with this link? https://www.youtube.com/watch?v=VyA5mkhCzRA Link addresses: Can be long and full of random characters Clutter up the page Are difficult to read

Links Examples Bad Link: https://www.youtube.com/watch?v=VyA5mkhCzRA Good Link – Change the display text to be descriptive: Good, Bad, and Ugly: Closed Captioning and Video Description Good Link for Print Materials – Include the address in parentheses: Good, Bad, and Ugly: Closed Captioning and Video Description (https://www.youtube.com/watch?v=VyA5mkhCzR A)

Adding Display Text to Links (Microsoft Office)

Writing Alt Text for Images: Context is Key Consider the picture. How would the alt text change if the image is used for… Ice Cream Manufacturer Girl Scouts of America Diversity Website Source: Jesse Hausler, ATRC & The ACCESS Project

Adding Alt Text (Microsoft Office) Right-Click on Image to Format Picture or Format Shape Click on Layout & Properties in the Sidebar Expand the Alt Text menu Add the text in the Description field

Converting from Office to PDF Start with an Accessible Source Document Using Acrobat Professional Plugin “Enable Accessibility and Reflow with Tagged Adobe PDF” in Plugin Preferences Use “Save As PDF” or “Create PDF” Avoid Printing to Adobe PDF in the Printers List! Using Microsoft Built-in Converter “Document structure tags for accessibility” in “Save as” Options

Fixing PDFs (Advanced) Both Scanned and Converted PDFs need to be manually checked for accessibility within Acrobat Check “Tags” for Correct Reading Order Images will be out of order on converted PDFs Scanned PDFs need to have tags, headings and alt text added manually

Add Captions to Videos Captions are required on public-facing videos Prioritize high-traffic videos Captions benefit many website visitors, including those who: Have Hearing Impairments Have a Learning Disability or other non-apparent disability Don’t have speakers / headphones Are in a loud or quiet workspace Are learning English / have difficulty with accents Want to search and jump to a specific point in the video

YouTube Auto-Caption Failure Source: Funniest YouTube Captions Fails (CLONED) (http://www.huffingtonpost.com/2010/03/29/funny- youtube-caption-fai_n_516866.html)

Captioning Options at CSU YouTube Auto-Captions A good place to start, but must edit for accuracy Amara DIY Captions Manually add transcript to video Outsource Captioning 3PlayMedia – approx. $2/min – potential CSU vendor CHHS is working on a subscription with Rev.com Cost is on the department (at least for now)

Check Your Microsoft Office Documents File > Check for Issues > Check Accessibility Manually check images, since the checker will not realize when the alt text is ‘junk’

Check Your PDFs Use the “Make Accessible” Action Wizard in Acrobat

Check Your Web Content Use the WAVE Tool to check webpages for accessibility.

Campus Resources and Supports ATRC Resources on Universal Design and Accessibility Tips and Guides at Accessibility By Design (http://accessibility.colostate.edu) Allison.Kidd@colostate.edu – Accessibility Specialist Services for CSU students and employees with disabilities ATRC Website (http://atrc.colostate.edu) (970) 491-6258 atrc@colostate.edu Allison