Accessibility Basics for the Web

1. Accessibility Basics for the Web OSU Professional Development Class Gabriel Merrell – Office of Equity & Inclusion and Disability Access Services Before the class beings, open a web browser and navigate to http://oregonstate.edu/accessibility/class. • On the page you will find a 2 minute pre-class survey, please complete it so I can assess the class. • This PowerPoint can also be found on the page if you want to follow along.

2. Accessibility Basics for the Web OSU Professional Development Class Gabriel Merrell – Office of Equity & Inclusion and Disability Access Services

3. Accessibility Basics for the Web: Outline • Vision for the Course • Goals for the Course • Why Web Accessibility Should be a Focus • IT Access Policy • User Perspective • Resources & Tools • Website Accessibility • Documents • Multimedia Access 101

4. Vision for the Course For you to see that web accessibility: is important is easy is a challenge can’t be fully learned, and that is okay is a process is all about lack of restrictions, opening pathways to all is an even playing field Access 101

5. Goals for the Course To express why web access is important and how people with disabilities interact with the web Discuss the IT policy and how it applies to participants Learn basic concepts about web accessibility Introduce you to resources and tools so you can continue to learn Influence you to make small (or large) changes to increase the access of your sites Motivate you to share with others, help create positive change Access 101

6. Why Web Accessibility Should be a Focus Ethical Sense To prevent the intentional or unintentional exclusion of others on the basis of a disability Reach the widest possible audience – 20% of U.S. Pop has a disability (2000 Census) – largest underrepresented group Access 101

7. Why Web Accessibility Should be a Focus Legal Sense It’s the Law – the Dept of Justice maintains that the ADA applies to the web, and is currently creating new regulations Legal obligation to provide equal access through communications – ADA “communications with people with disabilities must be as effective as communication with non-disabled persons” Many instances of legal cases and complaints that apply to us Access 101

8. Why Web Accessibility Should be a Focus Business Sense Accessibility standards have been researched and vetted to work with all emerging technologies (smart phones, tablets, cross-platform compatibility) Will increase web traffic and search optimization Web increasingly becoming way we all do business Access 101

9. The IT Access Policy How Was It Developed? Many peer institutions already have policies with defined standards: Cal State System (2004 - Accessible Technology Initiative) Purdue (2010), Michigan State (2009), UC Davis (2006), NC State (2006), Ohio State (2004) Research and integration of peer policies into OSU language Updated wording and standards to follow ANPRM Talked with campus constituents (Provost’s Council, Cabinet, General Counsel, VP for Information Services, COSID, ITCC, Web Comm & Central Web) Access 101

10. The IT Access Policy - Requirements Web page designs consistent with policy standards • All new and revised pages, templates and themes published after the effective date must comply with policy standards • Users must be able to report difficulty accessing site content • Certain high priority pages, such as pages with core institutional information, regardless of current status, will need to comply with the policy. These units will be contacted and offered assistance in ensuring the accessibility of their web pages Electronic documents & multimedia on web pages consistent with policy standards Access 101

11. The IT Access Policy - Conditions Applicability • All OSU web presence; inclusive of web pages, web applications, electronic documents and multimediaused to provide university programs, services or activities Exemptions • Archived (no intention for alteration again), or legacy pages (published prior to effective date – Feb 22, 2012) not deemed high priority • Undue burden and non-availability as determined by OEI through consultation with others with expertise and/or perspective (Media Services, CWS, DAS, etc.) Access 101

12. Website Accessibility - The User Perspective Visual disabilities Screen Readers Magnifiers Speech Recognition Increased contrast Hearing disabilities Captions/Transcripts Mobility disabilities Speech Recognition Keyboards Headsticks Mouthwands Cognitive/mental disabilities Speech Recognition E-text/e-booksContent most impt Access 101

13. Website Accessibility - The User Perspective Access 101

14. Testing for Accessibility & Resources Laws, Standards & Guidelines: Section 508 (Draft Update) Web Content Accessibility Guidelines (WCAG 2.0) OSU Accessibility website Testing Tools: WAVEby WebAIM U of Illinois Firefox Accessibility Extension W3C complete list of tools Articles & Other Resources: WebAIM out of Utah State Jim Thatcher Accessibility Course – original screen reader creator Multimedia Resources: MAGpie (free captioning tool) YouTube captioning WebAIM - Captioning Access 101

15. Website Accessibility Important Items to Implement Headings Navigation Layout & Tab Order Color Combinations - Is this hard to read? Alt Text (Images) Descriptive Links Fonts Forms Tables Lists Access 101

16. Headings When thinking of structure, think outline. It’s about organization. Never use bold, italicize, underline or font size to create this structure. Headings are a proper standard, as headings provide structural navigation. Headings are the only way to create structural sections on your page. Access 101

17. Headings Headings should be used to define sections, should be properly nested, usually one (maybe two) H1s per page, and that H1 should usually be the same as the page title. So a proper heading structure on one page would be similar to… H1 – Page Title H2 – First Main Content Section H3 – First Section H4 – Subsection H4 – Subsection H3 – Second Section H3 – Third Section H2 – Second Main Content Section Access 101

