Basics of Website Accessibility - NTEN Webinar - Spring 2012

Access for All: Basics of Web AccessibilityApril 17, 2012

Presenters:

Cindy LeonardBayer Center for Nonprofit Management

at Robert Morris University

Sandi GauderCMS Web Solutions

To access the audio portion of this webinar:

1) Dial: (866) 740-12602) Input access code: 3979000

Access for All: Basics of Web Accessibility

• Technology Services Manager• Bayer Center for Nonprofit Management at

Robert Morris University• Enthusiastic Geek & Cat Lover• Web Developer• leonard@rmu.edu• @cindy_leonard

Cindy Leonard

• Partner, CMS Web Solutions• Fan of Red Shoes & Cats (is it a geek thing?)• Web Developer• sandi@cmswebsolutions.com • @sgauder

Sandi Gauder

• What is Web accessibility?• What are the various Web accessibility guidelines

(and where do they come from?)• What are the benefits of having an accessible site?• Questions to ask your Web developer• Tips to improve your site right now• Additional resources• Q&A

Agenda

http://basicsofwebaccessibility.wikispaces.com/

Session Wiki

(The Good Stuff.)

Source: Hityourmarketi.com

What isWebAccessibility?

Source: dom-iris.si/images/prilagoditve-komunikacija1_en.gif

Source: www.communities-ontheweb.com/images/BrailleReader.jpg

Source: 2.bp.blogspot.com/_fSq2BTxHxIY/TBbYXl4L9zI/AAAAAAAAAG4/E691lD5v14I/s1600/shapiro1.jpg

Source: www.abilityconnectiontexas.org/images/AT_RLTT_002.jpg

Source: www.scn.org/star/techphotos/intelikeys2.jpg

WCAG 2.0

Source: www.w3.org/WAI/

Section 508

Source: www.extron.com/product/img/section508_logo3.gif

Standard on Web Accessibility

Source: www.crwflags.com/fotw/images/c/ca.gif

Accessibility for Ontarians with Disabilities Act (AODA)Integrated Accessibility Standards (Ontario)

Source: http://www.crwflags.com/art/countries/canada~ontario.gif

Benefits of Having an Accessible Website

Source: stritar.net/Upload/Images/BrowserIcons.jpg

Benefits of Having an Accessible Website

Source: website-serve.com/wp-content/uploads/Search_Engines.png

Benefits of Having an Accessible Website

Benefits of Having an Accessible Website

csszengarden.com

Benefits of Having an Accessible Website

Source: zoominlocal.com/pub-files/12597620344b167172924e4/pub/Get_connected_sup/lib/12881710424cc7ee22890c2.jpg

Benefits of Having an Accessible Website

Source: img.howcast.com/images/info/mobile/howcast-on-mobile-devices.jpg

Questions to Ask Your Web Developer

Do you conform to Web standards?

Will it cost more to make my Website accessible?

Can you explain the measures you will take to ensure our Website is accessible?

Based on our community & Website goals, are there any additional accessibility or usability features you would recommend for us?

Source: Tiffany Kuchta, Allegheny Graphics Web Development

Questions to Ask Your Web Developer

Who will maintain the site once it has been built?

If it’s your company, do your maintenance tech conform to the same accessibility standards as your developers?

If it’s our organization, how do we ensure new content meets accessibility standards?

Source: Tiffany Kuchta, Allegheny Graphics Web Development

Quick Tip: Use Headings CorrectlyHeading 1Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Heading 2Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Heading 3Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Heading 3Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Heading 2Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Heading 3Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here. Paragraph text here.

Quick Tip: Use ALT tags on images

Source: http://www.whitehouse.gov/about/presidents/georgewashington

<img src=“georgewashington.png alt=“George Washington 1789 - 1797” /><h1>George Washington</h1>

<a href=“/”><img src=“nten-logo.png alt=“Home – NTEN.org” /></a>

Use text when you can instead of embedding it in an image.

Quick Tip: Improve readability of text

Quick Tip: Make link text meaningful

Source: http://www.reuters.com/

Quick Tip: Make link text meaningful

Source: http://www.hhof.com/

Web Accessibility Standards

• Web Accessibility Initiative (WAI)www.w3.org/WAI/

• Section 508 Standards (U.S. Federal Gov’t)www.section508.gov

• Standard on Web Accessibility (Canada)www.tbs-sct.gc.ca/pol/doc-eng.aspx?section=text&id=23601

• Integrated Accessibility Standards (Ontario)www.e-laws.gov.on.ca/html/source/regs/english/2011/elaws_src_regs_r11191_e.htm

Additional Resources

Educational Info & Web Accessibility Training

• Web Accessibility in Mind (WebAIM)www.webaim.org

• Equal Access to Software and Information (EASI)www.easi.cc

• Knowbilitywww.knowbility.org

• TecAccesswww.tecaccess.net

Additional Resources

Online Web Accessibility Testing Tools

• WAVE Tool by WebAIMwave.webaim.org

• Cynthia Says by HiSoftwarewww.contentquality.com

• Truwex Online 2.0 by Erigami checkwebsite.erigami.com/accessibility.html

Additional Resources

Questions?

Source: catmacros.files.wordpress.com/2009/08/cat_question2.jpg?w=720