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

Toll-free hotline: (voice/TTY)

National Partnerships

Building with a11y Web Services Manager, tweet this at #nsipweb Building with a11y

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.

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

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

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

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.

WAI, ARIA,WCAG WAI is Web Accessibility Initiative WAI-ARIA is Accessible Rich Internet App

WCAG 2.0 WCAG is Web Content Accessibility Guidelines Since we are building content, this is the spec the applies to us. Perceivable, Operable, Understandable, Robust

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

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

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.

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

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.

This Isn’t That New The first webpage ever was responsive hypertext/hypertext/WWW/TheProject.ht ml Will your site work in 20 years?

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

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.

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

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

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

Platform Options SquareSpace Drupal (via Drupal Garden) Blogger Wordpress

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

Pick a Theme Create an account (or download your own version of Word Press) Find a responsive theme (using filter) Test theme against WCAG See our accessible documents and presentations archive _archive#access

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.

Add Social Content Word Press is a social platform You can embed content form other social tools Let’s do this

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.

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

Fin. Questions? Archived materials will be available at: =conf_archive