Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Accessibility Basics for the Web OSU Professional Development Class Gabriel Merrell – Office of Equity & Inclusion and Disability Access Services."— Presentation transcript:

1

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

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

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

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

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 May 16, 2011 5 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 May 16, 2011 6 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) June 15, 2011 7 The Importance of Accessibility & IT

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

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.)

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

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

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

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

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 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

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

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

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

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

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 Let’s 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

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

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

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

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

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

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

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

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

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

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

32 Descriptive Links Use descriptive link text, don’t 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

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

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 you’d need to work with Web Comm or Central Web. Let’s 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

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

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

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

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

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

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

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

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


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

Similar presentations


Ads by Google