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

Provided by the Office of Equity and Inclusion & Disability Access Services 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

Provided by the Office of Equity and Inclusion & Disability Access Services 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

Provided by the Office of Equity and Inclusion & Disability Access Services 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.

Provided by the Office of Equity and Inclusion & Disability Access Services OSU IT Access Policy Can be found on the OSU Accessibility Website ( 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 Exemptions for 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.)

Provided by the Office of Equity and Inclusion & Disability Access Services 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-books Content most impt

Provided by the Office of Equity and Inclusion & Disability Access Services User Perspective: Screen Reader Demos (VoiceOver)

Provided by the Office of Equity and Inclusion & Disability Access Services User Perspective: Screen Reader Demos (JAWS)

Provided by the Office of Equity and Inclusion & Disability Access Services 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.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Overview Template accessibility Template accessibility and end-user created content accessibility 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. 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:

Provided by the Office of Equity and Inclusion & Disability Access Services 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.

Provided by the Office of Equity and Inclusion & Disability Access Services 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 H3 – Second Section H3 – Third Section H2 – Second Main Content Section In both Confident and Standard, the Site Name is an H1 and each specific Page Title is an H2. Built off of that.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Headings Since Confident and Standard define the Site Name as H1 and 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 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.

Provided by the Office of Equity and Inclusion & Disability Access Services 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)DAS

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Color Don’t rely on color alone to convey meaning. 1 in 12 men in the US has some form of colorblindness

Provided by the Office of Equity and Inclusion & Disability Access Services 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.3WCAG 2.0 Guideline requires at least 4.5:1 contrast ratio But how do you check for that without doing math? My Favorites: Paciello Contrast Analyser for PCPaciello Contrast Analyser for PC Paciello Contrast Analyser for Mac Others: Snook.ca, WebAIM, Juice Studio (Firefox add-on)Snook.caWebAIMJuice Studio Learn more about color, and simulate colorblindness, at Vischeck.Vischeck

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Images (Alt Text) Alt Text provides 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.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Images (Alt Text) Simple/Standard Images 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.” Decorative Images Many images are just used for visual interest – for decoration only. In this case it is best to use 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.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Images (Alt Text) Images with Text 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.” 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.

Provided by the Office of Equity and Inclusion & Disability Access Services 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

Provided by the Office of Equity and Inclusion & Disability Access Services 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?

Provided by the Office of Equity and Inclusion & Disability Access Services 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.Disability Access Services Instead of: To visit the Disability Access Services website click here. click here Remember - screen reader software announces what the function/content is. Which would be easier to understand? [link [link click here] [link Disability Access Services]

Provided by the Office of Equity and Inclusion & Disability Access Services 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

Provided by the Office of Equity and Inclusion & Disability Access Services 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 Seed CostMonsantoPioneerDekalb Corn$100/acre$90/acre$80/acre Soybean$60/acre$65/acre$70/acre

Provided by the Office of Equity and Inclusion & Disability Access Services 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 cells instead of cells when you have headers for rows or columns.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Tables for Data Adding a 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.

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Tables for Layout Karen HansonJennifer GossettJo D. Alexander Alternative Testing ServicesNotetaking and Support ServicesDeaf and Hard of Hearing Access Services (541) (541) (541)

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Tables for Layout Karen Hanson Alternative Testing Services (541) nstate.edu Jennifer Gossett Notetaking and Support Services (541) gonstate.edu Jo D. Alexander Deaf and Hard of Hearing Access Services (541) onstate.edu

Provided by the Office of Equity and Inclusion & Disability Access Services 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?

Provided by the Office of Equity and Inclusion & Disability Access Services 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….]

Provided by the Office of Equity and Inclusion & Disability Access Services 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

Provided by the Office of Equity and Inclusion & Disability Access Services Drupal Accessibility: Resources & Tools Laws, Standards & Guidelines: Section 508 (Draft Update)Draft Update Web Content Accessibility Guidelines (WCAG 2.0) Web Content Accessibility Guidelines (WCAG 2.0) OSU Accessibility website OSU Accessibility Testing Tools: WAVE by WebAIM WAVE U of Illinois Firefox Accessibility Extension U of Illinois Firefox Accessibility Extension W3C complete list of tools Articles & Other Resources: WebAIM out of Utah State WebAIM Jim Thatcher Accessibility Course – original screen reader creator Jim Thatcher Accessibility Course Multimedia Resources: MAGpie (free captioning tool) YouTube captioning WebAIM - Captioning

Provided by the Office of Equity and Inclusion & Disability Access Services Conclusion There is a lot to consider to make your content accessible, but, there are plenty of resources available: If you are interested in learning more about web accessibility, want to have your site reviewed, or just have questions: