Slide 1

Slide 2

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

Slide 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 1 Access 101 May 16, 2011

Slide 4

Vision for the Course For you to see that web accessibility: is important is easy is a challenge cant 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 May 16, 2011 2 Access 101

Slide 5

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

Slide 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 May 16, 2011 4 Access 101

Slide 7

Why Web Accessibility Should be a Focus Legal Sense Its 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 May 16, 2011 5 Access 101

Slide 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 May 16, 2011 6 Access 101

Slide 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 (Provosts Council, Cabinet, General Counsel, VP for Information Services, COSID, ITCC, Web Comm & Central Web) June 15, 2011 7 The Importance of Accessibility & IT

Slide 10

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 The IT Access Policy - Requirements June 15, 2011 8 The Importance of Accessibility & IT

Slide 11

The IT Access Policy - Conditions June 15, 2011 9 The Importance of Accessibility & IT Applicability All OSU web presence; inclusive of web pages, web applications, electronic documents and multimedia used 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.)

Slide 12

Visual disabilities Screen Readers Magnifiers Speech Recognition Increased contrast Hearing disabilities Captions/Transcripts Website Accessibility - The User Perspective April 27, 2011 10 Making IT Communications Accessible Mobility disabilities Speech Recognition Keyboards Headsticks Mouthwands Cognitive/mental disabilities Speech Recognition E-text/e-books Content most impt

Slide 13

Website Accessibility - The User Perspective May 16, 2011 11 Access 101

Slide 14

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 Testing for Accessibility & Resources May 16, 2011 12 Access 101

Slide 15

Website Accessibility Important Items to Implement 1.Headings 2.Navigation 3.Layout & Tab Order 4.Color Combinations - Is this hard to read? 5.Alt Text (Images) 6.Links 7.Fonts 8.Forms 9.Tables 10.Lists 13 Access 101 May 16, 2011

Slide 16

Headings When thinking of structure, think outline. Its 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 Access 101 May 16, 2011

Slide 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 H3 Second Section H3 Third Section H2 Second Main Content Section 15 Access 101 May 16, 2011

Slide 18

Headings Lets try it out. http://ds.oregonstate.edu/prospective/services.php 16 Access 101 May 16, 2011

Slide 19

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)DAS Navigation should be consistent from page to page within a site. 17 Access 101 May 16, 2011

Slide 20

Navigation A note about Drop Down Menus. 18 Access 101 May 16, 2011

Slide 21

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 Lets try it out http://oregonstate.edu/accessibility/class/tabindexhttp://oregonstate.edu/accessibility/class/tabindex WAVE has a great tool to help visualize tab order 19 Access 101 May 16, 2011

Slide 22

Color Combinations or: Is this hard to read? Dont rely on color alone to convey meaning. 1 in 12 men in the US has some form of colorblindness 20 Access 101 May 16, 2011

Slide 23

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.3WCAG 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 PacielloWeb Accessibility Toolbar from Paciello For Mac Users: Paciello Contrast Analyzer for MacPaciello Contrast Analyzer for Mac Others: Snook.ca, WebAIM, Juice Studio (Firefox add-on)Snook.caWebAIMJuice Studio Learn more about color, and simulate colorblindness, at Vischeck.Vischeck 21 Access 101 May 16, 2011

Slide 24

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 22 Access 101 May 16, 2011

Slide 25

Alternative Text Simple/Standard Images Be as simple and concise as possible. Just describe the image in context. 23 Access 101 May 16, 2011

Slide 26

Alternative Text Images with Text Just use the text in the image as the alt text. 24 Access 101 May 16, 2011

Slide 27

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 25 Access 101 May 16, 2011

Slide 28

Alternative Text 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 its complicated). In this case, be as concise and simple as possible. 26 Access 101 May 16, 2011

Slide 29

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, 27 Access 101 May 16, 2011

Slide 30

Alternative Text & a Note about CAPTCHAs 28 Access 101 May 16, 2011

Slide 31

Alternative Text Lets try it out. http://oregonstate.edu/accessibility/class/alt-text May 16, 2011 29 Access 101

Slide 32

Descriptive Links Use descriptive link text, dont use ambiguous text like click here. Use this: Visit the Disability Access Services website.Disability Access Services Instead of: To visit the Disability Access Services website click here.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] Be judicious about how many links you use. Links May 16, 2011 30 Access 101

Slide 33

Skip Links Skip links are same page links that allow users to skip over content to certain sections of your web page. Must be the first link/the first item on the page Can be implemented in different ways: Hidden (http://oregonstate.edu/recsports)http://oregonstate.edu/recsports Hidden until focus (http://ds.oregonstate.edu)http://ds.oregonstate.edu Always visible (http://webaim.org)http://webaim.org Try it out, visit these pages and TAB so you can see the skip link in focus Links May 16, 2011 31 Access 101

Slide 34

Link Focus Links should always be visible, regardless of how a user arrives on the link (by mouse or keyboard). This is a coding thing, and if you use a template youd need to work with Web Comm or Central Web. Lets try it out. First use your mouse to see what links look like when you hover over them, then, use the TAB key or SHIFT-TAB to go backwards: Good link focus http://oregonstate.edu/accessibility/Itpolicy.http://oregonstate.edu/accessibility/Itpolicy Okay link focus http://oregonstate.edu/financialaid/http://oregonstate.edu/financialaid/ Bad link focus http://oregonstate.edu/uhds/http://oregonstate.edu/uhds/ Links May 16, 2011 32 Access 101

Slide 35

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 33 Access 101 May 16, 2011

Slide 36

Forms The biggest difficulty with forms is in making sure they are labeled properly, usually with a 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 34 Access 101 May 16, 2011

Slide 37

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. 35 Access 101 May 16, 2011 Seed CostMonsantoPioneerDekalb Corn$100/acre$90/acre$80/acre Soybean$60/acre$65/acre$70/acre

Slide 38

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.] 36 Access 101 May 16, 2011

Slide 39

Documents All of the items weve 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 37 Access 101 May 16, 2011

Slide 40

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 38 Access 101 May 16, 2011

Slide 41

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 Testing for Accessibility & Resources May 16, 2011 39 Access 101

Slide 42

May 16, 2011 40 Access 101 Thank you for coming Questions?