Drupal Training Series

1. Drupal Training Series • Accessibility Basics for the Web • Gabriel Merrell • Interim Associate Director for Accessibility • Office of Equity & Inclusion

2. What We’ll Be Covering… • Why Web Access Should be a Focus • When to Consider Accessibility • OSU IT Access Policy • User Perspective • Drupal Accessibility • Overview • Headings • Menus/Site Navigation • Color • Images (Alt Text) • Links (Descriptive) • Tables • Forms • Lists • Resources & Tools

3. 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 • Legal Sense • It’s the Law – DOJ ruled that ADA applies to the web, and is currently creating new regs • 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 • 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

4. When to Consider Accessibility • Accessibility should be considered throughout the entire design and implementation of content, but is most useful and the least time/cost intensive when built into the initial design concepts. • An accessible website can look and feel the exact same as an inaccessible website – very little about access changes the visual look of a web page.

5. OSU IT Access Policy • Can be found on the OSU Accessibility Website(http://oregonstate.edu/accessibility). • Requires web page designs consistent with policy standards (WCAG 2.0 Level AA). • All new and revised pages, templates and themes published after the effective date (Feb 22, 2012) 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 • Exemptionsfor certain situations • 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.)

6. User Perspective • Mobility disabilities • Speech Recognition • Keyboards • Headsticks • Mouthwands • Cognitive/mental disabilities • Speech Recognition • E-text/e-booksContent most impt Visual disabilities • Screen Readers Magnifiers Speech Recognition Increased contrast Hearing disabilities Captions/Transcripts

7. User Perspective: Screen Reader Demos (VoiceOver)

8. User Perspective: Screen Reader Demos (JAWS)

9. Drupal Accessibility: Overview • Now that you’ve heard how a screen reader works, and how individuals with disabilities interact with websites, there are a few simple key concepts to keep in mind. • Linearization-all screen readers and assistive technology linearize web content – taking code and lining up items one after the other. While most of us can just look at a web page and determine what section we are looking for, many individuals can not. • Keyboard Access– many users with disabilities can not use a mouse to interact with websites. The keyboard is the only way to navigate content. You can try this for yourself. The “TAB” key moves one link forward at a time. The “SHIFT-TAB” key combo moves one link backwards at a time.

10. Drupal Accessibility: Overview Template accessibility Content accessibility Template end-users (you) need to understand how the template is laid out to build off of predefined structure. How you create menus, headings, images, links, tables, lists, and forms is very important to how accessible your site will be. For most of the rest of the hour, we’ll spend time looking at how to use Drupal to make this specific items accessible. Learn much more at: http://oregonstate.edu/accessibility/web • Template accessibility and end-user created contentaccessibility are two separate things that need to be considered in full. • The templates provides a lot of the framework that you need to build off of. • Many colors have been predefined. • Headings have been predefined, so, consider the template headings. • How menus are structured has been defined.

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

14. Drupal Accessibility: 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 In both Confident and Standard, the Site Name is an H1and each specific Page Title is an H2. Built off of that.

15. Drupal Accessibility: Headings Since Confident and Standard define the Site Name as H1and each specific Page Title as H2, all of your created content should start with H3 to be properly nested. • H1 – Site Name (e.g. Gabe’s Trial Drupal Site) H2 – Page Title (e.g. Home) H3 – First Section on homepage H4 – Subsection H4 – Subsection H3 – Second Section H3 – Third Section Using another H1 or H2 would be inappropriate. The template has also defined other site features with Headings, including menus as H3 (side, footer and nice-menus), News and Events sections in Standard as H3.

16. Drupal Accessibility: Menus • More than one menu can be confusing • Menus should be consistent from page to page within a site. This is handled mostly through the template. • Accordion/Expanded menus are okay • Page titles and menu should be related – should use same words. • All Drupal menus are accessible • If you have a web page with a lot of content, consider using a Table of Contents (TOC). (e.g. DAS)

17. Drupal Accessibility: Color • Don’t rely on color alone to convey meaning. • 1 in 12 men in the US has some form of colorblindness

18. Drupal Accessibility: Color or Is this hard to read? • People with low-vision are most affected by contrast. The templates are getting better about pre-defined color accessibility, but you still have to manage any color you define or include. • Use sufficient contrast • WCAG 2.0 Guideline 1.4.3requires at least 4.5:1 contrast ratio • But how do you check for that without doing math? • My Favorites: Paciello Contrast Analyser for PC • Paciello Contrast Analyser for Mac • Others: Snook.ca,WebAIM,Juice Studio(Firefox add-on) • Learn more about color, and simulate colorblindness, at Vischeck.

19. Drupal Accessibility: Images (Alt Text) • Alt Textprovides 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 is first. • Many types of images: simple, with text, link images, decorative, complex.

20. Drupal Accessibility: Images (Alt Text) Simple/Standard Images 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. • Be clear and concise. Remember what the context of the image is. • If this was on a biography of Sher Fenn page the alt text just needs to be “Sher Fenn.”

21. Drupal Accessibility: Images (Alt Text) Images with Text Linked Images When using images for links, you want the alt text to describe what clicking the link would do. If a college mascot icon was used as a link to a history of mascots page, we would want to identify in the alt text that the link goes to that page. • Just use the text from the image as the alt text, as long as the image isn’t also a link. • If the images below were being used, the alt text just needs to be “Daisy Farm Project” or “Bowling.”

22. Drupal Accessibility: Images (Alt Text) Complex Images • Pictures of charts, graphs, tables, images with complex meanings. • Best to describe image in content of your page, as this will describe image for all users. • Many options, you could describe, create a list, use an actual table

23. Drupal Accessibility: Images (Alt Text) CAPTCHAs • You might not implement CAPTCHAs, but, if you do, know how to select the most accessible one possible. • These two CAPTCHAs are quite different. Which one is less accessible?

24. Drupal Accessibility: Links (Descriptive) • When writing link text, use descriptive links, links that make sense when read out of context. Don’t use ambiguous text like “click here” or “read more.” • Use this: Visit the Disability Access Services website. • Instead of: To visit the Disability Access Services website click here. • Remember - 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]

25. Drupal Accessibility: Fonts • Fonts have been defined by the templates already. If you change fonts, be aware of the following. • 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

26. Drupal Accessibility: Tables • Tables have a bad rap in the accessibility field, sometimes for good reason, but if implemented well tables can be fully accessible. • Two types of tables: data tables and layout tables. • 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

27. Drupal Accessibility: Tables for Data • In Drupal, any table is added from the toolbar. If you are using a table for data, you must define header cells and should define the scope (col/row). • Make a table more accessible by adding <th> cells instead of <td> cells when you have headers for rows or columns.

28. Drupal Accessibility: Tables for Data • Adding a <caption> is highly preferred. • If you are creating a more complicated table, there are other coding techniques that need to be used. • Avoid nesting data tables, or splitting cells in two.

29. Drupal Accessibility: Tables for Layout

30. Drupal Accessibility: Tables for Layout

31. Drupal Accessibility: Forms • The biggest difficulty with forms is in making sure they are labeled properly. If you use Webform, this happens automatically, as do the items below. • 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?

32. Drupal Accessibility: 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….]

33. Drupal Accessibility: A quick note about Videos • 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

34. Drupal Accessibility: Resources & Tools • 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

35. Conclusion • There is a lot to consider to make your content accessible, but, there are plenty of resources available: • http://oregonstate.edu/accessibility • If you are interested in learning more about web accessibility, want to have your site reviewed, or just have questions: • gabriel.merrell@oregonstate.edu • accessibility@oregonstate.edu