1. Inclusion Goes Digital: How to Build an Accessible Website for your Organization November 10, 2011 National Service Inclusion Project

2. www.serviceandinclusion.org Toll-free hotline: 888-491-0326 (voice/TTY)

3. National Partnerships

4. Building with a11y Jeff.Coburn@umb.edu Web Services Manager, ICI @coburnicus tweet this at #nsipweb Building with a11y

5. What is a11y? Accessibility is often abbreviated to the numeronym a11y, where the number 11 refers to the number of letters omitted. Guys, we have buzz word! Seriously, a11y.

6. Quick Poll Question: How many people knew numeronym was a word?

7. Today’s 3 Points The state of the web (accessibility) The state of the web (general) Lets build something with a11y

8. Accessibility Text “Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.” -http://en.wikipedia.org/wiki/Web_accessibility

9. The State of Web Accessibility Is good. We have our buzz word, which makes it more sexy for marketing folks to talk about. We have 3 Strong standards bodies.

10. WAI, ARIA,WCAG WAI is Web Accessibility Initiative http://www.w3.org/WAI/ WAI-ARIA is Accessible Rich Internet App http://www.w3.org/WAI/intro/aria

11. WCAG 2.0 WCAG is Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG20/ Since we are building content, this is the spec the applies to us. Perceivable, Operable, Understandable, Robust

12. Our A11y Strategy The best strategy is probably not to learn to build accessible websites......It’s probably better to learn how to pick stuff built by people who do know how to build accessible websites

13. The State of the Web Is good. Like really good. We now have HTML5 and Progressive Enhancement/Responsive Design. Adobe Flash is dying.

14. The Promise of HTML5 HTML5 next revision of HTML, adding audio, video, animation, local storage, location awareness etc. It’s pretty awesome. but its really new, and not supported by all browsers, yet. HINT: Update your browsers.

15. Fact: Every time you don’t update your browser: George Lucas thinks about making another Star Wars movie. A puppy becomes very sad.

16. Responsive Design Coined by Ethan Marcotte One codebase that “responds” to the screensize and capabilities of a device. It’s important because less and less of browsing is on traditional computers. www.bostonglobe.com

17. This Isn’t That New The first webpage ever was responsive http://www.w3.org/History/19921103- hypertext/hypertext/WWW/TheProject.ht ml Will your site work in 20 years?

18. Degrading Gracefully “I like an escalator because an escalator can never break, it can only become stairs.” - Mitch Hedberg

19. Let’s Build Something With what? A web browser. That’s it. Just a browser. AN UPDATED BROWSER, we’re not monsters. Not Internet Explorer, pretty please.

20. Another Quick Poll Question: Who feels their website is too outdated to do cool social media stuff?

21. Let’s Use a Content Management System (CMS) Heavy lifting is done for you Stay in the browser (no new tools) Social goodies build-in Accessible, if you choose wisely

22. CMS Requirements Accessible/Responsive Hosted/Managed Customizable Robust and Social* Base mode is free

23. Platform Options SquareSpace Drupal (via Drupal Garden) Blogger Wordpress

24. Platform Eliminations SquareSpace (not free) Drupal (immature, not responsive) Blogger (Not robust enough) Wordpress (You’re the one for us)

25. Pick a Theme Create an account (or download your own version of Word Press) Find a responsive theme (using filter) Test theme against WCAG 2.0 http://achecker.ca/checker/ See our accessible documents and presentations archive http://serviceandinclusion.org/index.php?page=conf _archive#access

26. Make a page “the front page” We don’t want this to be a blog, so we will stay within the Pages section When making a page, we will use proper markup to make it accessible. Under Settings -> Reading pick the page you want to be the front page.

27. Add Social Content Word Press is a social platform You can embed content form other social tools http://en.support.wordpress.com/shortcodes/ Let’s do this

28. Let’s Add Accessible Video Find or upload a captioned video to YouTube. Simply copy the URL into your page and it will embed. Go the extra mile and provide a link to a transcript if you can.

29. Let’s Collect Some Info We can use wufoo.com which is a11y friendly. Wufoo uses Word Press short-codes as well for easy embed. For the extra mile, put a link to a non- embedded version of the form (just in case).

30. Fin. Questions? Email: jeff.coburn@umb.edu Archived materials will be available at: http://serviceandinclusion.org/index.php?page =conf_archive