18. Navigation Page structure and navigation should be related – be similar. If you have a web page with a lot of content, consider using a Table of Contents (TOC). (Ex: DAS) Navigation should be consistent from page to page within a site. Access 101

19. Navigation A note about Drop Down Menus. Access 101

20. Layout & Tab Order Tab order refers to how the web page will be read by a screen reader. Linearization is most important. You can change the tab order of your site using <tab index=“#”> Access 101

21. Color Combinations or: Is this hard to read? Don’t rely on color alone to convey meaning. 1 in 12 men in the US has some form of colorblindness Access 101

22. Color Combinations or: Is this hard to read? People with low-vision are most affected by contrast Use sufficient contrast WCAG 2.0 Guideline 1.4.3 requires at least 4.5:1 contrast ratio But how do you check for that without doing math? My Favorite: Web Accessibility Toolbar from Paciello For Mac Users: Paciello Contrast Analyzer for Mac Others: Snook.ca, WebAIM, Juice Studio (Firefox add-on) Learn more about color, and simulate colorblindness, at Vischeck. Access 101

23. Alternative Text Alt Text provides screen reader users the ability to interact with images Context matters most when deciding what to write for the ALT text, and if the image is meant to convey info or meaning Avoid using words such as “image” “photo” “graphic” in the alt text as the screen reader announces what the item first Many types of images: simple, with text, link images, decorative, complex Access 101

24. Alternative Text Simple/Standard Images Access 101

25. Alternative Text Images with Text Access 101

26. Alternative Text Images that serve as Links If a college mascot icon was used as a link, we would want to identify what clicking the link would do, not describe the image Access 101

27. Alternative Text Decorative Images Many images are just used for visual interest – for decoration only. In this case it is best to use <alt=“”> NULL alt text. This hides the image from a screen reader, and can drastically reduce time spent navigating a page. This is not possible with our text editor in Drupal (well it is, but it’s complicated). In this case, be as concise and simple as possible. Access 101

28. Alternative Text Complex Images Sometimes we use charts, graphs, tables that are images and not HTML code. Sometimes the meaning of the image is much more complicated that a simple short alt text is appropriate for. In these cases, it is always best to describe the image in the content of your page as this will describe the image in detail for all users. You must always still use alt text for the image, Access 101

29. Alternative Text & a Note about CAPTCHAs Access 101

30. Descriptive Links Use descriptive link text, don’t use ambiguous text like “click here” Use this: Visit the Disability Access Services website. Instead of: To visit the Disability Access Services website click here. Screen reader software announces what the function/content is. Which would be easier to understand?[link http://ds.oregonstate.edu/home][link click here][link Disability Access Services] Access 101

31. Fonts Real text instead of pictures of words is always preferred. Size – larger font size enhances accessibility, some fonts are larger by default (Verdana) Ease of Reading – fonts without much embellishment/with clean lines are generally thought to be easier to read (sans-serif – without “details”) Serif vs. Sans-Serif fonts Georgia is a serif font Tahoma is a sans-serif font From Wikipedia Access 101

32. Forms The biggest difficulty with forms is in making sure they are labeled properly, usually with a <label> <id> tag. Ask yourself: Does the form linearize well Are labels for the form boxes listed before the form box/radio button/etc Are you using color to identify required fields Access 101

33. Tables Tables have a bad rap in the accessibility field, sometimes for good reason, but if implemented well tables can be fully accessible. If you have a simple table, consider using a list instead. At the least, try to linearize your data. Current Seed Prices per Acre Corn: Monsanto $100, Pioneer $90, Dekalb $80 Soybean: Monsanto $60, Pioneer $65, Dekalb $70 If using tables for layout make sure the tables linearize well. Access 101

34. Lists Lists (bulleted and numbered) are linear by nature, so usually they are accessible from the outset. Check to make sure lists are actual lists, not just independent bullets. Screen readers will announce the presence of a list.[list of 9 items: one, two, three….] Access 101

35. Documents All of the items we’ve talked about so far are the same (or very close) when talking about document accessibility. Additional Items to consider in documents: Do you have a tagged document (PDF) Use Styles built into the software Use Acrobat Pro to check Accessibility Convert with Accessibility Features Access 101

36. Multimedia – Captioning & Transcribing All multimedia (video plus audio) presentations must be captioned Free (and paid) software exists to help you caption your own videos Many companies also exist that will gladly caption your videos for you DAS could be a low cost on-campus solution Access 101

37. Testing for Accessibility & Resources Laws, Standards & Guidelines: Section 508 (Draft Update) Web Content Accessibility Guidelines (WCAG 2.0) OSU Accessibility website Testing Tools: WAVEby WebAIM U of Illinois Firefox Accessibility Extension W3C complete list of tools Articles & Other Resources: WebAIM out of Utah State Jim Thatcher Accessibility Course – original screen reader creator Multimedia Resources: MAGpie (free captioning tool) YouTube captioning WebAIM - Captioning Access 101

38. Thank you for comingQuestions? Access 101